深入理解ajax——XHR对象

最新推荐文章于 2025-09-13 09:06:35 发布

weixin_33979363

最新推荐文章于 2025-09-13 09:06:35 发布

阅读量131

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python php ViewUI

原文链接：https://my.oschina.net/silenceyawen/blog/898559

本文介绍了Ajax技术的发展历程，从IE5引入的JavaScript发起HTTP请求功能讲起，详细解释了Ajax的工作原理及其四个主要步骤：创建AJAX对象、发出HTTP请求、接收服务器数据及更新网页内容。同时展示了如何通过XMLHttpRequest对象实现请求的发送与响应处理。

2019独角兽企业重金招聘Python工程师标准>>>

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://my.oschina.net/silenceyawen/blog/898559