Ajax的基本請求/響應模型

1、Ajax工做核心

Ajax的核心是JavaScript對象XMLHttpRequest（簡稱XHR）。它是一種支持異步請求的技術。能夠經過使用XHR對象向服務器提出請求並處理響應，而不阻塞用戶。

Ajax能夠完成的功能有：

• 在不從新加載頁面的狀況下更新網頁
• 在頁面已加載後從服務器請求數據
• 在頁面已加載後從服務器接收數據
• 在後臺向服務器發送數據

 1.1 Ajax簡介

　　Ajax能夠說 是目前最流行的 WEB 技術，它採用客戶端腳本與 Web 服務器交換數據，也就是說，客戶端的表單請求不是直接給 WEB 服務器，而是一些 Javascript 腳本，再經過 JS 內置的 xmlhttprequest 對象，異步的將請求發送給 WEB 服務器， WEB 服務器處理完以後再回發給 Javascript 腳本 , 而後動態的更新頁面數據。因而可知 AJAX 並非一種獨立的技術，而是由 Javascript+DHTML+DOM+HTML 多種技術的組合 , 它少了等待服務器響應的時間，而且它可使頁面局部刷新，由此加強了用戶體驗。

2、Ajax開發步驟

2.1XMLHttpRequest對象

Ajax核心對象XmlHttpRequest對象的經常使用的方法和屬性以下：

• open()：創建到服務器的新請求
• send()：向服務器發送請求
• abort()：放棄當前請求
• readyState：對象狀態值，未爲初始化、正在加載、加載完畢、交互、完成五種。
• responseText ：服務器返回的請求文本信息
• onreadystatechange：每次狀態改變所觸發的事件處理程序
• responseXML：從服務器進程返回的DOM兼容的文檔數據對象
• status：從服務器返回的數字代碼，如404（未找到）
• statusText：伴隨狀態碼的字符串信息

 XMLHttpRequest對象的建立以及與服務器的交互以下代碼所示：

<script language="javascript" type="text/javascript">
function callServer()
{
     var xmlHttp = new XMLHttpRequest();
     var ID = document.getElementById("ID").value;
     var PASS= document.getElementById("PASS").value;
　　  if((ID == null) ||(ID == "")) return;
     if((PASS== null) ||(PASS == "")) return;
     //建立url連接
    var url = "Login?Id="+escape(ID)+"&PASS="+escape(PASS);
　　//最後一個參數若是是true的話，那麼將請求一個異步連結
    xmlHttp.open("POST",url,true);
    //若是服務器完成請求，RefreshPage函數被觸發
    xmlHttp.onreaadstatechange = RefreshPage;
    //發送請求
    xmlHttp.send(null);
}

function RefreshPage()
{
    if(xmlHttp.readyState == 4)
   {
        alert('服務器返回的數據爲： ' + xmlHttp.responseText);
   }
}
</script>

2.2 獲取Request對象：

因爲不一樣瀏覽器的差別，獲取XmlHttpRequest對象須要採用不一樣的方式

<script language="javascript" type="text/javascript">
<!--
    var xmlhttp;
    // 建立XMLHTTPRequest對象
    function createXMLHTTPRequest(){
        if(window.ActiveXObject){ // 判斷是否支持ActiveX控件
            xmlhttp = new ActiveObject("Microsoft.XMLHTTP"); // 經過實例化ActiveXObject的一個新實例來建立XMLHTTPRequest對象
    }
    else if(window.XMLHTTPRequest){ // 判斷是否把XMLHTTPRequest實現爲一個本地javascript對象
        xmlhttp = new XMLHTTPRequest(); // 建立XMLHTTPRequest的一個實例（本地javascript對象）
    }
    }
//-->
</script>

2.3 Ajax的基本請求/響應類型

Ajax應用程序中處理服務請求的流程以下：

• 從web表單中獲取須要提交的數據
• 創建要連結的url
• 打開到服務器的鏈接
• 設置服務器在完成後要運行的函數
• 發送請求

 2.4 調用Ajax過程

<form>
    <p>用戶ID:<input type="text" name="ID" id="city" size="10" onChange="callServer();"/> </p>
    <p>口令:<input type="text" name="PASS" id="state" size="16" onChange="callServer();"/> </p>
</form>