AJAX XHR的用法 HTTP头部信息 get请求Ajax，就是对Asynchronous JavaScript+XM

Ajax，就是对Asynchronous JavaScript+XML的简写。这一技术能够向服务器请求额外的数据而无须卸载页面，会带来更好的用户体验。 ajax技术的核心是XMLHttpRequest对象(简称XHR)，这是由微软首先引入的一个特性，其他浏览器提供商后来都提供了相同的实现。在XHR出现之前，Ajax式的通信必须借助一些hack手段来实现，大多数是使用隐藏的框架或内嵌框架。XHR为向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器取得更多信息，然后再通过DOM将新数据插入到页面中。另外，虽然名字中包含XML的成分，但Ajax通信与数据格式无关；这种技术就是无须刷新页面即可从服务器取得数据，但不一定是XML数据。 IE5是第一款引入XHR对象的浏览器。在IE5中，XHR对象是通过MSXML库中的一个ActiveX对象实现的。因此，在IE中可能会遇到三种不同版本的XHR对象，即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0和MXSML2.XMLHttp.6.0。要使用MSXML库中的XHR对象，需要像第18章讨论创建XML文档时一样，编写一个函数，例如：

} return new ActiveXObject(arguments.callee.activeXString); } 这个函数会尽力根据IE中可用的MSXML库的情况创建XHR对象要像下面这样使用 XMLHttpRequest构造函数。 var xhr = new XMLHttpRequest();

这个函数中新增的代码首先检测原生XHR对象是否存在，如果存在则返回它的新实例。如果原生对象不存在，则检测ActiveX对象。如果这两种对象都不存在，就抛出一个错误。然后，就可以使用下面的代码在所有浏览器中创建XHR对象了。 var xhr = createXHR();

XHR的用法在使用XHR对象时，要调用的的第一个方法是open(),它接收3个参数，要发送的请求的类型("get"、“post”等)、请求的URL和表示是否异步发送请求的布尔值。下面就是调用这个方法的例子。 xhr.open("get"、"example.php",false); 这行代码会启动一个针对example.php的get请求需要说明两点：一是URL相对于执行代码的当前页面(当然也可以使用绝对路径)；二是调用open()方法并不会真正发送请求，而只是启动一个请求以备发送。要发送特定的请求，必须像下面这样调用send()方法； xhr.open("get","example.txt",false); xhr.send(null); 这里的send()方法接收一个参数，即要作为请求主体发送的数据。如果不需要通过请求主体发送数据，则必须传入null，因为这个参数对有些浏览器来说是必须的。调用send()之后，请求就会被分派到服务器。由于这次请求是同步的，JavaScript代码会等到服务器响应之后再继续执行，。在收到响应后，响应的数据会自动填充XHR对象的属性，相关的属性简介如下。

reponseText：作为响应主体被返回的文本。 responseXML：如果响应的内容类型是“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("Request was unsuccessful:"+xhr.status); }

