网上有许多关于ajax的优缺点及历史介绍，这里不一一赘述，只对其如何与服务器交互和实现进行介绍。
一、与服务器的交互过程
套用石川老师的话，客户端与服务器交互的过程就等同于你和别人打电话的过程。
| 步骤 | 打电话过程 | ajax从服务器获取数据过程 |
|---|---|---|
| 1. | 准备手机 | 创建ajax对象 |
| 2. | 拨通号码 | 与服务器建立连接 |
| 3. | 说 | 发送请求 |
| 4. | 听 | 接收返回值 |
二、代码实现
//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状态码
