1. AJAX
异步JavaScript + XML，用于浏览器内部通过前端JavaScript语言操纵，与HTTP服务器进行连接通信的技术。
2. XMLHttpRequest对象
从IE7+，以及当前流行的Chrome，Firefox，Safri，Opera浏览器，提供用于AJAX操作的对象，均为XMLHttpRequest.
var xmlhttp = XMLHttpRequest();
3. 前端处理流程
流程包括以下几个步骤：
- 创建XMLHttpRequest对象；
- 注册onreadystatechange处理函数（用于异步操作，同步操作不需要注册该函数）
- 如果是get|GET，那么建议在调用open之前，把请求url地址构造好，对传递的name=value，其中name和value必须是encodeURIComponent函数返回后的值。
- 如果是post|POST，那么可以在调用send方法的时候，传递post数据
- 如果是post方法，则需要给发生给HTTP服务器的请求头部增加一个字段：xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
- 然后调用send方法，该方法接受一个参数，有name=value&name=value组成的长字符串，其中name，value都是经过encodeURIComponent()函数处理后端值，get请求的数据不在这里提供，直接在open方法的url内提供，此时传递给send的为null参数值。
调用open(请求方法，请求url地址，是否为异步：true异步)
4. 接收数据
异步的AJAX请求，处理数据的流程，都存在于onreadystatechange处理函数内，首先xhr对象存在有以下几个属性：
- readyState属性：是一个int整数值，存在以下5个值，每当这个值发生变化，都会触发一次onreadystatechange事件，即：调用注册在该事件上的函数。
- 0：只是创建了xhr, 没有调用open，没有调用send
- 1：调用了open，没有调用send
- 2：调用了send，还没有接收到数据
- 3：接收到了数据，数据还不全
- 4：接收到了全部数据，请求处理完成。
- status属性：HTTP响应头部状态码，比如：200响应成功，对应的statusText值为OK，是一个 int 正数值。
- statusText属性：HTTP响应头状态名，
- responseText属性：响应返回的主体部分内容，类型为字符串，格式为Text。
- responseXML属性：响应返回的主体部分内容，类型为字符串，格式为XML，
5. 示例
/* get */
function testGet() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var myElement = document.getElementById('mydiv');
myElement.innerHTML = xmlhttp.responseText;
}
}; var url = "/my/ajax/url" + "?" + encodeURIComponent('name') + "=" + encodeURIComponent("Tim") + "&" + encodeURIComponent('sex') + "=" + encodeURIComponent('male');
xmlhttp.open('get', url, true);
xmlhttp.send(null);
} /* post */
function testPost() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var myElement = document.getElementById('mydiv');
myElement.innerHTML = xmlhttp.responseText;
}
}; xmlhttp.open('post', '/my/ajax/url', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
var dataStr = encodeURIComponent('name') + “=” + encodeURIComponent('Tim') + '&' + encodeURIComponent('sex') + "=" + encodeURIComponent('male');
xmlhttp.send(dataStr);
}