Ajax計(jì)數(shù)的核心就是XMLHttpRequest對(duì)象驶悟。
以往的請(qǐng)求都由瀏覽器發(fā)出,而XMLHttpRequest對(duì)象使得JS可以自己發(fā)出請(qǐng)求及處理響應(yīng)南缓。
創(chuàng)建request對(duì)象
在IE中創(chuàng)建新的對(duì)象要使用以下代碼:var request = new ActiveXObject("Msxml2.XMLHTTP.3.0");
而在其他瀏覽器中則基于XMLHttpRequest來創(chuàng)建新對(duì)象:var request = new XMLHttpRequest();
更麻煩的是扔嵌,不同版本的IE中使用的XMLHTTP對(duì)象也不完全相同冕香,為了兼容所有瀏覽器,我們利用對(duì)象檢測(cè)技術(shù)創(chuàng)建了一個(gè)getHTTPObject.js文件:
function getHTTPObject() {
if(typeof XMLHttpRequest == "undefined")
XMLHttpRequest = function() {
try {return new ActiveXObject("Msxml2.XMLHTTP.6.0");}
catch(e) {}
try {return new ActiveXObject("Msxml2.XMLHTTP.3.0");}
catch(e) {}
try {return new ActiveXObject("Msxml2.XMLHTTP");}
catch(e) {}
return false;
}
return new XMLHttpRequest();
}
open方法:
XMLHttpRequest對(duì)象有很多方法镣奋,其中最有用的是open方法币呵,它用來指定服務(wù)器上將要訪問的文件,指定請(qǐng)求類型:GET或者POST或者SEND侨颈。這個(gè)方法的第三個(gè)參數(shù)用來指定請(qǐng)求是否以異步方法發(fā)送或處理余赢。在getNewContent.js中添加以下代碼:
function getNewContent() {
var request = getHttpObject();
if(request) {
request.open("GET", "example.txt", true);
request.onreadystatechange = function() {
if(request.readyState == 4) {
var para = document.createElement("p");
var text = document.createTextNode(request.responseText);
para.appendChild(text);
document.getElementById("new").appendChild(para);
}
};
request.send(null);
} else {
alert("Sorry, your browser doesn't support XMLHttpRequest.");
}
}
addLoadEvent(getNewContent);
readyState屬性有五個(gè)可能的值:
0 表示未初始化
1 表示正在加載
2 表示加載完畢
3 表示正在交互
4 表示完成
當(dāng)readyState的值變成4,就可以訪問服務(wù)器發(fā)送回來的數(shù)據(jù)了哈垢。
訪問服務(wù)器發(fā)送回來的數(shù)據(jù)通過兩個(gè)屬性完成:一個(gè)是responseText妻柒,保存文本字符串形式的數(shù)據(jù)。第二個(gè)是responseXML耘分,用于保存Content-Type頭部中指定未“text/xml”的數(shù)據(jù)举塔。其實(shí)是一個(gè)DocumentFragment對(duì)象。
使用Ajax時(shí)求泰,必須注意同源策略央渣。
異步請(qǐng)求有個(gè)容易忽略的問題就是異步性。即代碼的執(zhí)行不會(huì)等待響應(yīng)的返回渴频,會(huì)繼續(xù)向下執(zhí)行芽丹。