love fish大鵬一曰同風起，扶搖直上九萬里

公告

留言簿(15)

隨筆分類(493)

隨筆檔案(498)

相冊

MIX

閱讀排行榜

常用鏈接

統計

隨筆 - 500
文章 - 0
評論 - 155
引用 - 0

積分與排名

積分 - 527207
排名 - 91

friends

ajax技術基礎

ajax技術是采用javascript作為客戶端實現的語言，xml作為其通訊的機制，因此有人將ajax描述為：ajax=javascript+xml是很有道理的．ajax的最大優點就是異步處理，相對于以往的web技術采用的請求全刷新機制，它更加親近于C/S結構的軟件，給用戶的是一種很有快感的東東．其實現的方式是采用一個叫做XMLHttpRequest的對象進行交互的，因為歷史的原因，各種瀏覽器對javascript的處理方式不一致，使得生成XMLHttpRequest對象的方法也有差別，但大體上有兩種方式：微軟的ActiveX控件和XMLHttpRequest本地對象，代碼如下：

?1

function?createXMLHttpRequest()?{
?2

??var?xmlreq?;
?3

??if?(window.XMLHttpRequest)?{
?4

????//?在非Microsoft瀏覽器中創建XMLHttpRequest本地對象
?5

????xmlreq?=?new?XMLHttpRequest();
?6

??}?else?if?(window.ActiveXObject)?{
?7

????//通過MS?ActiveX創建XMLHttpRequest
?8

????try?{
?9

??????//?嘗試按新版InternetExplorer方法創建
10

??????xmlreq?=?new?ActiveXObject("Msxml2.XMLHTTP");
11

????}?catch?(e1)?{
12

??????//?創建請求的ActiveX對象失敗
13

??????try?{
14

????????//?嘗試按老版InternetExplorer方法創建
15

????????xmlreq?=?new?ActiveXObject("Microsoft.XMLHTTP");
16

??????}?catch?(e2)?{
17

????????//?不能通過ActiveX創建XMLHttpRequest
18

??????}
19

????}
20

??}
21

??return?xmlreq;
22

}
23

代碼中看到排除上述的兩種情況，方法createXMLHttpRequest得到的結果將是null，也就是說無法得到XMLHttpRequest的實例，也就無法使用ajax技術。但書中一直沒有給出此時將如何處理，難道，世界上的瀏覽器就他們兩種？或者，對于那些第三類的用戶，我們要么勸勉其使用Internet Explorer或firefox等，要么對其采取拋棄的態度（這些也許是世界規范化組織該考慮的問題）。創建了XMLHttpRequest實例之后就采用類似于java（awt）中的事件處理機制，如下代碼：

?1

function?myFunction(){
?2

????//?獲取一個XMLHttpRequest實例
?3

????var?req?=?createXMLHttpRequest();
?4

????//?設置用來從請求對象接收回調通知的句柄函數
?5

????req.onreadystatechange?=handlerFunction(req);
?6

????//?HTTP?POST聯接,第三個參數表示請求是異步的
?7

????req.open("POST",?"handleRequest.action",?true);
?8

????//?指示請求體包含form數據
?9

????req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
10

????req.send(null);
11

}

其中req.onreadystatechange引用的類似C++中的函數的指針，即handlerFunction，其代碼如下：

?1

function?handlerFunction(req){
?2

????//?如果請求的狀態是“完成”
?3

????if?(req.readyState?==?4){
?4

????????//?檢查是否成功接收了服務器響應
?5

????????if?(req.status?==?200){
?6

????????????//?處理事件,這里省略
?7

????????????

?8

????????}
?9

????????else{
10

????????????//?有HTTP問題發生
11

????????????alert("HTTP?error:?"+req.status);
12

????????}
13

????}
14

}

與頁面的交互，可能是這樣的一個事實，用戶點擊某個按鈕，激發myFunction方法的執行，此方法將創造一個XMLHttpRequet實例，并將處理事件的機制委托給onreadystatechange所指定的方法（本文中即為：handlerFunction）監聽,handlerFunction將判斷傳進來的XMLHttpRequet實例的運行狀態，對應其狀態實現相應的業務邏輯。
　　上面沒有列出ajax的xml通信機制，這里簡要的說明一下：
　　發信：通過串的連接構造出一個滿足xml格式的字符串，如String s="<project><person><name>"+"passyt"+"<\/name><\/person><\/project>";然后通過XMLHttpRequet實例req的send傳送到服務器端，如req.send(s);
??????? 收信：通過req.responseXML得到所謂的Dom實例然后按照標準的文檔對象模型的方法取值顯示到頁面。
???　說明：在發信中，xml消息的構成通過字符串的連接完成，很容易因為筆誤而產生錯誤，?ajax基礎教程?一書給出了另一種基于簡單通信的消息格式json，網上有其免費的版本和詳細說明，這里不再敷言。
　　服務器端獲取xml的信息格式后做相關的業務處理，然后生成xml消息返回給客戶端，客戶端利用javascript中的dom支持訪問所在的xhtml，進行頁面的局部刷新。這里的服務器端技術可以是java,php或者是.net，總之只要是支持xml通信機制的服務器技術都可以。
　　利用ajax技術可以創造出類似桌面軟件的web頁面，顯得與眾不同，因而顯得特別酷，又加之google的推廣以及幾個大型網站的宣傳，ajax就作為一種“新瓶裝老酒”的“新技術”出現在我們的生活中，并激起了所謂的web2.0熱潮。但顯而易見的是，ajax的編碼量很可能大大的超出了其他的頁面表現技術，而作為一種弱類型語言無法得到對應的自動代碼產生工具，對于我們程序員而言是極其痛苦的，另外它也帶來了很大的安全隱患，因為其代碼可見性，使得編寫頁面的javascript腳本將對程序員做出更高的要求。
　　但是，好的是，現在已經有越來越多的ajax框架來減少javascript對瀏覽器的依賴以及提高ajax的開發效率。?ajax基礎教程?一書就給出了一個框架

posted on 2006-05-26 10:19 liaojiyong 閱讀(456) 評論(1) 編輯收藏所屬分類: Ajax


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




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: window.dialogArguments Ajax框架 JavaScript的系統函數學習（轉） js如何判斷輸入是否為正整數？（轉） JavaScript的數值處理對象學習 (轉) 正則表達式說明 JavaScript中文版(入門) JavaScript的一些實用技巧( 轉) 使用 Google Web Toolkit 開發 Ajax(轉) javascript常用到的一些方法（轉）

# re: ajax技術基礎 2006-11-15 17:31 www