我眼中瀏覽器的助手——AJAX

       所謂AJAX就是:”Asynchronous JavaScript and XML”，中文意思：非同步JavaScript和XML。AJAX並不單單指一門技術，可以簡單的理解成Javascript+XMLHttpRequest+Css+伺服器端 的集合。

       ajax是瀏覽器端的一項技術，在使用者不知情的情況下悄悄的把使用者在瀏覽器端發給伺服器的請求發送出去，並悄悄的把資料內容帶回給瀏覽器，通過瀏覽器解析這些資料最後呈現給使用者看。而且使用ajax技術在實現分頁顯示資料的功能時可以實現請重新整理的效果，減少瀏覽器向伺服器的互動次數，減輕伺服器的壓力，並且在瀏覽器端減少使用者的等待時間，幾乎實現肉眼以為是在本地取資料那麼流暢的效果。（關於用ajax實現分頁的功能下次再介紹）

       AJAX技術的核心是XMLHttpRequest。

      今天拋開一些官方的解釋，小談一下我眼中理解的AJAX。

      之前當我們通過瀏覽器端向伺服器提交某種請求的時候，瀏覽器會親自跑去向伺服器提交，在伺服器尚未返迴響應請求的過程中我們（使用者）一直都都在等著，什麼操作也做不了，直到瀏覽器拿到從伺服器返回的資料後才能解析給我們看，假設：伺服器當時比較繁忙，不顧的處理瀏覽器提交過去的請求，那麼我們就得一直在瀏覽器端等待，這樣的網頁相信你下次一定不會再想開啟。

       相反，有了AJAX後，AJAX相當於瀏覽器的一個助手，當客戶在瀏覽器端向伺服器端提交某種請求的時候，瀏覽器會把向伺服器端提交請求並返回資料這項任務指派給ajax去做，而在 ajax返回從伺服器端帶回的資料前瀏覽器可以繼續跟使用者互動，這樣就節省了使用者的時間，不至於使使用者一直乾等著某一項請求的完成。（跟前面介紹過的多線程相比，ajax就相當於一個新的線程，當瀏覽器把這個新的線程派出去後，還可以跟客戶互動）

 

那麼ajax這個小助手是如何為瀏覽器辦事的呢？下面用一個派助手去買啤酒的例子來解釋一下：

1.首先要叫一個助手過來（建立一個XMLHttprequest對象）

   XMLHttpRequest xhr=new XMLHttpRequest();

2.告訴助手用什麼方式去、去哪裡買啤酒，並讓助手帶上錢（調用XMLHttpRequest對象的open()方法，並設定它的參數）

  xhr.open("get","url",true);

 open()方法有三個參數，第一個參數：使用get方式提交還是用post方式提交；第二個參數：提交到的頁面url路徑；第三個參數：是否使用非同步方式執行（true和false）。

3.出發前告訴助手買回來的啤酒應該放哪（設定onreadystatechange事件並觸發一個回呼函數，並根據readyState屬性值的不同來判斷ajax是否順利從瀏覽器帶回了資料）

  xhr.onreadystatechange=function (){

      if(xhr.readyState==4){

         var result=xhr.responseText;        

         alert(xhr.);

       }

 }

4.告訴助手可以出發了（send()方法）

  xhr.send(null);

 關於send()方法裡面的參數，當上面的open()方法的第一個參數是get的時候send()方法裡面的參數應該是null，因為即便是要傳遞某些資料給請求的頁面也是在url路徑後面寫資料，而不用在send()裡面傳參;比如要傳一個name=admin的值給url則：

xhr.open("get","url?neme=admin",true);

xhr.send(null);

  而當我們在 open()方法中設定成post方式時，則所要傳遞的資料就應該在send()方法中寫了,還是上面的例子：

xhr.open("post","url",true);

xhr.send(name=admin);

這樣就把一個最簡單的委派助手（ajax）買啤酒的任務實現了。 

註：在使用ajax實現非同步過程中還有好多的情況發生，比如XMLHttpRequest對象的Status屬性要是返回伺服器端的狀態不是200（200表示伺服器已經找到瀏覽器請求的頁面並返回給瀏覽器相應的內容）的時候應該如何處理，readyState屬性共有5個值（從0到4）分表表示正處在什麼情況下，要是想傳遞多個資料給伺服器端應該怎麼傳，等……

  上面的這些情況還需要根據我們的需求來做相應的判斷。