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");
  }
}

本函數可以被反覆調用。

2、設定工作參數及綁定函數：

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的代碼。

二、POST請求怎麼辦？

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