Ajax- XMLHttpRequest交互示例

導航: 上一頁 | ASP | PHP | JSP | HTML | CSS | XHTML | aJAX | Ruby | JAVA | XML | Python | ColdFusion

不同于標準Web客戶中所用的標準請求/響應方法，Ajax應用的做法稍有差別。

1. 一個客戶端事件觸發(fā)一個Ajax事件。從簡單的onchange事件到某個特定的用戶動作，很多這樣的事件都可以觸發(fā)Ajax事件?？梢杂腥缦碌拇a：
<input type="text"d="email" name="email" onblur="validateEmail()";>

2. 創(chuàng)建XMLHttpRequest對象的一個實例。使用open()方法建立調用，并設置URL以及所希望的HTTP方法（通常是GET或POST）。請求實際上通過一個send()方法調用觸發(fā)。可能的代碼如下所示：

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

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

 function callback() {

  if (xmlHttp.readyState == 4) {

    if (xmlHttp.status == 200) {

         //do something interesting here

    }

  }

 }

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

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