AJAX，通过JavaScript的异步通信，局部更新网页、它的核心是XMLHttpRequest对象

XMLHttpRequest对象

AJAX

Asynchronous JavaScript and XML 的缩写，指的是通过 JavaScript 的异步通信，从服务器获取 XML 文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。

具体来说，AJAX 包括以下几个步骤。

1. 创建 XMLHttpRequest 实例
2. 发出 HTTP 请求
3. 接收服务器传回的数据
4. 更新网页数据

概括起来，就是一句话，AJAX 通过原生的XMLHttpRequest对象发出 HTTP 请求，得到服务器返回的数据后，再进行处理。现在，服务器返回的都是 JSON 格式的数据，XML 格式已经过时了，但是 AJAX 这个名字已经成了一个通用名词，字面含义已经消失了。

XMLHttpRequest对象是 AJAX 的主要接口，用于浏览器与服务器之间的通信。尽管名字里面有XML和Http，它实际上可以使用多种协议（比如file或ftp），发送任何格式的数据（包括字符串和二进制）。

XMLHttpRequest对象

一、使用示例

发送GET请求

xhttp = new XMLHttpRequest();
xhttp.open('GET','ajax_info.txt',true);
xhttp.send()

xhttp.open('GET','demo_get.asp?t='+Math.random(),true)	//通过添加t=随机数，以避免获取缓存的结果
xhttp.send()

xhttp.open('GET','demo_get2.asp?fname=Bill&lname=Gates',true)	//发送消息
xhttp.send()

发送POST请求

xhttp = new XMLHttpRequest();
xhttp.open("POST", "demo_post.asp", true);
xhttp.send();

如需像 HTML 表单那样 POST 数据，请通过 setRequestHeader() 添加一个 HTTP 头部。请在 send() 方法中规定您需要发送的数据：

xhttp = new XMLHttpRequest();
xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Bill&lname=Gates");

添加请求成功回调事件

使用onreadystatechange属性，接收一个函数，用于定义当请求接收到应答时所执行的行为

xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
    if(this.readyState===4 && this.status==200){
        document.getElementById('demo').innerHTML = this.responseText;
    }
};
xhttp.open('GET','ajax_info.txt',true);
xhttp.send();

属性	描述
onreadystatechange	定义了当 readyState 属性发生改变时所调用的函数。
readyState	保存了 XMLHttpRequest 的状态。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 正在处理请求 4: 请求已完成且响应已就绪
status	200: “OK” 403: “Forbidden” 404: “Page not found” 如需完整列表，请访问 Http 消息参考手册
statusText	返回状态文本（例如 “OK” 或 “Not Found”）

二、实例属性

属性	描述
onreadystatechange	定义当 readyState 属性发生变化时被调用的函数
readyState	保存 XMLHttpRequest 的状态。0：请求未初始化1：服务器连接已建立2：请求已收到3：正在处理请求4：请求已完成且响应已就绪
response	服务器返回的数据体（即 HTTP 回应的 body 部分），可能是任何数据类型，比如字符串、对象、二进制对象等等
responseType	可以在调用open()方法之后、调用send()方法之前，设置这个属性的值，告诉服务器返回指定类型的数据。如果responseType设为空字符串，就等同于默认值text
responseText	以字符串返回响应数据
responseXML	以 XML 数据返回响应数据
responseURL	发送数据的服务器的网址
status	返回请求的状态号200: “OK”403: “Forbidden”404: “Not Found”如需完整列表请访问 Http 消息参考手册
statusText	返回状态文本（比如 “OK” 或 “Not Found”）

事件监听属性

事件监听属性
onloadstart	loadstart 事件（HTTP 请求发出）的监听函数
onprogress	progress事件（正在发送和加载数据）的监听函数
onabort	abort 事件（请求中止，比如用户调用了abort()方法）的监听函数
onerror	error 事件（请求失败）的监听函数
onload	load 事件（请求成功完成）的监听函数
ontimeout	timeout 事件（用户指定的时限超过了，请求还未完成）的监听函数
onloadend	loadend 事件（请求完成，不管成功或失败）的监听函数

三、实例方法

方法	描述
new XMLHttpRequest()	创建新的 XMLHttpRequest 对象
abort()	取消当前请求
getAllResponseHeaders()	服务器发来的所有 HTTP 头信息，格式为字符串
getResponseHeader()	返回 HTTP 头信息指定字段的值，如果有多个字段同名，它们的值会被连接为一个字符串，每个字段之间使用“逗号+空格”分隔
open(method, url, async, user, psw)	规定请求 method：请求类型 GET 或 POST url：文件位置，可以是任何类型的文件，包括脚本文件 async：true（异步）或 false（同步） user：可选的用户名称 psw：可选的密码
send()	将请求发送到服务器，用于 GET 请求
send(string)	将请求发送到服务器，用于 POST 请求
setRequestHeader()	向要发送的报头添加标签/值对