AJAX用法、HTTP头部信息
很久没有来博客，发现这篇博客是访问量最高的
在近期会整理一下这篇博客的重点知识。希望给查找资料的朋友们方便，同时继续开始我的博客记录之旅
目录：
1、XMLHttpRequest 用法
1、XMLHttpRequest 用法
IE5是第一款引入XHR对象的浏览器。在IE5中，XHR对象是通过MSXML库中的一个ActiveX对象实现的。因此，在IE中可能会遇到三种不同版本的XHR对象，即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0和MXSML2.XMLHttp.6.0。 要使用MSXML库中的XHR对象，需要编写一个函数：
//适用于IE7之前的版本
Function createXHR(){
If (typeof arguments.calle.activeXString != “string”) {
var versions = [“MSXML2.XMLHttp.6.0”, “MSXML2.XMLHttp.3.0”, “MSXML2.XMLHttp”],
i, len;
for (i = 0, len = versions.length; i<len; i++) {
try {
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
break;
} catch (ex) {
//跳过
}
}
}
return new ActiveXObject(arguments.callee.activeXString);
}
这个函数会尽力根据IE中可用的MSXML库的情况创建最新版本的XHR对象。
IE7+,firefox,opera,chrome和safari都支持原生的XHR对象，在这些浏览器中创建对象要像下面这样使用XMLHttpRequest构造函数。
var xhr = new XMLHttpRequest();
如只想支持ie7+版本，可以直接用原生XHR实现。
使用XHR对象时，要调用的第一个方法是open()
它接受3个参数：
要发送的请求的类型（”get,post等）
请求的URL
表示是否异步发送请求的布尔值
xhr.open(“get”, ”example.php”, false);
这段代码会启动一个针对example.php的GET请求。
但注意两点:
1.URL相对于执行代码的当前页面（也可以使用绝对路径）
2.调用open()方法并不会真正发送请求，只是启动一个请求以备发送
要发送特定的请求，必须像下面这样调用send()方法：
xhr.open(“get”, “example.txt”, false)
xhr.send(null);
这里的send()方法接收一个参数，即要做为请求主体发送的数据。如果不需要通过请求主体发送数据，则必须传入null,因为这个参数对有些浏览器来说是必须的。
调用send()之后，请求就会被分派到服务器。
由于请求是同步的，javascript代码会等到服务器响应之后再继续执行。在收到响应后，响应的数据会自动填充XHR对象的属性：
responesText: 作为响应主体被返回的文本。
responesXML: 如果响应的内容类型是“text/xml”或”application/xml”，这个属性中将包含着响应数据的XML DOM文档。
status: 响应HTTP状态
statusText: HTTP状态说明。
在收到响应后，第一步检查status属性，以确定响应已经成功返回。
一般可以将HTTP状态码为200作为成功的标志。此时responseText属性的内容已经就绪，而且在内容类型正确的情况下，responseXML也应该能够访问了。
状态代码为304表示请求的资源并没有修改，可以直接使用浏览器中的缓存版本;也意味着响应是有效的。
为确保接收到适应的响应，应该像下面这样检查上述这两种状态代码：
xhr.open(“get”, “example.txt”, false);
xhr.send(null);
if((xhr.status == 200 && xhr.status < 300 ) || xhr.status == 304){
alert(xhr.responseText);
}else{
alert(“Requst was unsuccessful: “ + xhr.status);
}
根据返回的状态代码，显示服务器返回的内容，或是错误提示。
建议通过检测status来决定下一步的操作，不要依赖statusText，因为后者在跨浏览器中使用时不太可靠。
无论内容类型是什么，响应主体的内容都会保存在responseText属性中;而对于非XML数据而言，responseXML属性值为null.
[有的浏览器会错误的报告204状态代码。IE中XHR的ActiveX版本会将204设置为1223，而IE中原生的XHR则会将204规范化为200.opera会在取得204时报告 status 为0]
多数情况下，我们还是要发送异步请求，才能让javascript继续执行而不必等待响应。可以检测XHR对象的readyState属性。该属性表示请求、响应过程的当前活动阶段。
readyState可取的值如下：
0： 未初始化。尚未调用open()方法。
1： 启动。已经调用open()方法，但尚未调用send()方法。
2： 发送。已经调用send()方法，但尚未接收到响应。
3： 接收。已经接收到部分响应数据。
4： 完成。已经接收到全部响应数据，而且已经可以在客户端使用了。
只要readyState属性的值由一个值变成变一个值，都会触发一次readystatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。
通常只对readyState值为4的阶段感兴趣，因为这时所有的数据已经就绪。
不过，必须在调用open()之前指定onreadystatechange事件处理程序才能确保跨浏览器兼容性。
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (xhr.readyState == 4 ){
if( (xhr.status >=200 && xhr.status <300) || xhr.status == 304){
alert(xhr.responseText);
}else {
alert(“Requst was unsuccessful: “ + xhr.status)
}
}
}
xhr.open(“get”, “example.txt”, true);
Xhr.send(null)
在接收到响应之前还可以调用abort()方法来取消异步请求，
xhr.abort();
2、HTTP头部信息
每个HTTP请求和响应都会带有相应的头部信息，其中有的对开发人员有用，有的没什么用。
XHR对象也提供了操作这两种头部（即请求头部和响应头部）信息的方法。
默认情况下，在发送XHR请求的同时，还会发送下列头部信息：
Accept: 浏览器能够处理的内容类型。
Accept-Charset: 浏览器能显示的字符集。
Accept-Encoding: 浏览器能够处理的压缩编码。
Accept-Language: 浏览器当前设置的语言。
Connection: 浏览器与服务器之间连接的类型
Cookie: 当前页面设置的任何Cookie.
Host: 发出请求的页面所在的域。
Referer: 发出请求的页面的URI。 HTTP规范装饰这个头部字段拼写错了，为保证与规范一致，只能将错就错（原拼法：referrer）
User-Agent: 浏览器的用户代理字符串。
虽然不同浏览器实际发送头部信息有所不同，但以上列出的基本上是所有浏览器都会发送的。
使用setRequestHader()方法可以设置自定义的请求头部信息。
这个方法接受两个参数：头部字段的名称和头部字段的值。
要成功发送请求头部信息，必须在调用open()方法之后且调用send()方法之前调用setRequestHeader()：
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (xhr.readyState == 4 ){
if( (xhr.status >=200 && xhr.status <300) || xhr.status == 304){
alert(xhr.responseText);
}else {
alert(“Requst was unsuccessful: “ + xhr.status)
}
}
}
xhr.open(“get”, “example.txt”, true);
xhr.setRequestHeader(“myHeader”,”myvalue”)
Xhr.send(null)
服务器在接收到这种自定义的头部信息后，可以执行相应的后续操作。建议使用自定义的头部字段名称，不要使用浏览器正常发送的字段名称，否则有可能影响服务器的响应。
有的浏览器允许开发人员重写默认的头部，但有的浏览器不允许这样做。
调用XHR对象的getResponseHeader()方法并传入头部字段的名称，可以取得相应的响应头部信息。
调用getAllResponseHeaders()方法则可以取得一个包含所有头部信息长字符串。
var myHeader = xhr.getRequestHeader(“myHeader”);
var allHeader = xhr.getAllRequestHeaders();
在服务器端，也可以利用头部信息向浏览器发送额外的、结构化的数据。
在没有自定义信息的情况下，getAllResponseHeaders()方法通常会返回如下所示的多行文本内容。
Date: Sun, 14 Nov 2004 18:04:03 GMT
Server: Apache/1.3.29(Unix)
Vary: Accept
X-Powered-By: PHP/4.3.8
Connection: close
Content-Type: text/html; charset=iso-8859-1;
格式化的输出可以方便我们检查响应中所有头部字符的名称，而不必一个一个检查某个字段是否存在。
调用这个方法后，XHR对象会停止触发事件，而且也不再允许访问任何与响应有关的对象属性。在终止请求之后，还应对XHR对象进行解引用操作。由于内在原因，不建议重用XHR对象。
3、progress events 及进度事件
Progress Events 规范是W3C的一个工作草案，定义了与客户端服务器通信有关的事件。这些事件最早其实只针对XHR操作，但目前也被其它API借鉴。
有以下6个进度事件。
loadstart: 在接收到响应数据的第一个字节时触发
progress：在接收响应期间持续不断的触发
error: 在请求错误时触发
abort: 在因为调用abort()方法而终止连接时触发
load: 在接收到完整的响应数据时触发
loadend:在通信完成或者触发error,abort ,load事件后触发
每个请求都从触发loadstart事件开始，接下来是一个或多个progress事件，然后触发error,abort,load事件中的一个，最后以触发loadend事件结束。
支持5个事件的浏览器有firefox3.5+ safari 4+ chrome opera ie8+只支持load事件。
本文内容均是整理自《javascript高级设计设计第3版》
