深入理解ajax的XHR对象

php中世界最好的语言

发布时间：2018-04-03 10:33:42

1608人浏览过

来源于php中文网

原创

这次给大家带来深入理解ajax的XHR对象，使用ajax的XHR对象注意事项有哪些，下面就是实战案例，一起来看一下。

前面的话

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

创建

　　ajax技术的核心是XMLHttpRequest对象(简称XHR)，这是由微软首先引入的一个特性，其他浏览器提供商后来都提供了相同的实现。XHR为向服务器发送请求和解析服务器响应提供了流畅的接口，能够以异步方式从服务器取得更多信息，意味着用户单击后，可以不必刷新页面也能取得新数据

　　IE5是第一款引入XHR对象的浏览器。在IE5中，XHR对象是通过MSXML库中的一个ActiveX对象实现的，而IE7+及其他标准浏览器都支持原生的XHR对象

　　创建一个XHR对象，也叫实例化一个XHR对象，因为XMLHTTPRequest()是一个构造函数。下面是创建XHR对象的兼容写法

var xhr;
if(window.XMLHttpRequest){
  xhr = new XMLHttpRequest();
}else{
  xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

发送请求

open()

　　在使用XHR对象时，要调用的第一个方法是open()，它接受3个参数：要发送的请求的类型 ("get"、"post"等)、请求的URL和表示是否异步发送请求的布尔值

xhr.open("get","example.php", false);

　　[注意]URL是相对于执行代码的当前页面，且只能向同一个域中使用相同端口和协议的URL发送请求。如果URL与启动请求的页面有任何差别，都会引发安全错误

send()

　　send()方法接收一个参数，即要作为请求主体发送的数据。调用send()方法后，请求被分派到服务器

xhr.open("get", "example.txt", false);
xhr.send(null);

接收响应

　　在收到响应后，响应的数据会自动填充XHR对象的属性，主要有以下4个属性

responseText: 作为响应主体被返回的文本

responseXML: 如果响应的内容类型是'text/xml'或'application/xml'，这个属性中将保存着响应数据的XML DOM文档

status: 响应的HTTP状态

statusText: HTTP状态的说明

　　在接收到响应后，第一步是检查status属性，以确定响应已经成功返回。一般来说，可以将HTTP状态码为200作为成功的标志。此时，responseText属性的内容已经就绪，而且在内容类型正确的情况下，responseXML也可以访问了。此外，状态码为304表示请求的资源并没有被修改，可以直接使用浏览器中缓存的版本；当然，也意味着响应是有效的

　　无论内容类型是什么，响应主体的内容都会保存到responseText属性中，而对于非XML数据而言，responseXML属性的值将为null

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

异步

　　如果需要接收的是异步响应，这就需要检测XHR对象的readyState属性，该属性表示请求/响应过程的当前活动阶段。这个属性可取的值如下：

0(UNSENT):未初始化。尚未调用open()方法

1(OPENED):启动。已经调用open()方法，但尚未调用send()方法

2(HEADERS_RECEIVED):发送。己经调用send()方法，且接收到头信息

3(LOADING):接收。已经接收到部分响应主体信息

4(DONE):完成。已经接收到全部响应数据，而且已经可以在客户端使用了

　　只要readyState属性值由一个值变成另一个值，都会触发一次readystatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。通常，我们对readyState值为4的阶段感兴趣，因为这时所有数据都已就绪

　　[注意]必须在调用open()之前指定onreadystatechange 事件处理程序才能确保跨浏览器兼容性，否则将无法接收readyState属性为0和1的情况

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

实例

　　下面以一个小实例来演示ajax中xhr对象的应用

//message.xml

hello world

最后

　　通过实例的演示发现，ajax前端本身的内容并不难。但是，由于ajax涉及到一些后端及网络的知识，使得学起来不是很容易。以后的博文将逐步深入地介绍ajax的重点内容

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关专题

Python 序列化

本专题整合了python序列化、反序列化相关内容，阅读专题下面的文章了解更多详细内容。

2026.02.02

AO3官网入口与中文阅读设置 AO3网页版使用与访问

本专题围绕 Archive of Our Own（AO3）官网入口展开，系统整理 AO3 最新可用官网地址、网页版访问方式、正确打开链接的方法，并详细讲解 AO3 中文界面设置、阅读语言切换及基础使用流程，帮助用户稳定访问 AO3 官网，高效完成中文阅读与作品浏览。

2026.02.02

主流快递单号查询入口实时物流进度一站式追踪专题

本专题聚合极兔快递、京东快递、中通快递、圆通快递、韵达快递等主流物流平台的单号查询与运单追踪内容，重点解决单号查询、手机号查物流、官网入口直达、包裹进度实时追踪等高频问题，帮助用户快速获取最新物流状态，提升查件效率与使用体验。

2026.02.02

Golang WebAssembly（WASM）开发入门

本专题系统讲解 Golang 在 WebAssembly（WASM）开发中的实践方法，涵盖 WASM 基础原理、Go 编译到 WASM 的流程、与 JavaScript 的交互方式、性能与体积优化，以及典型应用场景（如前端计算、跨平台模块）。帮助开发者掌握 Go 在新一代 Web 技术栈中的应用能力。

2026.02.02