深入理解ajax——XHR对象

1999年，微软公司发布IE5，第一次引入新功能：允许javascript脚本向服务器发起HTTP请求。

ajax是asynchronous javascript and XML的简写，中文翻译是异步的javascript和XML，这一技术能够向服务器请求额外的数据而无须卸载页面，会带来更好的用户体验。虽然名字中包含XML，但ajax通信与数据格式无关。

ajax包括以下几步骤：1、创建AJAX对象；2、发出HTTP请求；3、接收服务器传回的数据；4、更新网页数据。

概括起来，就是一句话，ajax通过原生的XMLHttpRequest对象发出HTTP请求，得到服务器返回的数据后，再进行处理。

发送请求：

// 创建xhr对象（这种方法不适用于ie5）
var xhr = new XMLHttpRequest();
// open()方法（第三个参数为是否一部进行请求，若为false则会阻塞，直至请求完成）
xhr.open("get","example.php",false);
// send()方法（如果是post请求则需要带参数，get请求则参数可以为null或无参数）
// xhr.send("id=9&name=yawn&age=18");
xhr.send(null);

接收响应：

当后台响应请求后，xhr的以下属性将会被填充：

responseText:  作为响应主体被返回的文本(文本形式)
responseXML:   如果响应的内容类型是'text/xml'或'application/xml'，这个属性中将保存着响应数据的XML DOM文档(document形式)
status:        HTTP状态码(数字形式)
statusText:    HTTP状态说明(文本形式)

1.同步请求：

send()方法将会阻塞，一直等待后台响应后才返回，可以i使用以下方法处理返回的信息：

if((xhr.status >=200 && xhr.status < 300) || xhr.status == 304){
    alert(xhr.responseText);
}else{
    alert('request was unsuccessful:' + xhr.status);
}

2.异步：

若是异步的响应，则需要检测xhr的readyState属性，readyState取值如下：

0(UNSENT):  未初始化。尚未调用open()方法
1(OPENED):  启动。已经调用open()方法，但尚未调用send()方法
2(HEADERS_RECEIVED):发送。己经调用send()方法，且接收到头信息
3(LOADING): 接收。已经接收到部分响应主体信息
4(DONE):    完成。已经接收到全部响应数据，而且已经可以在客户端使用了

可以在onReadyState()方法中对响应进行处理：

xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        if(xhr.status == 200){
            alert(xhr.responseText);
        }
    }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!