編輯“Ajax- XMLHttpRequest交互示例”

<span style="text-align:center; border:1px solid #000; float:right; padding:6px;"><strong>導(dǎo)航:</strong> [[Ajax學(xué)習(xí)教程#Ajax學(xué)習(xí)教程|上一頁]] | {{template:開發(fā)語言導(dǎo)航}}</span>
<div style="clear:both;"></div>
不同于標(biāo)準(zhǔn)Web客戶中所用的標(biāo)準(zhǔn)請求/響應(yīng)方法，Ajax應(yīng)用的做法稍有差別。 <br>

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

2. 創(chuàng)建XMLHttpRequest對象的一個(gè)實(shí)例。使用open()方法建立調(diào)用，并設(shè)置URL以及所希望的HTTP方法（通常是GET或POST）。請求實(shí)際上通過一個(gè)send()方法調(diào)用觸發(fā)?？赡艿拇a如下所示：<br>
  var xmlHttp;<br>
  function validateEmail() {<br>
   var email = document.getElementById("email");<br>
   var url = "validate?email=" + escape(email.value);<br>
   if (window.ActiveXObject) {<br>
     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");<br>
   }<br>
   else if (window.XMLHttpRequest) {<br>
     xmlHttp = new XMLHttpRequest();<br>
   }<br>
  xmlHttp.open("GET", url);<br>
  xmlHttp.onreadystatechange = callback;<br>
  xmlHttp.send(null);<br>
  }<br>

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

6. 在這個(gè)示例中，XMLHttpRequest對象配置為處理返回時(shí)要調(diào)用callback()函數(shù)。這個(gè)函數(shù)會檢查XMLHttpRequest對象的readyState屬性，然后查看服務(wù)器返回的狀態(tài)碼。如果一切正常，callback()函數(shù)就會在客戶端上做些有意思的工作。以下就是一個(gè)典型的回調(diào)方法：<br>
  function callback() {<br>
   if (xmlHttp.readyState == 4) {<br>
     if (xmlHttp.status == 200) {<br>
          //do something interesting here<br>
     }<br>
   }<br>
  }
<br>
可以看到，這與正常的請求/響應(yīng)模式有所不同，但對Web開發(fā)人員來說，并不是完全陌生的。顯然，在創(chuàng)建和建立XMLHttpRequest對象時(shí)還可以做些事情，另外當(dāng)“回調(diào)”函數(shù)完成了狀態(tài)檢查之后也可以有所作為。一般地，你會把這些標(biāo)準(zhǔn)調(diào)用包裝在一個(gè)庫中，以便在整個(gè)應(yīng)用中使用，或者可以使用Web上提供的庫。這個(gè)領(lǐng)域還很新，但是在開源社區(qū)中已經(jīng)如火如荼地展開了大量的工作。<br>

通常，Web上提供的各種框架和工具包負(fù)責(zé)基本的連接和瀏覽器抽象，有些還增加了用戶界面組件。有一些純粹基于客戶，還有一些需要在服務(wù)器上工作。這些框架中的很多只是剛開始開發(fā)，或者還處于發(fā)布的早期階段，隨著新的庫和新的版本的定期出現(xiàn)，情況還在不斷發(fā)生變化。這個(gè)領(lǐng)域正在日漸成熟，最具優(yōu)勢的將脫穎而出。一些比較成熟的庫包括libXmlRequest、RSLite、sarissa、JavaScript對象注解（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)站上的信息！<br>
[[category:Ajax]]