Ajax原理
Ajax:Asynchronous JavaScript and XML 异步的Javascript和XML
Ajax可以通过XMLHttpRequest对象与服务器进行交互,实现在不刷新整个网页的情况下,获取数据,再通过javascript脚本操作DOM将数据变化插入到网页中,达到网页部分内容更新的效果。
Ajax创建对象及属性和方法
创建异步调用对象XMLHttpRequest
var xmlHttp=null;
if(window.XMLHttpRequest)
{
xhr = new XMLHttpRequest(); //IE7以上及其他常见浏览器
}
else
{
xhr = new ActiveXObject("Microsoft.XMLHTTP");//IE6、IE5
}
- 当考虑兼容问题,IE6及以下不支持XMLHttpRequest对象,可以使用ActiveObject(“Microsoft.XMLHHTP”)创建异步调用的对象
- null值表示一个空对象指针,使用typeof操作符检测null值会返回“object”,所以当定义的变量准备在将来用于保存对象,那么最好将该变量初始化为null而不是其他值
XHR对象的属性和方法
-
open方法: 规定请求的类型、URL 以及是否异步处理请求。对应三个参数
- method:请求的方法
- url:文件在服务器上的位置
- async:true(异步)或 false(同步)
-
send方法:将请求发送到服务器(仅用于 POST 请求)
注:如果不需要通过请求主体发送数据,则必须传入null。一般get请求不需要传入参数,
而对于post请求,如果需要像 HTML 表单那样 POST 数据,需使用 setRequestHeader() 来添加 HTTP 头
。然后在 send() 方法中规定希望发送的数据。
通过send()发送之后,会接受到响应,响应的数据会自动填充XHR对象的属性。
- responseText:作为响应主体被返回的文本
- responseXML:如果响应的内容类型是”text/xml”或”application/xml”,这个属性中将保存包含着相应数据的XML DOM文档。
- status:响应的http状态
- statusText:Http状态的说明
接收到响应后,一般是先检查status,来确定响应是否成功返回,状态代码200表示成功(以2开头即表示成功),这是responseText就可以被访问了。而
状态代码为304表示请求的资源并没有被修改,可以直接使用浏览器中缓存的版本
,因此这种响应也是有效的。
-
readyState
存有 XMLHttpRequest 的状态,检测请求/响应过程的当前活动阶段从 0 到 4 发生变化
版权声明:本文为qq_35936643原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。