根据返回的状态代码，这个例子可能会显示由服务器返回的内容，也可能会显示一条错误消息。我们建议读者通过检测status来决定下一步的操作，不要依赖statusText，因为后者在跨浏览器使用时不太可靠。另外，无论内容类型是什么，响应主体的内容都会保存到responseText属性中；而对于非XML数据额而言，responseXML属性的值将为null。有的浏览器会错误地报告204状态代码。IE中XHR的ActiveX版本会将204设置为1223，而IE中原生的XHR则会将204规范化为200.Opera会在取得204时报告status的值为0. 此时，可以检测XHR对象的readyState属性，该属性表示请求、响应过程的当前活动阶段。这个属性可取的值如下. 0:未初始化。尚未调用open()方法。 1：启动。已经调用open()方法，但尚未调用send(）方法。 2：发送。已经调用send()方法，但尚未接收到响应。 3：接收。已经接收到部分响应数据。 4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。

只要readyState属性的值由一个值变成另一个值，都会触发一次readystatechange事件。可以利用这个事件来检测每次状态变化readyState 的值。通常，我们只对readyState值为4的阶段感兴趣，因为这时所有数据已经就绪。不过，必须在调用open()之前指定onreadystatechange事件处理程序才能确保跨浏览器兼容性。下面来看一个例子。 var that = createXHR(); that.onreadystatechange = function(){ if(that.readyState == 4){ if((that.status >= 200 && that.status < 300)||that.status == 304){ alert(that.responseText); } else { alert("Request was unsuccessful:" + that.status); } } }; that.open("open","example.txt",true); that.send(null); 以上代码利用DOM 0级方法为XHR对对象添加了时间处理程序，原因是并非所有浏览器都支持DOM 2级方法。与其他事件处理程序不同，这里没有向onreadystatechange事件处理程序中传递event对象；必须通过XHR对象本身来确定下一步该怎么做。这个例子在onreadystatechange事件处理程序中使用了xhr对象，没有使用this对象，原因是onreadystatechange事件处理程序的作用域问题。如果使用this对象，在有的浏览器中对导致函数执行失败，或者导致错误发生。因此，使用实际的XHR对象实例变量是较为可靠的一种方式。另外，在接收到响应之前还可以调用abort()方法来取消异步请求，如下所示： xhr.abort(); 调用这个方法后，XHR对象会停止触发事件，而且也不再允许访问任何与响应有关的对象属性。在终止请求之后，还应该对XHR对象进行解引用操作。由于内存原因，不建议重用XHR对象。

HTTP头部信息每个HTTP请求和响应都会带有响应的头部信息，其中有的对开发人员有用，有的也没有什么用。XHR对象也提供了操作这两种头部(即请求头部和响应头部）信息的方法。默认情况下，在发送XHR请求的同时，还会发送下列头部信息。 Accept：浏览器能够处理的内容类型。 Accept-Charset：浏览器能够处理的字符集。 Accept-Encoding：浏览器能够处理的压缩编码。 Accept-Language：浏览器当前设置的语言。 Connection：浏览器与服务器之间连接的类型。 Cookie：当前页面设置的任何Cookie。 Host：发出请求的页面所在的域。 Referer：发出请求的页面的URL。注意，HTTP规范将这个头部字段拼写错了，而为保证与规范一致，也只能讲错就错了。(这个英文单词的正确拼法应该是 referrer。） User-Agent：浏览器的用户代理字符串。虽然不同浏览器实际发送的头部信息会有所不同，但以上列出的基本上是所有浏览器都会发送的。使用setRequestHeader()方法可以设置自定义的请求头部信息，这个方法接受两个参数：头部字段的名称和头部字段的值。要成功发送请求头部信息，必须在调用open()方法之后且调用send()方法之前调用setRequestHeader(),如下面的例子所示。 var xhr = createXHR(); 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.php",true); xhr.setRequestHeader("MyHeader","MyValue"); xhr.send(null);

服务器在接收到这种自定义的头部信息之后，可以执行响应的后续操作。我们建议读者使用自定义的头部字段名称，不要使用浏览器正常发送的字段名称，否则有可能会影响服务器的响应。允许开发人员重写默认的头部信息，但有的浏览器则不允许这样做。调用XHR对象的getResponseHeader()方法并传入头部字段名称，可以取得响应的响应头部信息。而调用getAllResponseHeaders()方法则可以取得一个包含所有头部信息，但有的浏览器则不允许这样做。调用XHR对象的getResponseHeaders()方法并传入头部字段名称，可以取得响相应的响应头部信息。而调用getAllResponseHeaders()方法则可以取得一个包含所有头部信息的长字符串。来看下面的例子。 var myHeader = xhr.getResponseHeader("MyHeader"); var allHeaders xhr.getAllResonseHeaders(); 在服务器端，也可以利用头部信息向浏览器发送额外的、结构化的数据。在没有自定义信息的情况下，getAllResponse- Headers()方法通常会返回如下所示的多行文本内容： Date：Sun，14 Nov 2004 18:04:03 GMT Server: Apacahe/1.3.29(Unix) Vary: Accept X-Powered-By:PHP/4.3.8 Connection:close Content-type: text/html; charset=iso-8859-1 这种格式化的输出可以方便我们检查响应中所有头部字段的名称，而不必一个一个检查某个字段的存在。 get请求 get是最常见的请求类型，最常用于向服务器查询某些信息。必要时，可以将查询字符串参数追加到URL的末尾，以便将信息发送给服务器。对XHR而言，位于传入open()方法的URL末尾的查询字符串必须经过正确的编码才行。使用get请求经常会发生的一个错误，就是查询字符串的格式有问题。查询字符串中每个参数的名称和值都必须使用encodeURLComponent()进行编码，然后才能放到URL的末尾，而且所有名-值对儿都必须由和号(&)分隔，如下面的例子所示。 xhr.open("get","example.php?name1=value1&name2=value2",true); 下面这个函数可以辅助向现有URL的末尾添加查询字符串参数： function addURLParam(url,name,value){ url += (url.indexof("?") == -1 ? "?" : "&"); url += encodeURLComponent(name) + "=" + encodeURLComponent(value); return url; } indexof的含义：给定一个字符串去匹配另一个字符串的下标，如果匹配到，返回下标，如果匹配不到则返回-1，其实原理还是比较简单的，如果需要你实现，那么应该怎么做呢？这个addURLParam()函数接受三个参数：要添加参数的URL、参数的名称和参数的值。这个函数首先检查URL是否包含问号(以确定是否已经有参数存在)。如果没有，就添加一个问号；否则，就添加一个和号。然后，将参数名称和值进行编码，再添加到URL的末尾。最后返回添加参数之后的URL。下面是使用这个函数来构建请求URL的示例。 var url = ”example.php“; //添加参数 url = addURLParam(url,"name","Nicholas"); url = addURLParam(url,"book","Professinal JavaScript"); //初始化请求 xhr.open("get",url,false); 在这里使用addURLParam()函数可以确保查询字符串的格式良好，并可靠地用于XHR对象