Ajax(02)

[cy0707]

前言

一直都Ajax都比较模糊。就了解一些简单的。但是又觉得好复杂，一点都不想知道，所以想到了一个方法，边看书，边把每一个字都打出来。这样就会强迫自己学下来。这个方法还是很管用的。发现ajax还是不是那么不可理解。慢慢有点理解了。

XMLHttpRequest2级

FormData

FormData类型为序列化表单以及创建表单格式相同的数据（用于通过XHR传输）提供了便利。

看一个例子

var data = new FormData();
data.append('name', 'nico');

append方法，接受两个参数，键和值。分别对应表单字段的名字和字段中包含的值。可以添加任意多个键值对。而通过向FormData构造函数中传入表单元素，也可以用表单元素的数据预先向其中填入键值对。

var data = new FormData(document.form[0]);

创建了FormData的实例后，可以将它直接传给XHR的send方法。例如

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
     if(xhr.readyState == 4 ){
           if ((xhr.status >= 200 && xhr< 300) || xhr.status == 304) {
                 console.log(xhr.responseText);
            }else{ 
                  console.log("Request was unsuccessful: " + xhr.status);
            }
     }
};

xhr.open('post', 'example.php', true);
var form = document.getElementById('user-info');
xhr.send(new FormData(form));

使用FormData的方便在于，不必明确的在XHR对象上设置请求头部。XHR对象能够识别传入的数据类型是FormData的实例。

超时设定

XHR对象添加了一个timeout的属性，表示请求在等待响应多少毫秒之后就终止。在给timeout设置一个数组后，如果在规定的时间内浏览器还没有接收到响应，那么就会触发timeout事件，进而会调用ontimeout事件处理程序。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
     if(xhr.readyState == 4 ){
       try {
           if ((xhr.status >= 200 && xhr< 300) || xhr.status == 304) {
                 console.log(xhr.responseText);
            }else{ 
                  console.log("Request was unsuccessful: " + xhr.status);
            }
          } catch(ex) {
                  //由ontimeout事件处理程序处理
          }
     }
};

xhr.open('get', 'timeout.php', true);
xhr.timeout = 1000;
//将超时设置为1秒，仅适用IE8+
xhr.ontimeout = function() {
    console.log('request did not return in a second');
xhr.send(null);
}

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

overrideMimeType()方法

该方法用于重写XHR响应的MIME类型。例如，服务器返回的MIME类型是text/plain,但数据中实际包含的是XML。根据MIME类型，即使数据是XML，responseXML属性中仍然是null,通过调用该方法，可以保证把响应当做XML而非纯文本来处理。

   var xhr = new XMLHttpRequest();
  xhr.open('get', 'text.php', true);
  xhr.overrideMimeType('text/xml');
  xhr.send(null);

在这里，强迫把XHR对象将响应当做XML而非纯文本来处理。调用overrideMimeType()必须在send()方法之前。才能保证重写响应的MIME类型。

进度事件

Progress Events规范是W3C的一个工作草案，定义了与客户端服务器通信有关的事件。这些事件最早其实只针对XHR操作，但目前也被其他API借鉴。有以下6个事件。

• loadstart: 在接收到响应数据的第一个字节时触发
• progress: 在接受响应期间持续不断地触发
• error: 请求发生错误时触发
• abort: 在因为调用abort()方法而终止连接时触发。
• load: 在接收到完整的响应数据而出触发
• loaded: 在通信完成或者触发error,abort或load事件后触发

每一个请求都是从loadstart事件开始，接下来是一个或者多个progress事件，然后触发error,abort,或者load事件中的一个，最后触发loaded事件结束。

load事件

load事件，用于代替onreadystatechange事件。响应接受完毕后触发load事件，因此没有必要去检查readyState属性。而onload事件处理程序会接受到一个event对象，其target属性就指向XHR对象实例。
因此可以访问XHR对象的所有方法和属性。但是并非所有浏览器都为这个事件实现了适当的事件对象。
所有开发人员不得不像下面这样被迫使用XHR对象变量。

