Ajax

Ajax - Asynchronous JavaScript and XML

示例：　　

　　// 发起 AJAX 请求

　　function getCardByAjax() {
　　　　var httpRequest = new XMLHttpRequest();
　　　　httpRequest.oonreadystatechange = handleResponse;
　　　　httpRequest.open("GET", "http://www.xxx.com/Card.html");
　　　　httpRequest.send();
　　}

　　// 处理 AJAX 的响应
　　function handleResponse(e) {
　　　　if(e.target.readystate == XMLHttpRequest.DONE && e.target.status == 200){
　　　　　　var text = e.target.responseText;
　　　　　　// ... process
　　　　}
　　}

XMLHttpRequest readyState 属性的值

UNSENT	0	已创建 XMLHttpRequest 对象
OPEND	1	已调用 open 方法
HEADERS_RECEIVED	2	已收到服务器响应的标头
LOADING	3	已收到服务器响应
DONE	4	响应完成或者失败

 

 

 

 

 

　　DONE 并不代表请求成功，它只表示请求已完成。需要通过  status 属性获取 HTTP 的响应状态码进一步判断。

AJAX 事件　　　　

abort	在请求被中止时触发	ProgressEvent
error	在请求失败时触发	ProgressEvent
load	在请求成功完成时触发	ProgressEvent
loadend	在请求已完成时触发，无论成功还是发生错误	ProgressEvent
loadstart	在请求开始时触发	ProgressEvent
progress	多次触发，以提示请求的进度	ProgressEvent
readstatechange	多次触发，在请求生命周期的不同阶段触发	Event
timeout	如果请求超时则触发	ProgressEvent

 

 

 

 

 

 

 

 

　　以上事件并不是所有浏览器都支持，除了 readstatechange 之外，其他事件都是 XMLHttpRequest 规范的第二版本定义的。

 处理错误

　　第一类错误，从 XMLHttpRequest 对象的角度看到的问题，某些因素阻止了请求发送到服务器，

　　　　例如：主机名不能被 DNS 解析，导致浏览器无法生成服务器连接，会产生 onerror 事件；

　　　　　　   URL 和 生成请求的脚本具有不同来源，默认是不允许跨域访问的，会产生 onerror 事件；　　　　　　　

　　　　　　　连接请求被拒绝，URL 无效（格式不正确）等 。

　　第二类错误，从应用程序的角度看到的问题，而非 XMLHttpRequest 对象。它们发生于请求已成功发送到

　　　　服务器，服务器也接收了请求，并进行了响应。但该响应并不指向你期望的内容时。

　　　　例如：你请求 URL 资源在服务器上不存在，会产生 onerror 事件。

覆盖AJAX 的请求标头

　　通常使用 AJAX 时，使用 GET 或者 POST 方法就够了，但有时候你使用其他方法，怎么办？

　　由于大部分浏览器只支持 GET、POST 方法，那么，就需要先用 GET、POST 方法建立连接，然后使用 "X-HTTP-Method-Override" 覆盖，再发送一次请求。

function deleteCard() {
    var httpRequest = new XMLHttpRequest();
     httpRequest.onreadystatechange = handleResponse;
     httpRequest.open("GET", "Card.html");
　　 // setRequestHeader 方法必须位于 open 方法之后
　　 httpRequest.setRequestHeader("X-HTTP-Method-Override", "DELETE"); 
　　 httpRequest.send();
}

　　一些浏览器会缓存 AJAX 请求的数据，导致发起第二次请求，不能获取到最新数据，那么可以禁用缓存来达到目的，这在调试时比较方便。

　　httpRequest.setRequestHeader("Cache-Control", "no-cache");