JavaScript之Ajax之美~

標籤：stat   blog   是什麼   example   取消   顯示   var   程式   互動   

　　JavaScript之Ajax之美~

　　曾經有一段時期，因為開發人員對JavaScript的濫用導致其遭受了一段時間的冷門時期，不被大家看好，後來，到了2005年，Google公司的很多技術都是用了ajax之後，JavaScript才又火熱了起來，可以說，是Ajax拯救了JavaScript，就目前來說，熟練使用Ajax已經成為了所有web開發人員必須掌握的技能。那麼Ajax又是什麼呢？ 它的作用是什麼呢?

第一部分：Ajax簡介

　　Ajax即Asynchronous JavaScript +XML的簡寫，這一技術能夠向伺服器請求額外的資料而無需卸載頁面，會帶來更好地使用者體驗。Ajax的核心是XMLHttpRequest對象（簡稱XHR，這一對象受到chrome、safari、FF、opera等主流瀏覽器的支援），這是由微軟首先引入的一個特性，IE 瀏覽器使用 ActiveXObject，後來瀏覽器供應商都提供了相同的實現。XHR對象的存在，意味著當使用者點擊之後，不必重新整理頁面也可以從後台取得新資料，也就是說，可以試用XHR對象取得新資料，然後通過DOM方式將新資料插入到頁面中，達到對網頁的某部分進行更新的效果。值得注意的是：雖然，Ajax中包含了xml，但是我們在無需重新整理頁面就得到的資料不一定是xml資料。

 

第二部分：XHR對象的建立

　　上面講到，Ajax的核心是XMLHttpRequest對象，那麼我們如何建立一個XMLHttpRequest對象呢？

　　首先，我們應當知道：所有瀏覽器都支援XMLHttpRequest對象，其中IE5和IE6使用ActiveXObject對象。並且現在所有瀏覽器（IE7+、FireFox、Chrome、Safari以及Opera）均內建了XMLHttpRequest對象。於是建立XMLHttpRequest對象的文法是：

var xhr = new XMLHttpRequest（）;

　  

　　剛剛提到老版本的Internet Explorer(IE5和IE6)使用的是ActiveXObject對象，所以文法是：

var axo = new ActiveXObject("Microsoft.XMLHTTP");

　　注意：其中傳入的“Microsoft.XMLHTTP”是不能改變的。

 

　　於是，為了應對所有的現代瀏覽器（包括IE5和IE6），請首先檢查是否支援XMLHttpRequest對象：如果支援，則建立XMLHttpRequest對象；如果不支援，則建立ActiveXObject對象：

var xmlHttp=null;if(window.XMLHttpRequest){       xmlHttp=new XMLHttpRequest();}else{    xlmHttp=new ActiveXObject("Microsoft.XMLHTTP");}

　　關於這個應對所有現代瀏覽器的代碼應當注意：

• 我將xmlHttp的值設定為null，是因為null值表示一個Null 物件指標，而這也正是使用typeof操作符檢測null值是會返回“object”的原因，因此：如果定義的變數準備在將來用於儲存對象，那麼最好將該變數初始化為null而不是其他值。
• 之所以可以試用window.XMLHttpRequest來檢測其是否存在，是因為XMLHttpRequest是window對象的屬性。

 

第三部分：XHR對象的用法(屬性與方法等)

　　上面兩部分，我們介紹XHR對象是什麼以及怎麼建立，這一部分我將談一談XHR對象的用法。

　　⑴.open（）方法

　　既然XHR是一個對象，那麼它就一定有自己的屬性和方法。在使用XHR對象時，要調用的第一個方法是open()。它接受3個參數：

1. 要發送的請求的類型：get、post、put、delete等等。
2. 請求的URL（這個URL既可以是絕對路徑，也可以是相對路徑）。
3. 是否非同步發送請求的布爾值：true表示非同步發送請求，false表示同步發送請求。

　  舉例如下：

xhr.open("get","example.php",true);

　　此時，這段代碼會啟動一個針對example.php的GET請求。注意：open()方法並不會真正的發送請求而只是啟動一個請求以備發送。那麼怎麼才能發送特定的請求呢，這是就要用到send()方法了。

　　

　　⑵.send（）方法

　　剛剛說到open()方法，只是開啟（open），還沒有發送，而send才是真正地發送。它接受一個參數：

