Ajax的简单学习

简介: ajax的核心是 XMLHttpRequest html引用外部的时候这些要放在最后 好处如下: 1.加快网页加载速度 2.

ajax的核心是 XMLHttpRequest
html引用外部的时候这些要放在最后 好处如下:
1.加快网页加载速度
2.document.getElementById也可以用 不然 放head中则无法使用DOM方法
function loadXMLDoc(){
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.onreadystatechange=function{
if(xmlhttp.readyState==4&&xmlhttp.status==200){
document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open(“GET”,”/try/ajax/ajax_info.txt”,true);
xmlhttp.send();
}

onreadystatechange是一个事件处理函数 他会在服务器给XMLHttpRequest对象送回响应的时候被触发
执行
可以 request.onreadystatechange=function(){

}
也可以request.onreadystatechange=doSomething;
不能加() 加了就是立即调用函数的意思 这里我们是把函数的引用赋值给onreadystatechange属性
responseText属性 是用于保存字符串形式的数据 另一个是responseXML属性 用于保存Content-Type头部中
指定为”text/xml“的数据 可以用DOM方法处理这个对象 这也是XMLHttpRequest中有XML的原因
注意:有些浏览器会限制Ajax请求使用的协议 比如Chrome中 如果用file://协议从自己的硬盘里加载文件
就会报错 翻译过来就是 跨域请求只支持HTTP协议的 错误消息
注意: 脚本在发送XMLHttpRequest请求之后 仍会继续执行 不会等待响应返回

但是ajax是无法做到平稳退化的 就需要 Hijax技术 还在学习ing

目录
相关文章
|
6月前
|
设计模式 前端开发 JavaScript
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
49 0
|
JSON 前端开发 JavaScript
JavaScript学习 -- ajax方法的POST请求
JavaScript学习 -- ajax方法的POST请求
66 0
|
JSON 前端开发 JavaScript
前端AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(一)
前端AJAX入门到实战,学习前端框架前必会的(ajax+node.js+webpack+git)(一)
586 0
|
6月前
|
XML JSON 前端开发
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
137 1
|
21天前
|
JSON JavaScript 前端开发
《进阶篇第7章》学习vue中的ajax之后,练习vue案例-github用户搜索案例
《进阶篇第7章》学习vue中的ajax之后,练习vue案例-github用户搜索案例
13 0
|
6月前
|
JSON 前端开发 JavaScript
Ajax 学习总结
这是一个关于Ajax学习的总结,包括导入Ajax包、异步请求和表单验证。示例展示了如何使用jQuery进行Ajax请求,从后台获取并显示数据,同时提到了Json乱码问题的解决方法和表单数据的前后端交互。还给出了表单验证的简单示例,通过Ajax实时校验用户名。
51 2
|
6月前
|
XML JSON 前端开发
学习Ajax使用异步对象发送请求
Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种用于创建更好、更快以及交互性更强的Web应用程序的技术。
62 3
|
6月前
|
XML 开发框架 前端开发
Ajax学习(基础知识)
Ajax学习(基础知识)
|
6月前
|
设计模式 缓存 前端开发
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)(下)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
43 1
|
6月前
|
前端开发 JavaScript fastjson
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)(上)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
73 1