[搬家文]ajax初體驗

最近在項目中遇到些棘手的事，常規方法解決起來頗為不易，只好動用新式武器ajax。

這個ajax我還真是頭幾次使用，不過它的魅力使我著迷。有了它，頁面向伺服器請求一些芝麻大小事的時候，終於不用把全部表單囫圇吞棗式的全部提交一次，而只要提交需要的資訊，在頁面的局部地方改變一下好了。

如果看到這篇文章的你不是編程人員，那麼想象一下那些體育網站的nba文字直播(注意是文字)吧，以前的網頁都是靜態，稍有某處不同，則整個頁面需要重新重新整理一次；而文字直播可以在其他地方完全不動的情況下，不斷滾動播出新資訊，另外比分板也會即時更新，呵呵，那就是ajax了。(滾動的比賽資訊部分，有可能用的iframe,但是比分板一定是ajax,因為我也沒有做過這方面，不好下定論)

至於ajax如何在我項目裡面應用的，就不用多說了，只是ajax最關鍵的一個東西——XMLHttpRequest的特性需要說一說。

首先要從瀏覽器擷取這個XMLHttpRequest對象，因為瀏覽器種類繁多，各瀏覽器對這個對象命名也不同，用如下代碼在跨瀏覽器時比較可靠：

 

var xmlHttp;
   try{
      xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');
   }
   catch(e)
   {
      try{
       xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
      }
      catch(e){
       try{
        xmlHttp = new XMLHttpRequest();
       }
       catch(e){}
      }
   }

 

3層嵌套的try - catch，挺醜的，但實用。

擷取這個XMLHttpRequest對象了以後，就該在互動方面做點什麼了，於是

用XMLHttpRequest.open()方法可以建立一個請求，也就好比，前面的try - catch使你拿到了槍，而open()方法則是上了膛。只等發射了。 open()方法還帶4個參數，其中包括一個uri，可以指向一個action，這樣你就能靠這個action在servlet上幹任何複雜的邏輯，並返回本次請求所需的結果。有關open()方法的詳細可以在其他學習和說明文檔中找到用法。

當然不是所有槍都是上了膛就馬上發射，還得確定目標，也就是要搞清楚到底幹什麼，要殺誰。XMLHttpRequest也是。XMLHttpRequest由一個回呼函數，onreadystatechange(),在這個函數中寫好內容，當XMLHttpRequest的每一次 準備狀態(下面提到)改變，都會調用它

onreadystatechange()裡面也是慣用法

 

xmlHttp.onreadystatechange = function(){
      if(xmlHttp.readyState == 4)
      {
       if(xmlHttp.status == 200){
      document.all.filetable.deleteRow(currRow.rowIndex);//執行刪除
       }
       else{
        alert("error");
       }
      }
   }

 

readyState 是一個XMLHttpRequest的準備狀態，當它等於4的時候，說明結果已經產生並返回用戶端，隨時準備使用了，所以一般都是檢查它為4的時候，進行進一步操作。

status 是XMLHttpRequest在得到響應之後的一個狀態，200的意思是"OK"，說明一切沒問題，於是可以接上實際的操作了(伺服器端的邏輯操作竊誶懊嫠 祏ri指向的action中處理，使用者瀏覽器端的顯示，就是靠這塊被兩個if包起來的地方了)，一般這裡還會用到一個xmlHttp.responseText的屬性，它是由action從伺服器端返回的結果，這裡返回是null,所以沒有用到，注意的是，responseText在readyState =4時候，才是完整可用的。

最後，也是最關鍵的一步，就是xmlHttp.send(null);null 的地方還可以添一些資料，會以post方式提交。

上膛的槍，總算扣動了扳機。

(注意onreadystatechange()方法是回呼函數，不會主動執行，而send是把xmlHttp產生的請求真正提交的方法，在此後，每當xmlHttp的readystate改變，都會調用一次onreadystatechange())

PS:

接著還有一個小問題，就是javascript中的引號，javascript中對於雙引號和單引號好像都是一視同仁的，就當做是一個東西，所以每次看到javascript,總覺得裡面引號好亂。不過有個關鍵點是，在嵌套的時候，單雙引號要互動使用，而不能 " " abcd" " 或者 ' 'abcd' '，因為引號不像括弧，開始和結束的引號都是一樣的，所以" " abcd" "會被當成" " abcd" "，' 'abcd' '同理。用" 'abcd' "或 ' "abcd" '都是正確的