• 作為請求主體發送的資料

　　注意：如果不需要通過請求主體發送資料，則必須傳入null。一般get請求不需要傳入參數，而對於post請求，如果需要像 HTML 表單那樣 POST 資料，請使用 setRequestHeader() 來添加 HTTP 頭。然後在 send() 方法中規定您希望發送的資料。這一部分會詳細介紹，下面舉一個簡單例子：

 

xhr.open("get","example.php",true);xhr.send(null);

 

　　

 

　　(3).XHR對象的幾個屬性

　　通過send()發送之後，會接受到響應，響應的資料會自動填滿XHR對象的屬性。主要有以下幾種：

• responseText:作為響應主體被返回的文本
• responseXML：如果響應的內容類型是"text/xml"或"application/xml",這個屬性中將儲存包含著相應資料的XML DOM文檔。
• status：響應的http狀態
• statusText:Http狀態的說明

　　在接收到響應後，一般是先檢查status屬性，來確定響應是否成功返回，一般狀態碼200表示成功（以2開頭即表示成功），這是responseText就可以被訪問了。而狀態碼為304表示請求的資源並沒有被修改，可以直接使用瀏覽器中緩衝的版本，因此這種響應也是有效。於是可以通過下面的代碼檢測這兩種狀態：

xhr.open("get","example.php",false);xhr.send(null);if((xhr.status>=200&&xhr.status<300)||xhr.status==304){alert(xhr.responseText);}else{alert("Request waw unseccessful:"+"xhr.status");}

　　

　　XHR對象的readystate屬性

　　使用Ajax我們當然還是希望發送非同步請求的：如果發送同步請求，那麼一旦網卡住了，這個頁面就不會有任何反應而是繼續等待響應，但是發送非同步請求，即使網卡住，也不用擔心，因為它是非同步。而readystate屬性可以檢測到請求/響應過程的當前活動階段。它有5個取值，分別如下：

 

　　  

　 關鍵：只要readystate的值改變（比如從0變為1，從1變為2等等），那麼每次地改變都會觸發readystatechange事件。並且可以通過這個時間檢測每次狀態變化後的readystate的值。當值為4是最重要的，因為這事所有的資料已經準備就緒。看一個例子：

var xhr=new XMLHttpRequest();xhr.open("get","example.php",false);xhr.onreadystatechange=function(){if(readystate==4){if((xhr.status>=200&&xhr.status<300)||xhr.status==304){alert(xhr.responseText);}else{alert("Request waw unseccessful:"+"xhr.status");}}};xhr.send(null);

　　　注意以下幾點：

• xhr.onreadystatechange前面有一個on，這是因為我們使用的是DOM0級方法為XHR對象添加了時間處理常式，沒有利用addEventListener這種DOM2級方法，是因為並非所有的瀏覽器都支援DOM2級方法。
• 這個例子中我們沒有使用this對象，是因為onreadystatechange時間處理常式的範圍問題。如果使用this對象，在有的瀏覽器中會導致函數執行失敗或者導致發生錯誤。因此，使用實際的XHR對象執行個體便利那個是一種較為可靠的方式。

 

　　(4).abort（）方法

　　在接受到響應之前，我們還可以使用abort()方法來取消非同步請求，如下所示：

xhr.abort();

　　在調用了這個方法之後，XHR對象會停止觸發事件，而且也不再允許訪問任何與響應有關的對象屬性。

 

第四部分：HTTP頭部資訊

　　因為使用Ajax和後台互動，那麼就一定離不開http協議了。而HTTP請求和響應都會帶有相應的頭部資訊。

　　在預設情況下，在發送XHR請求的同時，還會發送以下頭部資訊。

• Accept:瀏覽器能夠處理的內容類型
• Accept-Charset:瀏覽器能夠顯示的字元集
• Accept-Encodding:瀏覽器能夠處理的壓縮編碼
• Accept-Language:瀏覽器當前設定的語言
• Connection:瀏覽器與伺服器之間連結的類型
• Cookie：當前版面設定的任何Cookie
• Host：發出請求的頁面所在的域
• Referer：發出請求頁面的URI
• User-Agent:瀏覽器的使用者代理程式字串   

　　下面這張圖片是我的chrome瀏覽器開發人員工具下的network中截屏所得，大家可以對照參考：

　

 

JavaScript之Ajax之美~