XRH的用法

Ajax的核心技术是XMLHttpRequest对象，简称（XHR）

  1. var xhr = new XMLHttpRequest()

使用XHR对象第一个方法是open(), 它包含三个参数： 要发送的请求类型、请求的url、是否异步发送请求的布尔值

  1. open('get', 'example.php', true)

需要说明两点：一是 URL相对于执行代码的当前页面（当然也可以使用绝对路径）；二是调用 open()方法并不会真正发送请求，而只是启动一个请求以备发送。
要发送特定的请求，必须像下面这样调用 send()方法：

  1. xhr.open("get", "example.txt", false); 
  2. xhr.send(null);

这里的 send()方法接收一个参数，即要作为请求主体发送的数据。如果不需要通过请求主体发送
数据，则必须传入 null，因为这个参数对有些浏览器来说是必需的。调用 send()之后，请求就会被分
派到服务器。

然后，请求响应的数据会自动填充 XHR 对象的属性，相关的属性简介如下。

  • responseText：作为响应主体被返回的文本。
  • responseXML：如果响应的内容类型是”text/xml”或”application/xml”，这个属性中将保

存包含着响应数据的 XML DOM 文档。

  • status：响应的 HTTP 状态。
  • statusText：HTTP 状态的说明。

HTTP头部信息

默认情况下，在发送 XHR 请求的同时，还会发送下列头部信息。

  • Accept：浏览器能够处理的内容类型。
  • Accept-Charset：浏览器能够显示的字符集。
  • Accept-Encoding：浏览器能够处理的压缩编码。
  • Accept-Language：浏览器当前设置的语言。
  • Connection：浏览器与服务器之间连接的类型。
  • Cookie：当前页面设置的任何 Cookie。
  • Host：发出请求的页面所在的域 。
  • Referer：发出请求的页面的 URI。注意，HTTP 规范将这个头部字段拼写错了，而为保证与规

范一致，也只能将错就错了。（这个英文单词的正确拼法应该是 referrer。）

  • User-Agent：浏览器的用户代理字符串。

注： GET\POST就省略了

补充：

HTTP状态码：

  1. 1xx    Informational（信息状态码）        接受请求正在处理
  2. 2xx    Success（成功状态码）            请求正常处理完毕
  3. 3xx    Redirection（重定向状态码）         需要附加操作已完成请求
  4. 4xx    Client Error（客户端错误状态码）  服务器无法处理请求
  5. 5xx    Server Error（服务器错误状态码）    服务器处理请求出错

超时设定

IE8 为 XHR 对象添加了一个 timeout 属性，表示请求在等待响应多少毫秒之后就终止。在给
timeout 设置一个数值后，如果在规定的时间内浏览器还没有接收到响应，那么就会触发 timeout 事
件，进而会调用 ontimeout 事件处理程序。这项功能后来也被收入了 XMLHttpRequest 2 级规范中。来
看下面的例子。

  1. var xhr = createXHR();
  2. xhr.onreadystatechange = function(){
  3.   if (xhr.readyState == 4){
  4.     try {
  5.       if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
  6.         alert(xhr.responseText);
  7.       } else {
  8.         alert("Request was unsuccessful: " + xhr.status);
  9.       }
  10.     } catch (ex){
  11.       //执行ontimeout
  12.     };
  13. xhr.open("get", "timeout.php", true);
  14. xhr.timeout = 1000; //将超时设置为 1 秒钟（仅适用于 IE8+）
  15. xhr.ontimeout = function(){
  16.  alert("Request did not return in a second.");
  17. };
  18. xhr.send(null);

这个例子示范了如何使用 timeout 属性。将这个属性设置为 1000 毫秒，意味着如果请求在 1 秒钟
内还没有返回，就会自动终止。请求终止时，会调用 ontimeout 事件处理程序。但此时 readyState
可能已经改变为 4 了，这意味着会调用 onreadystatechange 事件处理程序。可是，如果在超时终止
请求之后再访问 status 属性，就会导致错误。为避免浏览器报告错误，可以将检查 status 属性的语句封装在一个 try-catch 语句当中。