天馬行空

There Can Be Miracles WHEN YOU BELIEVE

導(dǎo)航

<

2007年12月

>

日

一

二

三

四

五

六

25

26

27

28

29

30

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

留言簿(1)

隨筆分類(lèi)(5)

隨筆檔案(4)

統(tǒng)計(jì)

隨筆 - 4
文章 - 0
評(píng)論 - 0
引用 - 0

我的第一個(gè)Ajax例程

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

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

三、XMLHttpRequest！！！
這三個(gè)感嘆號(hào)不是隨便打的，用紅色顯示也不是一時(shí)興起。原因只有一個(gè)：XMLHttpRequest（簡(jiǎn)寫(xiě)成：XHR）是整個(gè)Ajax技術(shù)的最核心的一個(gè)對(duì)象。客戶(hù)端與服務(wù)器的交互都是通過(guò)這個(gè)對(duì)象來(lái)進(jìn)行的。不過(guò)不要因此覺(jué)得他很難。他和我們學(xué)過(guò)的千千萬(wàn)萬(wàn)個(gè)類(lèi)一樣。我們只要熟悉他的API，就可以靈活的運(yùn)用它了。

眾所周知，類(lèi)是由屬性和方法組成的。下邊就是XHR的屬性：
readystate:請(qǐng)求的狀態(tài)
0：未初始化
1：正在加載
2：加載完成
3：正在交互（發(fā)送請(qǐng)求成功，正在接收響應(yīng)數(shù)據(jù)）
4：結(jié)束（數(shù)據(jù)已經(jīng)成功接收）

status：Http狀態(tài)碼

statusText：Http狀態(tài)碼所對(duì)應(yīng)的文字
常見(jiàn)的狀態(tài)碼和文字：
200：成功
202：接受成功，但處理未完成
400：錯(cuò)誤的請(qǐng)求
404：未找到請(qǐng)求的文件
500：服務(wù)器內(nèi)部錯(cuò)誤

responseXML：響應(yīng)的內(nèi)容，表現(xiàn)為XML格式
Web程序是基于請(qǐng)求-響應(yīng)模式的，響應(yīng)是由服務(wù)器發(fā)送給客戶(hù)端的一些數(shù)據(jù)，這個(gè)屬性中存儲(chǔ)了響應(yīng)的數(shù)據(jù)

onreadystatechange：事件
當(dāng)XHR的狀態(tài)改變時(shí)觸發(fā)的事件。最常用的情況是：當(dāng)我們向服務(wù)器發(fā)送了某個(gè)請(qǐng)求，服務(wù)器正確響應(yīng)后。我們可以設(shè)置一個(gè)函數(shù)來(lái)處理這次響應(yīng)。
以上是XHR最常用的幾個(gè)屬性。一會(huì)再例子里還會(huì)見(jiàn)到他們。下邊是常用方法：

open(method,url,asyschronous,user,password);
這是open方法，調(diào)用這個(gè)方法後，readystate會(huì)從0變?yōu)?font style="line-height: 1.3em" face="Times">1；
如果仔細(xì)看這個(gè)方法的參數(shù)列表的話(huà)，可能會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題：參數(shù)缺少數(shù)據(jù)類(lèi)型。如果你夠聰明的話(huà)，一定會(huì)想到，這是一個(gè)在javascript中執(zhí)行的方法。js的變量是不區(qū)分?jǐn)?shù)據(jù)類(lèi)型的。

method ：請(qǐng)求的類(lèi)型，get或post

url ：請(qǐng)求的地址，可以是相對(duì)路徑或絕對(duì)路徑。可以寫(xiě)成：test.jsp?user=dodo&pass=123456這種類(lèi)型的帶查詢(xún)字符串的格式。

