ajax所包含的技術(shù)有：1、HTML或XHTML，用于建立網(wǎng)頁(yè)內(nèi)容；2、css，用于美化網(wǎng)頁(yè)內(nèi)容；3、DOM，交互和動(dòng)態(tài)顯示網(wǎng)頁(yè)內(nèi)容；4、XMLHttpRequest，用于和服務(wù)器進(jìn)行異步通信；5、javascript，實(shí)現(xiàn)綁定和調(diào)用。

本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

Ajax即Asynchronous Javascript And XML（異步JavaScript和XML）在 2005年被Jesse James Garrett提出的新術(shù)語(yǔ)，用來(lái)描述一種使用現(xiàn)有技術(shù)集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。

使用Ajax技術(shù)網(wǎng)頁(yè)應(yīng)用能夠快速地將增量更新呈現(xiàn)在用戶界面上，而不需要重載（刷新）整個(gè)頁(yè)面，這使得程序能夠更快地回應(yīng)用戶的操作。

ajax所包含的技術(shù)：

大家都知道ajax并非一種新的技術(shù)，而是幾種原有技術(shù)的結(jié)合體。它由下列技術(shù)組合而成。

1、HTML或 XHTML，用于建立網(wǎng)頁(yè)內(nèi)容

2、CSS，用于美化網(wǎng)頁(yè)內(nèi)容

3、使用DOM模型來(lái)交互和動(dòng)態(tài)顯示。

4、使用XMLHttpRequest來(lái)和服務(wù)器進(jìn)行異步通信。

5、使用javascript來(lái)綁定和調(diào)用。

在上面幾中技術(shù)中，除了XmlHttpRequest對(duì)象以外，其它所有的技術(shù)都是基于web標(biāo)準(zhǔn)并且已經(jīng)得到了廣泛使用的，XMLHttpRequest雖然目前還沒(méi)有被W3C所采納，但是它已經(jīng)是一個(gè)事實(shí)的標(biāo)準(zhǔn)，因?yàn)槟壳皫缀跛械闹髁鳛g覽器都支持它。

ajax原理和XmlHttpRequest對(duì)象

Ajax的原理簡(jiǎn)單來(lái)說(shuō)通過(guò)XmlHttpRequest對(duì)象來(lái)向服務(wù)器發(fā)異步請(qǐng)求，從服務(wù)器獲得數(shù)據(jù)，然后用javascript來(lái)操作DOM而更新頁(yè)面。這其中最關(guān)鍵的一步就是從服務(wù)器獲得請(qǐng)求數(shù)據(jù)。要清楚這個(gè)過(guò)程和原理，我們必須對(duì) XMLHttpRequest有所了解。

XMLHttpRequest是ajax的核心機(jī)制，它是在IE5中首先引入的，是一種支持異步請(qǐng)求的技術(shù)。簡(jiǎn)單的說(shuō)，也就是javascript可以及時(shí)向服務(wù)器提出請(qǐng)求和處理響應(yīng)，而不阻塞用戶。達(dá)到無(wú)刷新的效果。

所以我們先從XMLHttpRequest講起，來(lái)看看它的工作原理。

首先，我們先來(lái)看看XMLHttpRequest這個(gè)對(duì)象的屬性。

它的屬性有：

onreadystatechange 每次狀態(tài)改變所觸發(fā)事件的事件處理程序。

responseText從服務(wù)器進(jìn)程返回?cái)?shù)據(jù)的字符串形式。

responseXML從服務(wù)器進(jìn)程返回的DOM兼容的文檔數(shù)據(jù)對(duì)象。

status從服務(wù)器返回的數(shù)字代碼，比如常見(jiàn)的404（未找到）和200（已就緒）

status Text伴隨狀態(tài)碼的字符串信息

readyState對(duì)象狀態(tài)值

0 (未初始化) 對(duì)象已建立，但是尚未初始化（尚未調(diào)用open方法）

1 (初始化) 對(duì)象已建立，尚未調(diào)用send方法

2 (發(fā)送數(shù)據(jù)) send方法已調(diào)用，但是當(dāng)前的狀態(tài)及http頭未知

3 (數(shù)據(jù)傳送中) 已接收部分?jǐn)?shù)據(jù)，因?yàn)轫憫?yīng)及http頭不全，這時(shí)通過(guò)responseBody和responseText獲取部分?jǐn)?shù)據(jù)會(huì)出現(xiàn)錯(cuò)誤，

4 (完成) 數(shù)據(jù)接收完畢,此時(shí)可以通過(guò)通過(guò)responseXml和responseText獲取完整的回應(yīng)數(shù)據(jù)

