ajax（一），关于XMLHttpRequest对象

网上有许多关于ajax的优缺点及历史介绍，这里不一一赘述，只对其如何与服务器交互和实现进行介绍。

一、与服务器的交互过程

套用石川老师的话，客户端与服务器交互的过程就等同于你和别人打电话的过程。

二、代码实现

//1.创建ajax对象
var xhr ;
if(window.XMLHttpRequest) {
  xhr = new XMLHttpRequest();
} else {  //在IE6以下,需要用ActiceXObject创建 
  xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

//2.与服务器建立连接，告诉服务器需要什么数据（文件）
xhr.open('get', 'filename.json', true);

//3.发送请求
xhr.send(null);

//4. 接收返回值
xhr.onreadystatechange = function() {
  if(xhr.readyState == 4) {
    if(xhr.status >= 200 && xhr.status < 300) {
      //success code
    } else {
      //fail code
    }
  }
}

这就是最简单的ajax请求。

1.参数说明：

xhr.open(method, url, anysc);
[1] method: 请求方法(get,put,update,delete...等等)
[2] url: 目标资源的地址
[3] anysc: 此次请求是否为异步操作

xhr.send(str)
[1] str为提交到服务器的请求体参数。形如 " key=val&key=val "

2.onreadystatechange, readyState, status说明。

xhr.readyState(表示ajax所处的活动阶段)：
0 未初始化，尚未调用open()
1 启动，已调用open()，尚未调用send()
2 发送，已调用send()，尚未接收到数据
3 接受，已接收到数据，尚未完全接收或未解析
4 完成，ajax请求结束，数据可在客户端使用

xhr.onreadystatechange(事件)：当readyState改变时，触发此事件，所以，一个完整的ajax请求/响应过程中，会触发4次

xhr.status：请求结果，http状态码