Ajax- XMLHttpRequest交互示例

導(dǎo)航: 上一頁(yè) | ASP | PHP | JSP | HTML | CSS | XHTML | aJAX | Ruby | JAVA | XML | Python | ColdFusion

不同于標(biāo)準(zhǔn)Web客戶(hù)中所用的標(biāo)準(zhǔn)請(qǐng)求/響應(yīng)方法，Ajax應(yīng)用的做法稍有差別。

1. 一個(gè)客戶(hù)端事件觸發(fā)一個(gè)Ajax事件。從簡(jiǎn)單的onchange事件到某個(gè)特定的用戶(hù)動(dòng)作，很多這樣的事件都可以觸發(fā)Ajax事件。可以有如下的代碼：
<input type="text"d="email" name="email" onblur="validateEmail()";>

2. 創(chuàng)建XMLHttpRequest對(duì)象的一個(gè)實(shí)例。使用open()方法建立調(diào)用，并設(shè)置URL以及所希望的HTTP方法（通常是GET或POST）。請(qǐng)求實(shí)際上通過(guò)一個(gè)send()方法調(diào)用觸發(fā)?？赡艿拇a如下所示：

 var xmlHttp;

 function validateEmail() {

  var email = document.getElementById("email");

  var url = "validate?email=" + escape(email.value);

  if (window.ActiveXObject) {

    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

  }

  else if (window.XMLHttpRequest) {

    xmlHttp = new XMLHttpRequest();

  }

 xmlHttp.open("GET", url);

 xmlHttp.onreadystatechange = callback;

 xmlHttp.send(null);

 }

3. 向服務(wù)器做出請(qǐng)求?？赡苷{(diào)用servlet、CGI腳本，或者任何服務(wù)器端技術(shù)。
4. 服務(wù)器可以做你想做的事情，包括訪問(wèn)數(shù)據(jù)庫(kù)，甚至訪問(wèn)另一個(gè)系統(tǒng)。
5. 請(qǐng)求返回到瀏覽器。Content-Type設(shè)置為text/xml——XMLHttpRequest對(duì)象只能處理text/html類(lèi)型的結(jié)果。在另外一些更復(fù)雜示例中，響應(yīng)可能涉及更廣，還包括JavaScript、DOM管理以及其他相關(guān)的技術(shù)。需要說(shuō)明，你還需要設(shè)置另外一些首部，使瀏覽器不會(huì)在本地緩存結(jié)果。為此可以使用下面的代碼：
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Pragma", "no-cache");[1]

6. 在這個(gè)示例中，XMLHttpRequest對(duì)象配置為處理返回時(shí)要調(diào)用callback()函數(shù)。這個(gè)函數(shù)會(huì)檢查XMLHttpRequest對(duì)象的readyState屬性，然后查看服務(wù)器返回的狀態(tài)碼。如果一切正常，callback()函數(shù)就會(huì)在客戶(hù)端上做些有意思的工作。以下就是一個(gè)典型的回調(diào)方法：

 function callback() {

  if (xmlHttp.readyState == 4) {

    if (xmlHttp.status == 200) {

         //do something interesting here

    }

  }

 }

可以看到，這與正常的請(qǐng)求/響應(yīng)模式有所不同，但對(duì)Web開(kāi)發(fā)人員來(lái)說(shuō)，并不是完全陌生的。顯然，在創(chuàng)建和建立XMLHttpRequest對(duì)象時(shí)還可以做些事情，另外當(dāng)“回調(diào)”函數(shù)完成了狀態(tài)檢查之后也可以有所作為。一般地，你會(huì)把這些標(biāo)準(zhǔn)調(diào)用包裝在一個(gè)庫(kù)中，以便在整個(gè)應(yīng)用中使用，或者可以使用Web上提供的庫(kù)。這個(gè)領(lǐng)域還很新，但是在開(kāi)源社區(qū)中已經(jīng)如火如荼地展開(kāi)了大量的工作。

通常，Web上提供的各種框架和工具包負(fù)責(zé)基本的連接和瀏覽器抽象，有些還增加了用戶(hù)界面組件。有一些純粹基于客戶(hù)，還有一些需要在服務(wù)器上工作。這些框架中的很多只是剛開(kāi)始開(kāi)發(fā)，或者還處于發(fā)布的早期階段，隨著新的庫(kù)和新的版本的定期出現(xiàn)，情況還在不斷發(fā)生變化。這個(gè)領(lǐng)域正在日漸成熟，最具優(yōu)勢(shì)的將脫穎而出。一些比較成熟的庫(kù)包括libXmlRequest、RSLite、sarissa、JavaScript對(duì)象注解（JavaScript Object Notation，JSON）、JSRS、直接Web遠(yuǎn)程通信（Direct Web Remoting，DWR）和Rails on Ruby。這個(gè)領(lǐng)域日新月異，所以應(yīng)當(dāng)適當(dāng)?shù)嘏渲媚愕腞SS收集器，及時(shí)收集有關(guān)Ajax的所有網(wǎng)站上的信息！