asyschronous ：是否異步調(diào)用。true為異步，false為同步。
user，password：如果路徑是需要用戶(hù)名和密碼的加密路徑，在這兩個(gè)參數(shù)中提供。一般來(lái)說(shuō)沒(méi)什么用。
---------------------------------------------------------------------------------------------------------
send(databody);
向服務(wù)器發(fā)送數(shù)據(jù)
databody：要發(fā)送的數(shù)據(jù)
如果不需要發(fā)送數(shù)據(jù)的話(huà)直接寫(xiě)：null
abort();
取消當(dāng)前請(qǐng)求
以上就是XHR常用的屬性和方法了。大家可以記記個(gè)大概。在例子中我會(huì)繼續(xù)提到他們的。

四、例子的說(shuō)明
這是一個(gè)很小的例子。只是說(shuō)明了Ajax程序的工作流程。我們要做的是把xml中的內(nèi)容顯示在網(wǎng)頁(yè)上。

首先，和java一樣，要使用對(duì)象，就要先實(shí)例化它。
在這，我們使用javascript語(yǔ)言來(lái)實(shí)現(xiàn)。

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

       window.ActiveXObject用來(lái)檢測(cè)當(dāng)前頁(yè)面是不是支持ActiveX技術(shù)，如果支持的話(huà)那么客戶(hù)端就是IE。
       window.XMLHttpRequest用來(lái)檢測(cè)瀏覽器能不能直接創(chuàng)建XHR對(duì)象。如果能的話(huà)，就直接new出來(lái)。
這么做的原因是：雖然web遵循的是同一套接口和標(biāo)準(zhǔn)，但是生產(chǎn)瀏覽器的廠家實(shí)現(xiàn)的方式卻不一樣。比如IE和FireFox等。
在IE中XHR是通過(guò)ActiveX控件的形式提供的。而其他瀏覽器則罷XHR作為了內(nèi)置對(duì)象來(lái)實(shí)現(xiàn)。因此在不同的瀏覽器中，實(shí)例化XHR的方式也不一樣。

現(xiàn)在我們得到了一個(gè)XHR對(duì)象。那么他現(xiàn)在的readystate是為0的。下面，我們來(lái)調(diào)用它的open方法。

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

調(diào)用open方法的后，readystate會(huì)變成1。向服務(wù)器發(fā)送請(qǐng)求的準(zhǔn)備工作都做好了

XHR.send(null);

調(diào)用send方法，發(fā)送請(qǐng)求。

發(fā)送請(qǐng)求后，就等著服務(wù)器傳回響應(yīng)了。那么我們?cè)趺粗婪?wù)器有沒(méi)有響應(yīng)呢？

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

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

      //驗(yàn)證用戶(hù)名和密碼
      if(document.getElementById("username").value == un){
        if(document.getElementById("password").value == pass){
          //用innerHTML屬性來(lái)實(shí)現(xiàn)無(wú)狀態(tài)刷新
          document.body.innerHTML = "驗(yàn)證成功！";
        }
      }
    }
  }
}

請(qǐng)注意一開(kāi)始的兩個(gè)if判斷。通過(guò)這兩個(gè)判斷的組合，我們就能確定服務(wù)器已經(jīng)正確的響應(yīng)了我們的請(qǐng)求了。
然后就可以開(kāi)始處理響應(yīng)信息。

到這里，整個(gè)Ajax請(qǐng)求和獲取效應(yīng)的流程就結(jié)束了。至于如何處理響應(yīng)信息就要看實(shí)際情況了。

posted on 2007-12-02 02:49 Fenris 閱讀(655) 評(píng)論(0) 編輯收藏所屬分類(lèi): 有關(guān)前臺(tái)

新用戶(hù)注冊(cè) 刷新評(píng)論列表


只有注冊(cè)用戶(hù)登錄后才能發(fā)表評(píng)論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問(wèn) 管理
相關(guān)文章: SAFARI CSS HACK REDUX 一次性為所有元素添加自定義的tooltip 我的第一個(gè)Ajax例程這些天做一個(gè)網(wǎng)頁(yè)，發(fā)現(xiàn)了js和css一些有趣的問(wèn)題。