var xhr = new XMLHttpRequest();
xhr.onload = function() {
   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.send(null);

只有浏览器接受到服务器的响应，不管其状态如何，都会触发load事件。而这意味着必须要检查status属性，才能确定数据是否真的已经可用。

progress事件

这个事件会在浏览器接收新数据期间周期性地触发。而onprogress事件处理程序会接受到一个event对象，其target属性是XHR对象，但包含着三个额外的属性：lengthComputable、position和totalSize.其中，lengthComputable是一个表示进度是否可用的布尔值，position表示已经接收的字节数，totalSize表示根据Content-Length响应头部确定的预期字节数。

这样就可以给用户创建一个进度指示器。

var xhr = new XMLHttpRequest();
xhr.onload = function() {
   if((xhr,status >= 200 && xhr.status < 300) || xhr.status == 304){
        alert(xhr.responseText);
   }else{
      alert("Request was unsuccessful: "+ xhr.status);
   }
};
xhr.onprogress = function(event) {
   var divStatus = document.getElementById('status');
   if (event.lengthComputable){
       divStatus.innerHTML = 'Received' + event.position + ' of ' + event.totalSize + 'bytes';
   }
};
xhr.open('get', 'example.php', true);
xhr.send(null);

为了确保正常执行，必须在调用open()方法之前添加onprogress事件处理程序。

跨源资源共享（Cross-Origin Resource Sharing）

定义了在必须访问跨源资源时，浏览器与服务器之间该如何沟通。CORS基本的思想是：就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或者响应是该成功还是失败。

例如，一个简单的使用GET或者POST发送的请求，它没有自定义的请求头部，而主体内容是text/plain，在发送该请求时，需要给它附加一个额外的Origin头部，其中包含请求页面的源信息（协议，域名，端口）以便服务器根据这个头部信息来决定是否给予响应

Origin: http://www.xxx.net Origin头部的一个示例

如果服务器认为这个请求可以接受，就在Access-Control-Allow-Origin头部中回发相同的源信息（如果是公共资源，可以回发‘*’）

Access-Control-Allow-Origin: http://www.xxx.net

如果没有这个头部，或者这个头部信息不匹配，浏览器就会驳回请求。注意，请求和响应都不包含cookie信息。

IE对CORS的实现

在IE8中引入了XDR(XDomainRequest)类型，这个对象与XHR类似，但是能实现安全可靠的跨域通信。
它与XHR的区别在于：

• cookie不会随着请求发送，也不会随响应返回
• 只能设置请求头部信息的content-Type字段
• 不能访问响应的头部信息
• 只支持GET和POST请求

被请求的资源可以根据它认为合适的任意数据（用户代理，源页面）来决定是否设置Access-Control-Allow-Origin头部，作为请求的一部分，Origin头部的值表示请求的来源域，以便远程资源明确地识别XDR请求。

XDR对象的使用方法：

• 先创建一个XDomainRequest的实例。
• 调用open方法，该方法只接受两个参数，请求的类型和URL
• 所有的XDR请求都是异步执行，不能用它来创建同步请求。请求返回之后，会触发load事件，响应的数据也会保存在responseText属性中。

var xdr = new XDomainRequest();
xdr.onload = function() {
     alert(xdr.responseText);
};
xdr.open('get', 'http://www.xx.net/page/');
xdr.send(null);

• 在接受到响应后，你只能访问响应的原始文本。
• 没有办法确定响应的状态代码。
• 只要响应有效就会触发load事件，如果失败（包括响应中缺少Access-Control-Allow-Origin）就会触发error事件。

除了错误本身之外，没有其他可用的信息可用，因此唯一能够确定的就只要请求为成功。由于导致XDR请求失败的因素很多，因此可以通过onerror事件处理程序来捕获该事件，否则，即使请求失败也不会有任何提示。

var xdr = new XDomainRequest();
xdr.onload = function() {
     alert(xdr.responseText);
};
xdr.onerror = function() {
   alert("an error occurred.");
}
xdr.open('get', 'http://www.xx.net/page/');
xdr.send(null);

在请求返回之前可以调用abort()方法来终止请求

xdr.abort();

与XHR一样，XDR对象也支持timeout属性以及ontimeout事件处理程序。

var xdr = new XDomainRequest();
xdr.onload = function() {
     alert(xdr.responseText);
};
xdr.onerror = function() {
   alert("an error occurred.");
}
xdr.timeout = 1000;
xdr.ontimeout = function() {
   alert("request took too long");
}
xdr.open('get', 'http://www.xx.net/page/');
xdr.send(null);

为了支持POST请求，XDR对象提供了contentType属性，用来表示发送数据的格式。

var xdr = new XDomainRequest();
xdr.onload = function() {
     alert(xdr.responseText);
};
xdr.onerror = function() {
   alert("an error occurred.");
}
xdr.open('get', 'http://www.xx.net/page/');
xdr.contentType = "application/x-www-form-urlencoded";
xdr.send(null);

其他浏览器对CORS的实现

通过XMLHttpRequest对象实现了对CORS的原生支持。在尝试打开不同来源的资源时，无需额外编写代码，就可以触发这个行为。要请求位于另一个域中的资源，使用标准的XHR对象并在open()方法中传入绝对URL即可。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
     if(xhr.readyState == 4 ){
           if ((xhr.status >= 200 && xhr< 300) || xhr.status == 304) {
                 console.log(xhr.responseText);
            }else{ 
                  console.log("Request was unsuccessful: " + xhr.status);
            }
     }
};

