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");//請求參數在這裡