天馬行空

There Can Be Miracles WHEN YOU BELIEVE

留言簿(1)

隨筆分類(5)

隨筆檔案(4)

統計

隨筆 - 4
文章 - 0
評論 - 0
引用 - 0

我的第一個Ajax例程

一、Ajax并不是像Java或Dot Net一樣是一項具體的新的技術，它是以下幾種技術的綜合應用：
1.       JavaScript:我們一期學的那些JavaScript還不足以應付Ajax的應用。所以應該多找一些JavaScript的高級教程來看看。
2.       Dom：二年學的如果理解得好的話，夠用了
3.       Css：如果向界面好看滴話，這個相當重要！
4.       XMLHttpRequest對象：相當于一個新的類。熟悉api的話很簡單的。
5.       XML：和王老師講的一樣，既可以做數據存儲，又可以做數據傳輸用。（我一般都是用作數據傳輸）

二、應用Ajax程序的執行流程
        通常的情況：在我們編寫基于MVC模式的程序時，過程往往是：客戶端輸入信息，提交一個表單到控制器，控制器執行相應的操作，把結果寫到響應里，返回給客戶端。
在完成這一整套流程之前，用戶是不能進行其他操作的。用戶必須等待服務器正確地返回了響應之后，才能進行別的操作。
        而使用Ajax設計的情況是：客戶端輸入信息，在后臺通過javascript異步的把請求提交到控制器。在控制器處理這個請求時，客戶端依然可以執行其他的操作。并不需要等待上一次的請求得到響應。
        那么為什么可以異步的提交請求呢？這就是XMLHttpRequest這個對象所提供的功能。Ajax的核心對象。（XHR對象早在1999年就隨著IE出現了，從這一點就可以看出，Ajax不是什么了不起的東西）。下面我們來看看這個神奇的東東。

三、XMLHttpRequest?。?！
這三個感嘆號不是隨便打的，用紅色顯示也不是一時興起。原因只有一個：XMLHttpRequest（簡寫成：XHR）是整個Ajax技術的最核心的一個對象。客戶端與服務器的交互都是通過這個對象來進行的。不過不要因此覺得他很難。他和我們學過的千千萬萬個類一樣。我們只要熟悉他的API，就可以靈活的運用它了。

眾所周知，類是由屬性和方法組成的。下邊就是XHR的屬性：
readystate:請求的狀態
0：未初始化
1：正在加載
2：加載完成
3：正在交互（發送請求成功，正在接收響應數據）
4：結束（數據已經成功接收）

status：Http狀態碼

statusText：Http狀態碼所對應的文字
常見的狀態碼和文字：
200：成功
202：接受成功，但處理未完成
400：錯誤的請求
404：未找到請求的文件
500：服務器內部錯誤

responseXML：響應的內容，表現為XML格式
Web程序是基于請求-響應模式的，響應是由服務器發送給客戶端的一些數據，這個屬性中存儲了響應的數據

onreadystatechange：事件
當XHR的狀態改變時觸發的事件。最常用的情況是：當我們向服務器發送了某個請求，服務器正確響應后。我們可以設置一個函數來處理這次響應。
以上是XHR最常用的幾個屬性。一會再例子里還會見到他們。下邊是常用方法：

open(method,url,asyschronous,user,password);
這是open方法，調用這個方法後，readystate會從0變為1；
如果仔細看這個方法的參數列表的話，可能會發現一個問題：參數缺少數據類型。如果你夠聰明的話，一定會想到，這是一個在javascript中執行的方法。js的變量是不區分數據類型的。

method ：請求的類型，get或post

url ：請求的地址，可以是相對路徑或絕對路徑?？梢詫懗桑?font style="line-height: 1.3em" face="Times">test.jsp?user=dodo&pass=123456這種類型的帶查詢字符串的格式。

asyschronous ：是否異步調用。true為異步，false為同步。
user，password：如果路徑是需要用戶名和密碼的加密路徑，在這兩個參數中提供。一般來說沒什么用。
---------------------------------------------------------------------------------------------------------
send(databody);
向服務器發送數據
databody：要發送的數據
如果不需要發送數據的話直接寫：null
abort();
取消當前請求
以上就是XHR常用的屬性和方法了。大家可以記記個大概。在例子中我會繼續提到他們的。

四、例子的說明
這是一個很小的例子。只是說明了Ajax程序的工作流程。我們要做的是把xml中的內容顯示在網頁上。

首先，和java一樣，要使用對象，就要先實例化它。
在這，我們使用javascript語言來實現。

function createXHR(){
  if(window.ActiveXObject){
    XHR = new ActiveXObject("Microsoft.XMLHTTP");
  }else if(window.XMLHttpRequest){
    XHR = new XMLHttpRequest();
  }
}

       window.ActiveXObject用來檢測當前頁面是不是支持ActiveX技術，如果支持的話那么客戶端就是IE。
       window.XMLHttpRequest用來檢測瀏覽器能不能直接創建XHR對象。如果能的話，就直接new出來。
這么做的原因是：雖然web遵循的是同一套接口和標準，但是生產瀏覽器的廠家實現的方式卻不一樣。比如IE和FireFox等。
在IE中XHR是通過ActiveX控件的形式提供的。而其他瀏覽器則罷XHR作為了內置對象來實現。因此在不同的瀏覽器中，實例化XHR的方式也不一樣。

現在我們得到了一個XHR對象。那么他現在的readystate是為0的。下面，我們來調用它的open方法。

       XHR.open("get","someURL",true);

調用open方法的后，readystate會變成1。向服務器發送請求的準備工作都做好了

XHR.send(null);

調用send方法，發送請求。

發送請求后，就等著服務器傳回響應了。那么我們怎么知道服務器有沒有響應呢？

//處理響應的函數
function handleChange(){
  //當Http狀態為200并且readystate為4時，才正確的返回了響應。
  if(XHR.readystate==4){
    if(XHR.status==200){
      //獲取XHR返回的XML格式的響應信息
      xmldoc = XHR.responseXML;

      //解析XML文檔取得用戶名和密碼
      var un = xmldoc.getElementsByTagName("name")[0].text;
      var pass = xmldoc.getElementsByTagName("pass")[0].text;

      //驗證用戶名和密碼
      if(document.getElementById("username").value == un){
        if(document.getElementById("password").value == pass){
          //用innerHTML屬性來實現無狀態刷新
          document.body.innerHTML = "驗證成功！";
        }
      }
    }
  }
}

請注意一開始的兩個if判斷。通過這兩個判斷的組合，我們就能確定服務器已經正確的響應了我們的請求了。
然后就可以開始處理響應信息。

到這里，整個Ajax請求和獲取效應的流程就結束了。至于如何處理響應信息就要看實際情況了。

posted on 2007-12-02 02:49 Fenris 閱讀(660) 評論(0) 編輯收藏所屬分類: 有關前臺

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: SAFARI CSS HACK REDUX 一次性為所有元素添加自定義的tooltip 我的第一個Ajax例程這些天做一個網頁，發現了js和css一些有趣的問題。

天馬行空

導航

留言簿(1)

隨筆分類(5)

隨筆檔案(4)

統計

最新評論

我的第一個Ajax例程