Ajax的簡單理解

Ajax能夠不用從新加載整個頁面，與服務器交換數據並更新頁面的局部內容。減小服務器端的壓力。

Ajax的原理簡單來講經過XmlHttpRequest對象來向服務器發異步請求，從服務器得到數據，而後用javascript來操做DOM而更新頁面。這其中最關鍵的一步就是從服務器得到請求數據。

首先，咱們先來看看XMLHttpRequest這個對象的屬性。

它的屬性有：

  　　onreadystatechange  每次狀態改變所觸發事件的事件處理程序。

  　　responseText     從服務器進程返回數據的字符串形式。

  　　responseXML    從服務器進程返回的DOM兼容的文檔數據對象。

  　　status           從服務器返回的數字代碼，好比常見的404（未找到）和200（已就緒）

  　　status Text       伴隨狀態碼的字符串信息

  　　readyState       對象狀態值

　　　　0 (未初始化) 對象已創建，可是還沒有初始化（還沒有調用open方法）

　　　　1 (初始化) 對象已創建，還沒有調用send方法

　　　　2 (發送數據) send方法已調用，可是當前的狀態及http頭未知

　　　　3 (數據傳送中) 已接收部分數據，由於響應及http頭不全，這時經過responseBody和responseText獲取部分數據會出現錯誤，

　　　　4 (完成) 數據接收完畢,此時能夠經過經過responseXml和responseText獲取完整的迴應數據

Ajax的建立過程：

一、建立XMLHttpRequest對象；

二、建立一個http請求,用open(method,url,async)；

• method：請求的類型；GET 或 POST
• url：文件在服務器上的位置
• async：true（異步）或 false（同步）                            

三、設置響應http狀態變化的函數；

四、發送http請求；

五、獲取異步調用返回的數據；

六、使用JS和DOM實現局部刷新。

代碼實現：

var xmlhttp;

  function createXMLHttpRequest(){
    var xmlhttp;
    if (window.XMLHttpRequest){
      xmlhttp=new xmlHttpRequest(); //Netscape瀏覽器中的建立方式
    }else{
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//IE瀏覽器的建立方式
    }
    //異步調用服務器段數據
    if(xmlhttp!=null){
      xmlhttp.open("GET/POST",url,true);  //建立HTTP請求
      xmlhttp.onreadystatechange=httpStateChange;//設置HTTP請求狀態變化的函數
      xmlhttp.send(null);  //發送請求
    }else{
      alert("不支持XHR")
    }
  }

   //響應HTTP請求狀態變化的函數
  function httpStateChange(){//判斷異步調用是否完成
    if(xmlhttp.readyState==4 && xmlhttp.status==200){
      //判斷異步調用是否成功,若是成功開始局部更新數據
        //code...
    }
  }