一、Ajax (Asynchronous JavaScript + XML) 能够像服务器请求额外的数据而无需卸载页面，即局部刷新技术
二、创建一个XHR对象
function createXHR () { if (typeof XMLHttpRequest != "undefined") { return new XMLHttpRequest(); } else if (typeof ActiveXObject != "undefined") { // < Ie7 if (typeof arguments.callee.activeXString != "string") { var version = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"], i, len; for ( i = 0, len = version.length; i < len; i++) { try { new ActiveXObject(version[i]); arguments.callee.activeXString = version[i]; break; } catch (ex) {} } } return new ActiveXObject(arguments.callee.activeXString); } else { throw new Error("No Support For XHR"); } } var xhr = createXHR(); alert(xhr); // [object XMLHttpRequest]
三、用法 注意：本节的实例都应用于服务器端
1.调用open()方法。它接受3 个参数：要发送的请求的类型（"get"、"post"等）、请求的URL 和表示是否异步发送请求的布尔值。
2.要发送请求，调用send（）方法，接受一个参数，即要作为请求发送的主体。如果不需要，则为null
3.返回的数据会自动填充到XHR对象的属性中。
var xhr = createXHR(); // GET方式同步打开example.txt文件 // 同步：javascript代码会等待服务器响应后执行 xhr.open("get", "example.txt", false); xhr.send(null); // status代表响应的http状态 // 200代表ok，304表示缓存 if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ alert(xhr.responseText); // 返回响应的文本，123456 } else { alert("Request was unsuccessful: " + xhr.status); }
4.example.text文件内容为字符串： 123456
四、前面的使用的同步的方式，当然不会存在问题，所有我们要挑战一个异步的方法。
var xhr = createXHR();
// xhr.readyState表示请求/响应的当前状态，4代表已经接受了全部的响应数据
// 另外只要xhr.readyState的值发生了改变，那么xhr.onreadystatechange事件就会触发
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
}
};
xhr.open("get", "example.txt", true);
xhr.send(null);
五、每个HTTP 请求和响应都会带有相应的头部信息
1.默认情况下，在发送XHR 请求的同时，还会发送下列头部信息。
①Accept：浏览器能够处理的内容类型。
②Accept-Charset：浏览器能够显示的字符集。
③Accept-Encoding：浏览器能够处理的压缩编码。
④Accept-Language：浏览器当前设置的语言。
⑤Connection：浏览器与服务器之间连接的类型。
⑥Cookie：当前页面设置的任何Cookie。
⑦Host：发出请求的页面所在的域。
⑧Referer：发出请求的页面的URI。
⑨User-Agent：浏览器的用户代理字符串。
2.使用setRequestHeader()方法可以设置自定义的请求头部信息。接受两个参数：头部字段的名称和头部字段的值
var xhr = createXHR(); // xhr.readyState表示请求/响应的当前状态，4代表已经接受了全部的响应数据 // 另外只要xhr.readyState的值发生了改变，那么xhr.onreadystatechange事件就会触发 xhr.onreadystatechange = function(){ if (xhr.readyState == 4){ if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ alert(xhr.responseText); } else { alert("Request was unsuccessful: " + xhr.status); } } }; xhr.open("get", "example.txt", true); // 必须在open()之后调用 xhr.setRequestHeader("name", "zhang"); // 在example.txt的http中可以看到接受的 "name" : "zhang" xhr.send(null);
3.获取请求的头部信息和相应信息，调用getResponseHeader()方法getAllResponseHeaders()方法
var xhr = createXHR(); // xhr.readyState表示请求/响应的当前状态，4代表已经接受了全部的响应数据 // 另外只要xhr.readyState的值发生了改变，那么xhr.onreadystatechange事件就会触发 xhr.onreadystatechange = function(){ if (xhr.readyState == 4){ if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ // 获取响应头的Content-Type var connection = xhr.getResponseHeader("Content-Type"); // alert(connection); // text/plain // 获取所有的响应信息 var all = xhr.getAllResponseHeaders(); alert(all); } else { alert("Request was unsuccessful: " + xhr.status); } } }; xhr.open("get", "example.txt", true); xhr.send(null);
六、GET请求，前面我们已经讨论了GET请求的方法，现在我们来扩展一下，为GET请求添加一些参数