ajax分析 學習

 AJAX全稱為“Asynchronous JavaScript and XML”（非同步JavaScript和XML），是一種建立互動式網頁應用的網頁開發技術。它使用：使用XHTML+CSS來表示資訊； 使用Javascript操作Document Object Model進行動態顯示及互動； 使用 XML 和 XSLT 進行資料交換及相關操作； 使用 XMLHttpRequest對象與Web伺服器進行非同步資料交換； 使用 JavaScript 將所有的東西綁定在一起。

XMLHttpRequest 對象 

要瞭解的一個對象可能對您來說也是最陌生的，即 XMLHttpRequest。這是一個 JavaScript 對象，建立該對象很簡單

XMLHttpRequest對象是處理所有伺服器通訊的對象。通過 XMLHttpRequest 對象與伺服器進行對話的是 JavaScript 技術。

 Ajax 基本上就是把 JavaScript 技術和 XMLHttpRequest 對象放在 Web 表單和伺服器之間。當使用者填寫表單時，資料發送給一些 JavaScript 代碼而不是 直接發送給伺服器。相反，JavaScript 代碼捕獲表單資料並向伺服器發送請求。同時使用者螢幕上的表單也不會閃爍、消失或延遲。換句話說，JavaScript 代碼在幕後發送請求，使用者甚至不知道請求的發出。更好的是，請求是非同步發送的，就是說 JavaScript 代碼（和使用者）不用等待伺服器的響應。因此使用者可以繼續輸入資料、滾動螢幕和使用應用程式。然後，伺服器將資料返回 JavaScript 代碼（仍然在 Web 表單中），後者決定如何處理這些資料。它可以迅速更新表單資料，讓人感覺應用程式是立即完成的，表單沒有提交或重新整理而使用者得到了新資料。JavaScript 代碼甚至可以對收到的資料執行某種計算，再發送另一個請求，完全不需要使用者幹預！這就是 XMLHttpRequest 的強大之處。它可以根據需要自行與伺服器進行互動，使用者甚至可以完全不知道幕後發生的一切。結果就是類似於傳統型應用程式的動態、快速響應、高互動性的體驗，但是背後又擁有互連網的全部強大力量。

加入一些 JavaScript                                                                                                                                                                                   得到 XMLHttpRequest 的控制代碼後，使用 JavaScript 程式碼完成非常基本的任務： 
擷取表單資料：JavaScript 代碼很容易從 HTML 表單中抽取資料並發送到伺服器。 
修改表單上的資料：更新表單也很簡單，從設定欄位值到迅速替換映像。 
解析 HTML 和 XML：使用 JavaScript 代碼操縱 DOM，處理 HTML 表單伺服器返回的 XML 資料的結構。

以 DOM 結束 
      最後還有 DOM，即文件物件模型。JavaScript 技術中使用 DOM 很容易，也非常直觀。按照常規也許應該說明如何使用 DOM，或者至少要給出一些範例程式碼，但這樣做您可能會被誤導。即使不理會 DOM，仍然能深入地探討 Ajax。當需要在 JavaScript 代碼和伺服器之間傳遞 XML 和改變 HTML 表單的時候，我們再深入研究 DOM。沒有它也能做一些有趣的工作，因此現在就把 DOM 放到一邊吧。

正式開始學習Ajax 擷取 Request 對象 
      有了上面的基礎知識後，擷取XMLHttpRequest 對象是很簡單的。XMLHttpRequest 是 Ajax 應用程式的核心。  但令人奇怪的是，XMLHttpRequest 成了這場瀏覽器之間戰爭的犧牲品之一。因此，針對不同的瀏覽器獲得 XMLHttpRequest 對象可能需要採用不同的方法。 Microsoft 瀏覽器
     Microsoft 瀏覽器 Internet Explorer 使用 MSXML 解析器處理 XML（可以通過 參考資料 進一步瞭解 MSXML）。因此如果編寫的 Ajax 應用程式要和 Internet Explorer 打交道，那麼必須用一種特殊的方式建立對象。但並不是這麼簡單。根據 Internet Explorer 中安裝的 JavaScript 技術版本不同，MSXML 實際上有兩種不同的版本，因此必須對這兩種情況分別編寫代碼。

