AJAX异步交互技术之核心对象分析

概述AJAX

AJAX为"Asynchronous Javascript And XML"的缩写，即异步的JavaScript和XML。这是一种实现网页异步交互的动态开发技术，即在不重载整个页面的情况下，与服务器交换数据并更新部分网页。这种技术避免了由于部分网页频繁的验证请求而造成多余的负载，更提升了用户体验。

一、概述XMLHttpRequest

关于ajax异步交互技术，其最重要的核心就是XMLHttpRequest对象了。XMLHttpRequest对象分属于XML DOM（XML文档对象模型），此对象能够实现网页交互中的：
1、在不重新加载页面的情况下更新网页
2、在页面已加载后从服务器请求数据
3、在页面已加载后从服务器接收数据
4、在页面已加载后从服务器接收数据

Ajax是一种异步更新网页的技术，而XMLHttpRequest就提供了浏览器到服务端之间的异步收发控制功能。
所以，XMLHttpRequest是Ajax技术及其重要的组成部分。

二、XMLHttpRequest对象创建

通过一行简单的JS代码，就可以将XMLHttpRequest对象赋值到定义的变量(以下变量名定义为request)，完成创建。

语法：var request=new XMLHttpRequest(); //支持IE7以上及所有现代浏览器

语法：var request=new ActiveXObject(“Microsoft.XMLHTTP”); //老版本IE5和6的兼容写法，看需求选择。

三、XMLHttpRequest对象发送请求与获取响应

发送请求：
1、.open(method,url,async) //建立连接
例如：request.open(“get”,“index.php”,true);

与目标服务器建立连接的方法，规定了请求的类型，URL，以及是否是异步处理请求。
method:请求类型参数，可选get或post。
url:请求的目标URL参数，指目标在服务器上的位置。
async:布尔值参数，true(异步)或false(同步),默认为true。

2、.setRequestHeader(header,value) //向请求添加HTTP头
例如：request.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);

header: 规定头的名称
value: 规定头的值

3、.send(string) //添加提交内容
例如：request.send(“name=王二狗&sex=男”)；

将请求内容发送到服务器的方法，此方法string仅适用于POST类型请求，GET类型默认置空，因为GET请求的内容是附加在URL上的。

获取响应：
如需获得来自服务器的响应，需要使用XMLHttpRequest对象的responseText或responseXML 属性。

1、.responseText 获得字符串形式的响应数据。
例如：document.getElementById(“myDiv”).innerHTML=request.responseText;

2、.responseXML 获得 XML 形式的响应数据。
例如：document.getElementById(“myDiv”).innerHTML=request.responseXML;

四、onreadystatechange 事件获知请求发送状态

当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当准备状态改变时，就会触发 onreadystatechange 事件。事件的readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：

1、onreadystatechange //存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

2、readyState //存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

3、status //存有http状态码
200: “OK”
404: 未找到页面

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。当 readyState 等于 4 且状态为 200 时，表示响应已就绪。
例如：

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

注释：onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。

以上就是JavaScript编写AJAX异步交互时常用到的属性、方法，编写完前端的JS代码，配合后端编写的服务端AJAX交互代码，就可以完成网页的异步更新了。

以上内容如有错漏，敬请联系指正，转载请注明出处。

---

作者更多 靠谱、易懂、可复现的 技术文章在公众号 FaithSinan，
欢迎扫码关注，一起学习交流，获取第一时间更新。