AJAX入門

標籤：ajax

理解同步互動和非同步互動舉個例子：普通B/S模式(同步)       AJAX技術(非同步)
       *  同步：

      提交請求->等待伺服器處理->處理完畢返回  這個期間用戶端瀏覽器不能幹任何事。       發送方發出資料後，等接收方發迴響應以後才發下一個資料包的通訊方式。         你現在傳輸，我要親眼看你傳輸完成，才去做別的事 。

       *  非同步： 

      請求通過事件觸發->伺服器處理（這時瀏覽器仍然可以作其他事情）->處理完畢。       發送方發出資料後，不等接收方發迴響應，接著發送下個資料包的通訊方式 。       你傳輸吧，我去做我的事了，傳輸完了告訴我一聲 。  

什麼是Ajax？

       Ajax被認為是(Asynchronous JavaScript and XML的縮寫）。現在，允許瀏覽器與伺服器通訊而無須重新整理當前頁面的技術都被叫做Ajax.

       Ajax並非一種新的技術，而是幾種原有技術的結合體。它由下列技術組合而成: 

1.使用CSS和XHTML來表示。 

2. 使用DOM模型來互動和動態顯示。 

3.使用XMLHttpRequest來和伺服器進行非同步通訊。 

4.使用javascript來綁定和調用。

Ajax的工作原理       AJAX採用非同步互動過程。AJAX在使用者與伺服器之間引入一個中間媒介，從而消除了網路互動過程中的處理—等待—處理—等待缺點。
       使用者的瀏覽器在執行任務時即裝載了AJAX引擎。AJAX引擎用JavaScript語言編寫，通常藏在一個隱藏的架構中。它負責編譯使用者介面及與伺服器之間的互動。
       AJAX引擎允許使用者與應用軟體之間的互動過程非同步進行，獨立於使用者與網路伺服器間的交流。現在，可以用Javascript調用AJAX引擎來代替產生一個HTTP的使用者動作，記憶體中的資料編輯、頁面導航、資料校正這些不需要重新載入整個頁面的需求可以交給AJAX來執行。 

       AJAX的原理簡單來說通過XmlHttpRequest對象來向伺服器發非同步請求，從伺服器獲得資料，然後用javascript來操作DOM而更新頁面。這其中最關鍵的一步就是從伺服器獲得請求資料。

瞭解XMLHttpRequest

　   XMLHttpRequest是ajax的核心機制，它是在IE5中首先引入的，是一種支援非同步請求的技術。簡單的說，也就是javascript可以及時向伺服器提出請求和處理響應，而不阻塞使用者。達到無重新整理的效果。

XMLHttpRequest屬性有：

屬性	描述
onreadystatechange	每次狀態改變所觸發事件的事件處理常式。
responseText	從伺服器處理序返回資料的字串形式。
responseXML	從伺服器處理序返回的DOM相容的文檔資料對象。
status	從伺服器返回的數字代碼，比如常見的404（未找到）和200（已就緒）
status Text	伴隨狀態代碼的字串資訊
readyState	對象狀態值,存有伺服器響應的狀態資訊。 每當 readyState 改變時，onreadystatechange 函數就會被執行。

 readyState 屬性可能的值：

狀態	描述
0	請求未初始化（在調用 open() 之前）
1	請求已提出（調用 send() 之前）
2	請求已發送（這裡通常可以從響應得到內容標題部）
3	請求處理中（響應中通常有部分資料可用，但是伺服器還沒有完成響應）
4	請求已完成,此時可以通過通過responseXml和responseText擷取完整的回應資料。

　　但是，由於各瀏覽器之間存在差異，所以建立一個XMLHttpRequest對象可能需要不同的方法。這個差異主要體現在IE和其它瀏覽器之間。下面是一個比較標準的建立XMLHttpRequest對象的方法。

/* * 建立XMLHttpRequest對象 * */function ajaxFunction(){var xmlHttp;try { // Firefox, Opera 8.0+, SafarixmlHttp = new XMLHttpRequest();} catch (e) { // Internet Explorertry {xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {try {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");} catch (e) {alert("您的瀏覽器不支援AJAX！");return false;}}}return xmlHttp;}

AJAX(用戶端)開發步驟：1.建立XMLHttpRequest對象

var xmlHttp = ajaxFunction();

2.接受伺服器端的響應

/* readyState 屬性存有伺服器響應的狀態資訊。每當 readyState 改變時，onreadystatechange 函數就會被執行。*/xmlHttp.onreadystatechange = function(){if(xmlHttp.readyState==4){var data=xmlHttp.responseText;alert("xmlHttp.responseText:"+data);}}

3.開啟和伺服器的串連

/* * bstrMethod: http方法，例如：POST、GET、PUT及PROPFIND。大小寫不敏感。  * bstrUrl: 請求的URL地址，可以為絕對位址也可以為相對位址。  * varAsync[可選]:布爾型，指定此請求是否為非同步方式，預設為true。如果為真，當狀態改變時會調用onreadystatechange屬性指定的回呼函數。  * bstrUser[可選]:如果伺服器需要驗證，此處指定使用者名稱，如果未指定，當伺服器需要驗證時，會彈出驗證視窗。  * bstrPassword[可選]:驗證資訊中的密碼部分，如果使用者名稱為空白，則此值將被忽略。 */xmlHttp.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);

4.發送請求到http伺服器

/* varBody:欲通過此請求發送的資料。 */xmlHttp.send(varBody);