xhr.open('get', 'http://www.xx.net/page', true);
xhr.send(null);

与IE中XDR对象不同的是，通过跨域XHR对象可以访问status和statusText属性，而且还支持同步请求，跨域XHR对象也有一些限制。

• 不能使用setRequestHeader()设置自定义头部
• 不能发送和接受cookie
• 调用getAllResponseHeaders()方法总是返回空的字符串

由于无论同源请求还是跨源请求都支持相同的接口，因此本地资源，最好使用相对URL，在访问远程资源再使用绝对URL，这样能消除歧义，避免出现访问限制头部或者本地cookie信息等问题。

Preflighted Requests

CORS通过一种叫Preflighted Requests的透明服务器验证机制支持开发人员使用自定义的头部、GET或POST之外的方法，以及不同类型的主体内容。在使用下列高级选项来发送请求时，就会向服务器发送一个Preflight请求，这种请求使用OPTIONS方法。发送下列头部。

• Origin: 与简单的请求相同
• Access-Control-Request-Method: 请求自身使用的方法
• Access-Control-Request-Headers: (可选)自定义的头部信息，多个头部信息以逗号隔开。

例如：一个带有自定义头部NCZ的使用的POST方法发送的请求

Origin: http://www.nczonline.net Access-Control-Request-Method: POST Access-Control-Request-Headers:NCZ

发送这个请求后，服务器可以决定是否允许这种类型的请求。服务器通过在响应中发送如下头部与浏览器进行沟通。

• Access-Control-Request-Origin: 与简单的请求相同
• Access-Control-Request-Method: 允许的方法，多个方法以逗号分隔
• Access-Control-Request-Headers: 允许的头部信息，多个头部信息以逗号隔开。
• Access-Control-Max-Age: 应该将这个PreFlight请求缓存多长时间（以秒表示）

例如：

Access-Control-Request-Origin: http://www.nczonline.net Access-Control-Request-Method: POST, GET Access-Control-Request-Headers: NCZ Access-Control-Max-Age1728000

Preflight 请求结束后，结果将按照响应中指定的时间缓存起来，而为此付出的代价只是第一次发送这种请求时会多一次HTTP请求。IE10及更早的版本都不支持。

带凭据的请求

默认情况下，跨源请求不提供凭据（cookie, HTTP认证及客户端SSL证明等）。通过将withCredentials属性设置为true。可以指定某个请求应该发送的凭据。如果服务器接受带凭据的请求，会用下面的HTTP头部来响应。

Access-Control-Allow-Credentials: true

如果发送的是带凭据的请求，但是服务器的响应中没有包含这个头部，那么浏览器就不会把响应交给javascript（于是，responseText中将是空字符串，status状态为0，而且会调用onerror()事件处理程序），另外，服务器还可以在Preflight响应中发送这个HTTP头部。表示允许源发送带凭据的请求。

跨浏览器的CORS

检测XHR是否支持CORS的最简单方式，就是检查是否存在withCredentials属性，再结合检测XDomainRequest对象是否存在。就可以兼顾所有浏览器了。

function createCORSRequest(method, url) {
   var xhr = new XMLHttpRequest();
   if('withCredentials' in xhr) {
    // 此时即支持CORS的情况  
    // 检查XMLHttpRequest对象是否有“withCredentials”属性  
    // “withCredentials”仅存在于XMLHTTPRequest2对象里  
        xhr.open(method, url, true);
    }else if (typeof XDomainRequest != 'undefined'){
 // 否则检查是否支持XDomainRequest，IE8和IE9支持  
    // XDomainRequest仅存在于IE中，是IE用于支持CORS请求的方式  
       xhr = new XDomainRequest();
       xhr.open(method, url);
    }else {
   // 否则，浏览器不支持CORS  
       xhr = null;
    }
    return xhr;
}

var request = createCORSRequest('get', 'http://www.xxx.net');
if(request ) {
   request.onload = function() {
       //对request.responseText进行处理
   }
  request.send();
}esle {
   throw new Error('CORS not supported');  
}

Firefox、Safari、Chrome中的XMLHttpRequest对象与IE中的XDomainRequest对象类似，都提供够用的接口，因此以上模式还是相当有用的。这两个对象共同的属性和方法如下：

• abort(): 用于停止正在进行的请求。
• onerror: 用于替代onreadystatechange检测错误
• onload: 用于替代onreadystatechange检测成功
• responseText: 用于取得响应内容
• send() 用于发送请求