AJAX概念
AJAX（Asynchronouse Javascript And Xml）兑宇，瀏覽器使用JavaScript和服務(wù)器進(jìn)行數(shù)據(jù)交互购桑，是一種在無(wú)需重新加載整個(gè)網(wǎng)頁(yè)的情況下，能夠更新網(wǎng)頁(yè)數(shù)據(jù)的技術(shù)蹬敲。
AJAX步驟
- 創(chuàng)建XMLHttpRequest對(duì)象 :
var xmlhttp=new XMLHttpRequest();
// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行代碼
xmlhttp=new XMLHttpRequest();
// IE6, IE5 瀏覽器執(zhí)行代碼
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
- 配置XMLHttpRequest對(duì)象
xmlhttp.open("GET","/ajax.xhtml?page=1",true);
- 發(fā)送XMLHttpRequest對(duì)象
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: 請(qǐng)求未初始化
1: 服務(wù)器連接已建立
2: 請(qǐng)求已接收
3: 請(qǐng)求處理中
4: 請(qǐng)求已完成赋荆，且響應(yīng)已就緒
//status
200：服務(wù)器響應(yīng)正常。
304：該資源在上次請(qǐng)求之后沒(méi)有任何修改（這通常用于瀏覽器的緩存機(jī)制尝抖，使用GET請(qǐng)求時(shí)尤其需要意）毡们。
400：無(wú)法找到請(qǐng)求的資源。
401：訪問(wèn)資源的權(quán)限不夠昧辽。
403：沒(méi)有權(quán)限訪問(wèn)資源衙熔。
404：需要訪問(wèn)的資源不存在。
405：需要訪問(wèn)的資源被禁止搅荞。
407：訪問(wèn)的資源需要代理身份驗(yàn)證红氯。
414：請(qǐng)求的URL太長(zhǎng)框咙。
500：服務(wù)器內(nèi)部錯(cuò)誤。
XHR2的方法
除了使用readystatechange事件來(lái)探測(cè)HTTP請(qǐng)求的完成外痢甘，在XHR2中喇嘱，還定義了多個(gè)有用的事件。
abort事件：當(dāng)進(jìn)度事件被中止時(shí)觸發(fā)塞栅。如果發(fā)生錯(cuò)誤者铜，導(dǎo)致進(jìn)程中止，不會(huì)觸發(fā)該事件放椰。
error事件：由于錯(cuò)誤導(dǎo)致資源無(wú)法加載時(shí)觸發(fā)作烟。
load事件：進(jìn)度成功結(jié)束時(shí)觸發(fā)。
loadstart事件：進(jìn)度開(kāi)始時(shí)觸發(fā)砾医。
loadend事件：進(jìn)度停止時(shí)觸發(fā)拿撩，發(fā)生順序排在error事件\abort事件\load事件后面。
progress事件：當(dāng)操作處于進(jìn)度之中如蚜，由傳輸?shù)臄?shù)據(jù)塊不斷觸發(fā)压恒。
timeout事件：進(jìn)度超過(guò)限時(shí)觸發(fā)。
當(dāng)調(diào)用send()時(shí)怖亭，觸發(fā)單個(gè)loadstart事件涎显。當(dāng)正在加載服務(wù)器的響應(yīng)時(shí)，XMLHttpRequest對(duì)象會(huì)發(fā)現(xiàn)progress事件兴猩，通常每隔50毫秒左右期吓，可以使用這些事件給用戶(hù)反饋請(qǐng)求的進(jìn)度。當(dāng)事件完成倾芝，會(huì)觸發(fā)load事件讨勤。
HTTP請(qǐng)求無(wú)法完成有3種情況：
請(qǐng)求超時(shí)，會(huì)觸發(fā)timeout事件
請(qǐng)求終止晨另，會(huì)觸發(fā)abort事件
請(qǐng)求發(fā)生錯(cuò)誤潭千，會(huì)觸發(fā)error事件
注意：對(duì)于任何具體請(qǐng)求，瀏覽器將只會(huì)觸發(fā)load借尿、abort刨晴、timeout和error事件中的一個(gè)。一旦這些事件中的一個(gè)發(fā)生后路翻，瀏覽器應(yīng)該觸發(fā) loadend 事件狈癞。
//使用事件的兩種方法
xhr.onload=function(){}
xhr.addEventListener('load',function(){})
關(guān)于上傳
在XHR2中，也提供了用于監(jiān)控HTTP請(qǐng)求上傳的事件茂契。在實(shí)現(xiàn)這些特性的瀏覽器中蝶桶，XMLHttpRequest對(duì)象有一個(gè)upload屬性，upload屬性值是一個(gè)對(duì)象掉冶，它定義了addEventListener()方法和整個(gè)progress事件集合真竖，比如onprogress和onload脐雪。
xhr.upload.onprogress = function(e){
var percentComplete = e.loaded / e.total;
}