但是，由于各瀏覽器之間存在差異，所以創(chuàng)建一個(gè)XMLHttpRequest對(duì)象可能需要不同的方法。這個(gè)差異主要體現(xiàn)在IE和其它瀏覽器之間。下面是一個(gè)比較標(biāo)準(zhǔn)的創(chuàng)建XMLHttpRequest對(duì)象的方法。

function CreateXmlHttp() { //非IE瀏覽器創(chuàng)建XmlHttpRequest對(duì)象 if(window.XmlHttpRequest) { xmlhttp=new XmlHttpRequest(); } //IE瀏覽器創(chuàng)建XmlHttpRequest對(duì)象 if(window.ActiveXObject) { try { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { try{ xmlhttp=new ActiveXObject("msxml2.XMLHTTP"); } catch(ex){} } } } function TestAjax() { var data=document.getElementByIdx("username").value; CreateXmlHttp(); if(!xmlhttp) { alert("創(chuàng)建xmlhttp對(duì)象異常！"); return false; } xmlhttp.open("POST",url,false); xmlhttp.onreadystatechange=function() { if(xmlhttp.readyState==4) { document.getElementByIdx("user1").innerHTML="數(shù)據(jù)正在加載..."; if(xmlhttp.status==200) { document.write(xmlhttp.responseText); } } } xmlhttp.send(); }

如上所示，函數(shù)首先檢查XMLHttpRequest的整體狀態(tài)并且保證它已經(jīng)完成（readyStatus=4），即數(shù)據(jù)已經(jīng)發(fā)送完畢。然后根據(jù)服務(wù)器的設(shè)定詢問(wèn)請(qǐng)求狀態(tài)，如果一切已經(jīng)就緒（status=200），那么就執(zhí)行下面需要的操作。

對(duì)于XmlHttpRequest的兩個(gè)方法，open和send，其中open方法指定了：

a、向服務(wù)器提交數(shù)據(jù)的類(lèi)型，即post還是get。

b、請(qǐng)求的url地址和傳遞的參數(shù)。

c、傳輸方式，false為同步，true為異步。默認(rèn)為true。如果是異步通信方式(true)，客戶機(jī)就不等待服務(wù)器的響應(yīng)；如果是同步方式(false)，客戶機(jī)就要等到服務(wù)器返回消息后才去執(zhí)行其他操作。我們需要根據(jù)實(shí)際需要來(lái)指定同步方式，在某些頁(yè)面中，可能會(huì)發(fā)出多個(gè)請(qǐng)求，甚至是有組織有計(jì)劃有隊(duì)形大規(guī)模的高強(qiáng)度的request，而后一個(gè)是會(huì)覆蓋前一個(gè)的，這個(gè)時(shí)候當(dāng)然要指定同步方式。

Send方法用來(lái)發(fā)送請(qǐng)求。

知道了XMLHttpRequest的工作流程，我們可以看出，XMLHttpRequest是完全用來(lái)向服務(wù)器發(fā)出一個(gè)請(qǐng)求的，它的作用也局限于此，但它的作用是整個(gè)ajax實(shí)現(xiàn)的關(guān)鍵，因?yàn)閍jax無(wú)非是兩個(gè)過(guò)程，發(fā)出請(qǐng)求和響應(yīng)請(qǐng)求。并且它完全是一種客戶端的技術(shù)。而XMLHttpRequest正是處理了服務(wù)器端和客戶端通信的問(wèn)題所以才會(huì)如此的重要。

現(xiàn)在，我們對(duì)ajax的原理大概可以有一個(gè)了解了。我們可以把服務(wù)器端看成一個(gè)數(shù)據(jù)接口，它返回的是一個(gè)純文本流，當(dāng)然，這個(gè)文本流可以是XML格式，可以是Html，可以是Javascript代碼，也可以只是一個(gè)字符串。這時(shí)候，XMLHttpRequest向服務(wù)器端請(qǐng)求這個(gè)頁(yè)面，服務(wù)器端將文本的結(jié)果寫(xiě)入頁(yè)面，這和普通的web開(kāi)發(fā)流程是一樣的，不同的是，客戶端在異步獲取這個(gè)結(jié)果后，不是直接顯示在頁(yè)面，而是先由javascript來(lái)處理，然后再顯示在頁(yè)面。至于現(xiàn)在流行的很多ajax控件，比如magicajax等，可以返回DataSet等其它數(shù)據(jù)類(lèi)型，只是將這個(gè)過(guò)程封裝了的結(jié)果，本質(zhì)上他們并沒(méi)有什么太大的區(qū)別。

【相關(guān)教程推薦：AJAX視頻教程】