深入理解ajax——XHR对象

前端之家收集整理的这篇文章主要介绍了深入理解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);
        }
    }
}
原文链接:https://www.f2er.com/ajax/161147.html

猜你在找的Ajax相关文章