Ajax 基础知识

2005年，Jesse James Garrett 发表了一篇在线文章，题为” Ajax：A new Approach to Web Applications “。他在这篇文章里介绍了一种技术，用他的话说，就叫 Ajax，是对 Asynchronous JavaScript + XML 的简写。这一技术能够向服务器请求额外的数据而无须重载（刷新）页面，会带来更好的用户体验。

XMLHttpRequest 对象

Ajax 技术的核心是 XMLHttpRequest 对象，这是由微软首先引入的一个特性，其他浏览器提供商后来都提供了相同的实现。

responseText：作为响应主体被返回的文本。
responseXML：如果响应的内容类型是”text/xml“或”application/xml“，这个属性中保存包含着响应数据的 XML DOM 文档。
status：响应的 HTTP 状态。
statusText：HTTP 状态的说明。

var request = new XMLHttpRequest();
request.onload = function(){
  console.log(this.responseText);
}
request.open("GET","/xxx");
request.send();

这就是一个简单的 Ajax。

readyState 属性

属性值如下：

0：未初始化。尚未调用 open() 方法。
1：启动。已经调用 open() 方法，但尚未调用 send() 方法。
2：发送。已经调用 send() 方法，但尚未接收到响应。
3：接收。已经接收到部分响应数据。
4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。

只要 readyState 属性的值由一个值变成另一个值，都会触发一次 readystatechange 事件。

var request = new XMLHttpRequest();
request.onreadystatechange = function(){
  console.log(this.readyState); // 1 2 3 4
};
request.open('GET','/xxx');
request.send()

HTTP 头部信息

Accept：浏览器能够处理的内容类型。
Accept-Charset：浏览器能够显示的字符集。
Accept-Encoding：浏览器能够处理的压缩编码。
Accept-Language：浏览器当前设置的语言。
Connection：浏览器与服务器之间连接的类型。
Cookie：当前页面设置的任何 Cookie。
Host：发出请求的页面所在的域。
Referer：发出请求的页面的 URI。
User-Agent：浏览器的用户代理字符串。

使用 setRequestHeader() 方法可以设置自定义请求头部信息。这个方法接受两个参数：头部字段的名称和头部字段的值。要成功发送请求头部信息，必须在调用 open() 方法之后且调用 send() 方法之前调用 setRequestHeader() 。

var request = new XMLHttpRequest();
request.onload = function(){
  console.log(this.responseText)
};
request.open('GET','/xxx');
request.setRequestHeader('MyHeader','MyValue');
request.send()

img

其他详细的AJAX知识地址