一、AJAX概述
不使用 AJAX 的网页，如果要更新内容，需要重载整个页面。
AJAX （ Asynchronous java script And XML ，异步 java script 和 XML）用于异步通讯，通过在后台与服务器进行少量的数据交换，在不重载整个网页的情况下，对网页局部实现异步刷新。
二、AJAX核心
java script 中使用 XMLHTTPRequest 对象（XHR）实现 AJAX 请求。使用这个对象之前，先了解一下它的属性和方法：
| 属性 |
描述 |
| readyState |
表示 XMLHttpRequest 对象的状态： 0：未初始化状态。已创建 XMLHTTPRequest 对象。
1：准备发送状态。已调用 open 方法，send 方法尚未调用。
2：已经发送状态。send 方法已经调用，尚未开始接受数据。 3：正在接收状态。已经接收到 HTTP 响应头信息，但是响应体还没有完全接收到。 4：完成响应状态。响应数据接受完成。 |
| onreadystatechange |
当 readyState 值（XMLHTTPRequest 对象状态）发生改变时的响应事件。 |
| responseText |
服务器响应的文本内容。 |
| responseXML |
服务器响应的 XML 内容。 |
| status |
服务器响应的 HTTP 状态码。200：OK。304：资源未修改。404：页面未找到。500：服务器错误。 |
| statusText |
服务器响应的 HTTP 状态文本。OK、资源未修改、页面未找到、服务器错误等。 |
| 方法 |
描述 |
| open(method,url, asynch,username, password) |
指定和服务器端交互的HTTP方法，URL地址，即其他请求信息； Method：表示http请求方法，一般使用"GET","POST"。 url：表示请求的服务器的地址。 asynch：表示是否异步（ture），默认为 true。 后边两个可以不指定。 username 和 password 分别表示用户名和密码，提供 HTTP 认证机制需要的用户名和密码。 |
| setRequestHeader(header, value) |
设置请求头。header: 头名称。value: 头的值。 |
| getResponseHeader(header) |
获取指定 header 的响应头信息。 |
| getAllResponseHeaders() |
获取所有响应头信息。 |
| send(content) |
向服务器发出请求，如果采用异步方式，该方法会立即返回。 content：POST请求时以字符串或 formData 对象传进去，GET请求时不填参数或设为 null 。 |
| abort() |
中止请求。XMLHTTPRequest 对象恢复到状态0（未初始化）。 |
三、AJAX步骤
一般步骤如下：
- 实例化 XMLHTTPRequest 对象（注意 IE 兼容性）
- 绑定监听事件（onreadystatechange 属性，判断就绪用 readState 属性 == 4，判断响应成功用 status 属性 == 200，获取响应用 responseText 或 responseXML 属性。
- 建立请求（open() 方法，注意最后一个参数为 ture（因为是 AJAX ））
- 设置请求头（setRequestHeader() 方法，仅限于POST）
- 发送请求（send() 方法，POST 请求时在 send() 方法添加提交参数）
四、AJAX实现
// 第一步，创建 XMLHTTPRequest 对象
var xhr = window.XMLHTTPRequest ? (new XMLHTTPRequest()) : (new ActiveXObject('Microsoft.XMLHttp'));
if(!xhr){
alert('创建 XMLHTTPRequest 对象失败！');
return false;
}
// 第二步，绑定回调函数
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status = 200){ // 请求就绪 && 响应成功
var data = xhr.responseText; // 如果是 XML 数据，用 responseXML 属性获取
// DOM 操作
}
}
// 第三步，建立请求
xhr.open("POST", url, true); // 参数三默认为 true（异步），可以不填
// 第四步，设置请求头（仅限于POST）
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset-UTF-8');
// 第五步，发送请求
xhr.send('fname=michael&&lname=jordan'); // 参数是POST请求体
这里，强调以下四点（引用自 廖雪峰的官方网站 ，第 4 条略作修改）
-
通过检测 window 对象是否有 XMLHttpRequest 属性来确定浏览器是否支持标准的 XMLHttpRequest。注意，不要根据浏览器的 navigator.userAgent 来检测浏览器是否支持某个 java script 特性，一是因为这个字符串本身可以伪造，二是通过IE版本判断java script特性将非常复杂。
-
当创建了XMLHttpRequest对象后，要先设置 onreadystatechange 的回调函数。在回调函数中，通常我们只需通过 readyState === 4 判断请求是否完成，如果已完成，再根据 status === 200 判断是否是一个成功的响应。
-
XMLHttpRequest 对象的 open() 方法有3个参数，第一个参数指定是 GET 或者 POST，第二个参数指定 URL 地址，第三个参数指定是否使用异步，默认是true，所以可以不写。注意，千万不要把第三个参数指定为false，否则浏览器将停止响应，直到AJAX请求完成。如果这个请求耗时 10 秒，那么 10 秒内你会发现浏览器处于“假死”状态。
-
最后调用 send() 方法才真正发送请求。GET 请求不需要参数（或者 null），POST 请求需要把 body 部分以字符串或者 FormData 对象传进去。
五、jQuery中的AJAX
直接用 JS 写 AJAX 步骤有些繁琐。jQuery 中封装了 AJAX 的快捷方法。
$.ajax(url,[settings]) // 执行异步 HTTP (Ajax) 请求
$('选择器').load(url,[data],[callback]) // 从服务器加载数据，把返回 HTML 放入匹配元素
$.get(url,[data],[fn],[type]) // GET 请求加载数据