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()