Ajax(Asynchronous JavaScript and XML ，异步通信 Javascript 和 XML) 是利用 JavaScript 脚本和 XML 数据实现客户端和服务端进行异步通信的一种方法。
HTTP(HyperText Transfer Protocol ，超文本传输协议)是一种应用层协议，负责超文本传输。如文本、图像、多媒体等。 HTTP 由两部分组成：请求（ Request ）和响应（ Response ）。
HTTP 由三部分组成：请求头、消息报头、请求正文。
<request-line>
<headers>
<blank line> [<request-body>] ></request-body></blank></headers
></request-line
>
请求头以一个方法符号开头，以空格隔开。后面跟着请求的 URL 和协议的版本号。
method Request-URI HTTP-Version CRLF
各部分说明如下：
请求行后是消息报头部分，用来说明服务器需要调用的附加信息。 在消息报头后是一个空行，然后才是请求正文部分，即主体部分（ body ），该部分可以添加任意的其它数据。
GET / HTTP / 1.1 HOST: www.baidu.com <User - Agent: Mozilla / 5.0(Window; U; Window NT 5.1; zh - CN; rv: 1.9 .0
.8) Gecko / 2021040629 Chrome /91.0.4464.4
Connection:keep-Alive
如果在 GET 请求中附带参数，则必须将这些附带信息加在 URL 后，这个信息别称为查询字符串（ Query String ），发送时被附加在请求行中。
GET /bbs/?user=css8%20 HTTP / 1.1 HOST: lmssee.cn <User - Agent: Mozilla / 5.0(Window; U; Window NT 5.1; zh - CN; rv: 1.9 .0
.8) Gecko / 2021040629 Chrome /91.0.4464.4
Connection:keep-Alive
在 POST 请求中，被要求服务器就收附在请求后面数据，常用于提交表单
POST /form.asp HTTP/(CRLE) HOST:www.lmssee.cn(CRLE) < User-Agent:Mozilla/5.0
(Window;U;Windows NT 5.1;zh-CN;rv:1.9.0.8) Gecko/2021040612 Chrome/91.0.4464.4
Content-Type:application/x-www-from/urlencoded Content-Length:22(CRLE)
Connection:Keep-Alive(CRLE) CAche-Control:no-cache(CRLE) <(CRLE)
// 改 CRLE 行表示消息报头已经结束，在此之前为消息报头
user=css8&pwd=111111 // 此行为提交的数据
POST 请求与 GET 请求之间略有区别。首先，请求行开始处的 GET 变为 POST ，在后面有两个新其中 Content-Type 说明了请求主体的内容是如何编码的。浏览器始终以 application/x-www-from-urlencoded 的编码格式来传送数据，这是针对简单 URL 编码的 MIME 类型。
Content-Length 说明了请求主体的字节数。在 Connection 后是一个空行，再后面就是请求主体。大多数浏览器的 POST 请求一样，都以"名称/值"对的形式表示的。 POST 方法与 GET 方法的数据传形式几乎是一样的。
HTTP 响应也是三部分组成：状态行、消息报头、响应正文。
<status-line>
<headers>
<blank line> [<response-body>] </response-body></blank></headers
></status-line
>
状态行内容如下：
HTTP-Version Status-Code Reason-Phrase CRLE
状态代码有3位数字组成，第一个数字定义了响应的类别，且有如下5种可能的取值。
200 oK // 客户端请求成功<400 Bad Request // 客户端请求有语法错误，不能被服务器所理解<401 Unauthorized // 请求未经授权，这个状态代码必须和 wwW-Authenticate 报头域一起使用 <403 Forbidden // 服务器收到请求，但是拒绝提供服务<404 Not Found// 请求资源不存在，例如，输入了错误的 UR 工<500 Internal Server Error // 服务器发生不可预期的错误 <503 Server Unavailable // 服务器当前不能处理客户端的请求，一段时间后，可能恢复正常
在状态行之后是消息头。 一般服务器会返回一个名为 Data 的信息， 用来说明响应生成的日期和时间。 接下来就是与 POST 请求中一样的 Content - Type 和 Content - Length 。 响应主体所包含的就是所请求资源的 HTML 源文件。
HTTP/1.1 200 OK Date: Wed,08 Apr 2021 12:55:50 GMT Content-Type:
text/html;charset=gb2312 Content-Length: 1700
<html>
<head>
<title>百度一下，你就知道</title>
</head>
<body>
<!-- body -->
</body>
</html>
GET 和 POST 都是以名值对字符串的形式发送数据。
与 JavaScript 对象结构类似，多在 GET 请求中使用。
与 JavaScript 数组结构类似，多在一系列文本框中提交表单信息时使用，它与上一种方式不同，说提交的数据按顺序排列，不可以随意组合。
function toString(data) {
var a = [];
if (data.constructor == Array) {
for (var i = 0; i < data.length; i++) {
a.push(data[i].name + '=' + encodeURIComponent(data[i].value));
}
} else {
for (var i in data) {
a.push(i + '=' + encodeURIComponent(data[i]));
}
}
return a.join('&');
}
XMLHttpRequest 对象通过 readyState 属性实时跟踪异步状态。一旦当该属性发生变化，皆会触发 readystatechange 事件，调用该事件绑定的回调函数。
| 返回值 | 嗯 |
|---|---|
| 0 | 未初始化。表明对象已经建立，但是未初始化，尚未调用 open() 方法 |
| 1 | 初始化。表明对象已经建立，尚未调用 send() 方法 |
| 2 | 发送数据。表示 send() 方法已经调用，但是当前的状态以及 HTTP 头未知 |
| 3 | 数据传送中。已经结束部分数据，因为响应及 HTTP 不全，这时通过 responseBody 和 responseText 获取部分数据会出现错误 |
| 4 | 完毕。数据加载完毕，此时可以通过 responseBody 和 responseText 获取完整的响应数据 |
如果 readyState 属性值是 4 ，这说明相应完毕，那么可以安全的读取数据。另外，还需要监控 HTTP 状态码，只有当 HTTP 状态码为 200 时，才表示 HTTP 响应顺利完成。
在 XMLHttpRequest 中使用 states 属性获取当前的 HTTP 状态码。如果是 readyState 属性值为 4，且 state （状态码）属性值为 200，那么说明 HTTP 请求过程顺利完成。
// 定义 XMLHttpRequest 对象// 参数：无
// 返回值： XMLHttpRequest 对象实例
function createXMLHTTPObject() {
var XMLHttpFactories = [
// 兼容不同浏览器和版本的创建函数数组
function () {
return new XMLHttpRequest();
},
function () {
return new ActiveXObject('Msxml2.XMLHTTP');
},
function () {
return new ActiveXObject('Msxml3.XMLHTTP');
},
function () {
return new ActiveXObject('Microsoft.XMLHTTP');
},
];
var xmlhttp = false;
for (var i = 0; i < XMLHttpFactories.length; i++) {
// 尝试调用匿名函数，如果成功则返回 XMLHttpRequest 对象，否则继续调用下一个
try {
xmlhttp = XMLHttpFactories[i]();
} catch (e) {
continue;
// 如果发生异常，则继续下一个函数调用
}
break; // 如果成功，则中止循环
}
return xmlhttp; // 返回对象实例
}
var xmlHttp = createXMLHTTPObject();
function request(url) {
xmlHttp.open('GET', url, false);
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.send(null);
}
function handleStateChange() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200 || xmlHttp.status == 0) {
alert(xmlHttp.responseText);
}
}
}
使用 abort() 方法可以终止正在进行的异步请求。在使用 abort() 方法前，应先清除 onreadystatechange 事件处理函数，因为 IE 和 Mozilla 在请求中止后也会激活这个处理函数，如果给 onreadystatechange 属性设置为 null ，则 IE 会发生异常，所以可以设置一个空函数。
xmlhttp.onreadystatechange = function () {};
xmlhttp.abort();