AJAX異步請求原理和過程

AJAX 指異步 JavaScript 及 XML（Asynchronous JavaScript And XML），它不是一種新的編程語言，而是一種使用現有標準的新方法。

AJAX 基於 JavaScript 和 HTTP 請求（HTTP requests）的，由於AJAX 經過在後臺與服務器交換少許數據的方式，容許網頁進行異步更新。這意味着有可能在不重載整個頁面的狀況下，對網頁的一部分進行更新，經過 AJAX，你能夠建立更好、更快以及更友好的 WEB 應用程序
Ajax 能夠調用服務器任何資源，能夠調用動態頁面、靜態頁面，也能夠調用json對象，可是因爲瀏覽器沒法解析二進制文件，故調用圖片等時就會報錯。

調用json對象時，必須使用eval（"(" + 返回的對象 + ")"）;,不然沒法解析對象的資源。

AJAX異步請求原理和過程：

一、AJAX建立異步對象XMLHttpRequest ：

AJAX 的要點是 XMLHttpRequest 對象。不一樣的瀏覽器建立 XMLHttpRequest 對象的方法是有差別的。IE瀏覽器使用 ActiveXObject，而其餘的瀏覽器使用名爲 XMLHttpRequest 的 JavaScript 內建對象。如需針對不一樣的瀏覽器來建立此對象，咱們要使用一條 "try and catch" 語句。以下示例：

<script type="text/javascript">
function GetXmlHttpObject()
{
　　var xmlHttp=null;
　　

    try{
   　　    // Firefox, Opera 8.0+, Safari等瀏覽器建立XMLHttpRequest對象的方法
    　　    xmlHttp=new XMLHttpRequest();
        }
 　　catch (e){
  　　　　// Internet Explorer瀏覽器建立XMLHttpRequest對象的方法
   　　try{
      　　xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");//IE6.0以上的瀏覽器建立XMLHttpRequest對象的方法
       }
   　　catch (e){
      　　try{
         　　xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//IE6.0如下的瀏覽器建立XMLHttpRequest對象的方法
         }
      　　catch (e){
         　　alert("您的瀏覽器不支持AJAX！");
         　　return false;
         }
      }
    }

　　return xmlHttp;
}
</script>

 

首先聲明一個保存 XMLHttpRequest 對象的 xmlHttp 變量。

而後使用 XMLHttp=new XMLHttpRequest() 來建立此對象。這條語句針對 Firefox、Opera 以及 Safari 瀏覽器。假如失敗，則嘗試針對 Internet Explorer 6.0+ 的 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP")，假如也不成功，則嘗試針對 Internet Explorer 5.5+ 的 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")。

假如這三種方法都不起做用，那麼這個用戶所使用的瀏覽器已經太過期了，他或她會看到一個聲明此瀏覽器不支持 AJAX 的提示。

二、操做XMLHttpRequest 對象：

（1）設置請求參數（請求方式，請求頁面的相對路徑，是否異步）

（2）設置回調函數，一個處理服務器響應的函數，使用 onreadystatechange ，相似函數指針，如
　　xmlHttp.onreadystatechange=function()
　　{
　　　　// 咱們須要在這裏寫一些代碼
　　}
（3）獲取異步對象的readyState 屬性：該屬性存有服務器響應的狀態信息。每當 readyState 改變時，onreadystatechange 函數就會被執行。
　　readyState 屬性可能的值：
　　0 請求未初始化（在調用 open() 以前）
　　1 請求已提出（調用 send() 以前）
　　2 請求已發送（這裏一般能夠從響應獲得內容頭部）
　　3 請求處理中（響應中一般有部分數據可用，可是服務器尚未完成響應）
　　4 請求已完成（能夠訪問服務器響應並使用它）

在調用時，咱們要向這個 onreadystatechange 函數添加一條 If 語句，來測試咱們的響應是否已完成（意味着可得到數據）：

　　xmlHttp.onreadystatechange=function()
　　{
　　　　if(xmlHttp.readyState==4)
　　　　{
　　　　　　// 從服務器的response得到數據
　　　　}
　　}

（4）判斷響應報文的狀態，若爲200說明服務器正常運行並返回響應數據，

（5）讀取響應數據，能夠經過 responseText 屬性來取回由服務器返回的數據。

　　
　　xmlHttp.onreadystatechange=function()
　　{
　　　　if(xmlHttp.readyState==4){

　　　　　　if(xmlHttp.status==200){

　　　　　　　　document.myForm.time.value=xmlHttp.responseText;

　　　　　　}
　　　　}
　　}

 示例以下：

<script type="text/javascript">

function ajaxFunction()
 {
 　　var xmlHttp=GetXmlHttpObject（）;//定義XMLHttpRequest對象
　　

　　xmlHttp.open("GET","****.ashx",true)//設置請求方法，請求的目標頁面，以及是否異步

　　xmlHttp.setRequestHeader("If-Modified-Since","0");

　　xmlHttp.onreadystatechange=function(){　　//定義XMLHttpRequest對象的onreadystatechange屬性 　　

　　　　if(xmlHttp.readyState==4)　{　　　//判斷XMLHttpRequest對象的狀態 
　　　　　　if(xmlHttp.status==200){

　　　　　　　　document.myForm.time.value=xmlHttp.responseText;//經過XMLHttpRequest對象的responseText屬性獲取回傳的數據 
　　　　　　} 
　　　　}
　　} 
　　xmlHttp.send(null);//發送異步請求 
} 

</script> 
<form name="myForm"> 
　　用戶: <input type="text" name="username" onkeyup="ajaxFunction();" /> 　　時間: <input type="text" name="time" /> </form> </body> </html>