AJAX概念
AJAX（Asynchronouse Javascript And Xml），瀏覽器使用JavaScript和服務(wù)器進(jìn)行數(shù)據(jù)交互，是一種在無需重新加載整個網(wǎng)頁的情況下，能夠更新網(wǎng)頁數(shù)據(jù)的技術(shù)。
AJAX步驟
- 創(chuàng)建XMLHttpRequest對象 :
var xmlhttp=new XMLHttpRequest();
// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行代碼
xmlhttp=new XMLHttpRequest();
// IE6, IE5 瀏覽器執(zhí)行代碼
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
- 配置XMLHttpRequest對象
xmlhttp.open("GET","/ajax.xhtml?page=1",true);
- 發(fā)送XMLHttpRequest對象
xmlhttp.send();
AJAX實(shí)例
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行代碼
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 瀏覽器執(zhí)行代碼
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//在這里進(jìn)行獲得數(shù)據(jù)后的處理
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/ajax.xhtml?page=1",true);
xmlhttp.send();
}
AJAX服務(wù)器狀態(tài)碼
//readyState
0: 請求未初始化
1: 服務(wù)器連接已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成，且響應(yīng)已就緒
//status
200：服務(wù)器響應(yīng)正常。
304：該資源在上次請求之后沒有任何修改（這通常用于瀏覽器的緩存機(jī)制，使用GET請求時尤其需要意）。
400：無法找到請求的資源。
401：訪問資源的權(quán)限不夠。
403：沒有權(quán)限訪問資源。
404：需要訪問的資源不存在。
405：需要訪問的資源被禁止。
407：訪問的資源需要代理身份驗(yàn)證。
414：請求的URL太長。
500：服務(wù)器內(nèi)部錯誤。
XHR2的方法
除了使用readystatechange事件來探測HTTP請求的完成外，在XHR2中，還定義了多個有用的事件。
abort事件：當(dāng)進(jìn)度事件被中止時觸發(fā)。如果發(fā)生錯誤，導(dǎo)致進(jìn)程中止，不會觸發(fā)該事件。
error事件：由于錯誤導(dǎo)致資源無法加載時觸發(fā)。
load事件：進(jìn)度成功結(jié)束時觸發(fā)。
loadstart事件：進(jìn)度開始時觸發(fā)。
loadend事件：進(jìn)度停止時觸發(fā)，發(fā)生順序排在error事件\abort事件\load事件后面。
progress事件：當(dāng)操作處于進(jìn)度之中，由傳輸?shù)臄?shù)據(jù)塊不斷觸發(fā)。
timeout事件：進(jìn)度超過限時觸發(fā)。
當(dāng)調(diào)用send()時，觸發(fā)單個loadstart事件。當(dāng)正在加載服務(wù)器的響應(yīng)時，XMLHttpRequest對象會發(fā)現(xiàn)progress事件，通常每隔50毫秒左右，可以使用這些事件給用戶反饋請求的進(jìn)度。當(dāng)事件完成，會觸發(fā)load事件。
HTTP請求無法完成有3種情況：
請求超時，會觸發(fā)timeout事件
請求終止，會觸發(fā)abort事件
請求發(fā)生錯誤，會觸發(fā)error事件
注意：對于任何具體請求，瀏覽器將只會觸發(fā)load、abort、timeout和error事件中的一個。一旦這些事件中的一個發(fā)生后，瀏覽器應(yīng)該觸發(fā) loadend 事件。
//使用事件的兩種方法
xhr.onload=function(){}
xhr.addEventListener('load',function(){})
關(guān)于上傳
在XHR2中，也提供了用于監(jiān)控HTTP請求上傳的事件。在實(shí)現(xiàn)這些特性的瀏覽器中，XMLHttpRequest對象有一個upload屬性，upload屬性值是一個對象，它定義了addEventListener()方法和整個progress事件集合，比如onprogress和onload。
xhr.upload.onprogress = function(e){
var percentComplete = e.loaded / e.total;
}
