|
什么是 AJAX?
AJAX (異步 JavaScript 和 XML) 是個(gè)新產(chǎn)生的術(shù)語(yǔ),專為描述JavaScript的兩項(xiàng)強(qiáng)大性能.這兩項(xiàng)性能在多年來(lái)一直被網(wǎng)絡(luò)開(kāi)發(fā)者所忽略,直到最近Gmail, Google suggest和google Maps的橫空出世才使人們開(kāi)始意識(shí)到其重要性. 這兩項(xiàng)被忽視的性能是:
步驟 1 ?C "請(qǐng)!" --- 如何發(fā)送一個(gè)HTTP請(qǐng)求 為了用JavaScript向服務(wù)器發(fā)送一個(gè)HTTP請(qǐng)求, 需要一個(gè)具備這種功能的類(lèi)實(shí)例. 這樣的類(lèi)首先由Internet Explorer以ActiveX對(duì)象引入, 被稱為 因此, 為了創(chuàng)建一個(gè)跨瀏覽器的這樣的類(lèi)實(shí)例(對(duì)象), 可以應(yīng)用如下代碼: if (window.XMLHttpRequest) { // Mozilla, Safari, ...
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
(上例對(duì)代碼做了一定簡(jiǎn)化,這是為了解釋如何創(chuàng)建XMLHTTP類(lèi)實(shí)例. 實(shí)際的代碼實(shí)例可參閱本篇步驟3.) 如果服務(wù)器的響應(yīng)沒(méi)有XML mime-type header,某些Mozilla瀏覽器可能無(wú)法正常工作. 為了解決這個(gè)問(wèn)題, 如果服務(wù)器響應(yīng)的header不是 http_request = new XMLHttpRequest(); http_request.overrideMimeType(‘‘text/xml‘‘); 接下來(lái)要決定當(dāng)收到服務(wù)器的響應(yīng)后,需要做什么.這需要告訴HTTP請(qǐng)求對(duì)象用哪一個(gè)JavaScript函數(shù)處理這個(gè)響應(yīng).可以將對(duì)象的
注意:在函數(shù)名后沒(méi)有括號(hào),也無(wú)需傳遞參數(shù).另外還有一種方法,可以在扉頁(yè)(fly)中定義函數(shù)及其對(duì)響應(yīng)要采取的行為,如下所示: http_request.onreadystatechange = function(){
// do the thing
};
在定義了如何處理響應(yīng)后,就要發(fā)送請(qǐng)求了.可以調(diào)用HTTP請(qǐng)求類(lèi)的 http_request.open(‘‘GET‘‘, ‘‘http://www./some.file‘‘, true); http_request.send(null);
如果第一個(gè)參數(shù)是"POST",
步驟 2 ?C "收到!" --- 處理服務(wù)器的響應(yīng) 當(dāng)發(fā)送請(qǐng)求時(shí),要提供指定處理響應(yīng)的JavaScript函數(shù)名.
我們來(lái)看看這個(gè)函數(shù)的功能是什么.首先函數(shù)會(huì)檢查請(qǐng)求的狀態(tài).如果狀態(tài)值是4,就意味著一個(gè)完整的服務(wù)器響應(yīng)已經(jīng)收到了,您將可以處理該響應(yīng). if (http_request.readyState == 4) {
// everything is good, the response is received
} else {
// still not ready
}
(Source) 接著,函數(shù)會(huì)檢查HTTP服務(wù)器響應(yīng)的狀態(tài)值. 完整的狀態(tài)取值可參見(jiàn) W3C site. 我們著重看值為 if (http_request.status == 200) {
// perfect!
} else {
// there was a problem with the request,
// for example the response may be a 404 (Not Found)
// or 500 (Internal Server Error) response codes
}
在檢查完請(qǐng)求的狀態(tài)值和響應(yīng)的HTTP狀態(tài)值后, 您就可以處理從服務(wù)器得到的數(shù)據(jù)了.有兩種方式可以得到這些數(shù)據(jù):
步驟 3 ?C "萬(wàn)事俱備!" - 簡(jiǎn)單實(shí)例 我們現(xiàn)在將整個(gè)過(guò)程完整地做一次,發(fā)送一個(gè)簡(jiǎn)單的HTTP請(qǐng)求. 我們用JavaScript請(qǐng)求一個(gè)HTML文件, <script type="text/javascript" language="javascript">
var http_request = false;
function makeRequest(url) {
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType(‘‘text/xml‘‘);
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert(‘‘Giving up :( Cannot create an XMLHTTP instance‘‘);
return false;
}
http_request.onreadystatechange = alertContents;
http_request.open(‘‘GET‘‘, url, true);
http_request.send(null);
}
function alertContents() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
alert(http_request.responseText);
} else {
alert(‘‘There was a problem with the request.‘‘);
}
}
}
</script>
<span
style="cursor: pointer; text-decoration: underline"
onclick="makeRequest(‘‘test.html‘‘)">
Make a request
</span>
本例中:
步驟 4 ?C "X-文檔" --- 處理XML響應(yīng) 在前面的例子中,當(dāng)服務(wù)器對(duì)HTTP請(qǐng)求的響應(yīng)被收到后,我們會(huì)調(diào)用請(qǐng)求對(duì)象的 首先,我們新建一個(gè)有效的XML文件,后面我們將使用這個(gè)文件.該文件(test.xml)源代碼如下所示: <?xml version="1.0" ?>
<root>
I‘‘m a test.
</root>
在該腳本中,我們只需修改請(qǐng)求部分: ... onclick="makeRequest(‘‘test.xml‘‘)"> ... 接著,在 var xmldoc = http_request.responseXML; var root_node = xmldoc.getElementsByTagName(‘‘root‘‘).item(0); alert(root_node.firstChild.data); 這里,我們使用了 |
|
|
