10.入門第十課:AJAX原理及實戰技術（正式版）

1、須要一個套路：

每次都寫這麼一大堆的代碼，是否是要規範一下呢？

三方面的工做，寫成三個函數，工做會有條理些：

一、建立XHR對象（比上一版進行了加強）

var xhr;//全局變
function createXhr(){
    if (window.XMLHttpRequest)
    {// 針對 IE7+, Firefox, Chrome, Opera, Safari
      xhr=new XMLHttpRequest();
    }
else
  {// 針對 for IE6, IE5
      xhr=new ActiveXObject("Microsoft.XMLHTTP");
  }
}

本函數能夠被反覆調用。

二、設定工做參數及綁定函數：

button.onclick=function(){
createXhr();//很方便吧！
xhr.open("GET","url?參數1=值1");//設定工做參數
xhr.onreadystatechange=callback;//設定回調函數，"callback"是函數名
    xhr.send(null);
}

button是舉個例子，表明界面中的一切可能事件！

3，回調函數的定義：

function callback(){
    if(xhr.status==200){//表明着服務器正常響應（還記得404嗎）
        if(xhr.readyState==4){
            alert(xhr.responseText);//對返回結果的一切可能處理，都在此處
        }
    }
}

以上三部分代碼組合到一塊兒，就是所有AJAX的代碼。

2、POST請求怎麼辦？

xhr.open("POST","url");//此時請求參數不附加在url後面
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//設定請求頭，必須作！
xhr.send("fname=Bill&lname=Gates");//請求參數在這裏