理解同步交互和異步交互
舉個例子：普通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);
//POST方式向服務器發送AJAX請求時要通過設置請求頭來指定為application/x-www-form-urlencoded編碼類型, 代碼如下：
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
4.發送請求到http服務器
/* varBody:欲通過此請求發送的數據。 */
xmlHttp.send(varBody);?
個人博客：學習園
原文地址：http://www.xuexiyuan.cn/article/detail/192.html
?
?
?
?
?
?
?
?
?
?
