前端——Ajax異步交互

Ajax簡單的異步交互

   ajax簡單的異步交互，能夠先從get方式開始提及

那麼建立一個Ajax與服務器端的異步請求，須要完成三個

步驟一、XMLHttpRequest對象的建立

if(window.XMLHttpRequest){//針對IE7以上 以及標準瀏覽器
    var xhr=new XMLHttoRequest();
}else if(window.ActiveXObject){
    var xhr=new ActiveXObject("Microsoft.XMLHTTP");
}

步驟二、註冊回調函數

xhr.onreadystatechange=callback;
或者xhr.onreadystatechange=function(){
  //codes here  
}

步驟三、設置鏈接信息

xhr.open("GET",url,true)//其中true表示爲異步交互

步驟四、發送數據

xhr.send(null);

ps：同步方式下：send會在服務器返回數據後才執行

異步方式下：send會當即完成執行

function callback(){//註冊回調函數
  //判斷對象的狀態是否交互完成
  if(xhr.readyState==4){
   //判斷http請求是否成功
    if(xhr.status==200){
       //獲取服務器端返回的數據
       var response=xhr.responseText; 
       //能夠顯示在前臺特定的地方 
    }
 }  
}

最後注意一個問題，也是當初測試時候遇到的問題，這種寫好的代碼要在服務器端環境下運行，要將寫好的東西，部署在本機服務器環境下，經過localhost來訪問，方可看到效果，不然會報錯！

第二部分，若是是發送ajax的post異步請求

xmlHttp.onreadystatechange = callback;
        xmlHttp.open("POST",url,true);
        xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
        xmlHttp.send(parameter);

注意以上幾點，必需要設置一個請求的頭文件，send裏面發送一些咱們須要的參數