var xmlHttp = false; try {   xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {                    try {                            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");                         } catch (e2) {                                           xmlHttp = false;                                           }               }

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");這兩行代碼就是嘗試使用兩個版本的 MSXML 建立對象，如果失敗則使用另一個版本建立該對象。如果都不成功，則將 xmlHttp 變數設為 false，告訴您的代碼出現了問題。出現這種情況，可能是因為安裝了非 Microsoft 瀏覽器，需要使用不同的代碼。

處理 Mozilla 和非 Microsoft 瀏覽器

var xmlHttp = new XMLHttpRequest object;  這行簡單得多的代碼在 Mozilla、Firefox、Safari、Opera 以及基本上所有以任何形式或方式支援 Ajax 的非 Microsoft 瀏覽器中，建立了 XMLHttpRequest 對象。

支援所有瀏覽器 var xmlHttp = false;try {   xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {   try {     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");   } catch (e2) {     xmlHttp = false;   } } if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {   xmlHttp = new XMLHttpRequest(); }

這段代碼的核心分為三步： 
1、建立一個變數 xmlHttp 來引用即將建立的 XMLHttpRequest 對象。 
2、嘗試在 Microsoft 瀏覽器中建立該對象： 
      1）嘗試使用 Msxml2.XMLHTTP 對象建立它。 
      2）如果失敗，再嘗試 Microsoft.XMLHTTP 對象。 
3、如果仍然沒有建立 xmlHttp，則以非 Microsoft 的方式建立該對象。 
最後，xmlHttp 應該引用一個有效 XMLHttpRequest 對象，無論運行什麼樣的瀏覽器。

Ajax請求/響應

發出請求 
您已經有了一個嶄新的 XMLHttpRequest 對象，現在讓它幹點活兒吧。首先需要一個 Web 頁面能夠調用的 JavaScript 方法。接下來就是在所有 Ajax 應用程式中基本都雷同的流程： 
1、從 Web 表單中擷取需要的資料。 
2、建立要串連的 URL。 
3、開啟到伺服器的串連。 
4、設定伺服器在完成後要啟動並執行函數。 
5、發送請求。

function callServer() {   // 擷取ID為city的表單資訊   var city = document.getElementById("city").value;   var state = document.getElementById("state").value;   // 判斷都不為空白   if ((city == null) || (city == "")) return;   if ((state == null) || (state == "")) return;   // 建立要發送的URl   var url = "/scripts/getCode.aspx?city=" + escape(city) + "&state=" + escape(state);   // 開啟串連   xmlHttp.open("GET", url, true);   // 請求返回執行的函數   xmlHttp.onreadystatechange = updatePage;   // 發送請求   xmlHttp.send(null); }

開始的代碼使用是基本 JavaScript 代碼擷取幾個表單欄位的值。然後設定一個 aspx頁面 指令碼作為連結的目標。要注意指令碼 URL 的指定方式，city 和 state（來自表單）使用，簡單的 GET 參數附加在 URL 之後。然後開啟一個串連，這是您第一次看到使用 XMLHttpRequest。其中指定了串連方法（GET）和要串連的 URL。最後一個參數如果設為 true，那麼將請求一個非同步串連。如果使用 false，那麼代碼發出請求後將等待伺服器返回的響應。如果設為 true，當伺服器在幕後處理請求的時候使用者仍然可以使用表單（甚至調用其他 JavaScript 方法）。

xmlHttp（XMLHttpRequest 對象執行個體）的 onreadystatechange 屬性可以告訴伺服器在運行完成後（可能要用五分鐘或者五個小時）做什麼。因為代碼沒有等待伺服器，必須讓伺服器知道怎麼做以便您能作出響應。在這個樣本中，如果伺服器處理完了請求，一個特殊的名為 updatePage() 的方法將被觸發。

最後，使用值 null 調用 send()。因為已經在請求 URL 中添加了要發送給伺服器的資料（city 和 state），所以請求中不需要發送任何資料。這樣就發出了請求，伺服器按照您的要求工作。

處理響應

什麼也不要做，直到 xmlHttp.readyState 屬性的值等於4（就緒狀態）。 
伺服器將把響應填充到 xmlHttp.responseText 屬性中。 使用xmlHttp.responseText 屬性獲得伺服器的響應。

if(req.readyState==4){        if(req.status == 200 ){  var msg = req.responseXML.getElementsByTagName("msg")[0];  document.getElementById("result").innerHTML = msg.childNodes[0].nodeValue;    }}

validate.jsp文檔：

<%response.setContentType("text/xml");response.setHeader("Cache-Control","no-store");//HTTP1.1response.setHeader("Pragma","no-cache");//HTTP1.0response.setDateHeader("Expires",0);//prevents caching at proxy serverresponse.getWriter().write("<msg>valid</msg>");%>