熱烈祝賀臺州維博網絡的站長論壇隆重上線!(2012-05-28)    熱烈慶祝偉大的祖國60周年生日 點擊進來我們一起為她祝福吧(2009-09-26)    站長論壇禁止發布廣告,一經發現立即刪除。謝謝各位合作!.(2009-08-08)    熱烈祝賀臺州網址導航全面升級,全新版本上線!希望各位一如既往地支持臺州網址導航的發展.(2009-03-28)    臺州站長論壇恭祝各位新年快樂,牛年行大運!(2009-01-24)    臺州Link正式更名為臺州網址導航,專業做以臺州網址為主的網址導航!(2008-05-23)    熱烈祝賀臺州Link資訊改名為中國站長資訊!希望在以后日子里得到大家的大力支持和幫助!(2008-04-10)    熱烈祝賀臺州Link論壇改名為臺州站長論壇!希望大家繼續支持和鼓勵!(2008-04-10)    臺州站長論壇原[社會瑣碎]版塊更名為[生活百科]版塊!(2007-09-05)    特此通知:新臺州站長論壇的數據信息全部升級成功!">特此通知:新臺州站長論壇的數據信息全部升級成功!(2007-09-01)    臺州站長論壇對未通過驗證的會員進行合理的清除,請您諒解(2007-08-30)    臺州網址導航|上網導航誠邀世界各地的網站友情鏈接和友誼聯盟,共同引領網站導航、前進!(2007-08-30)    禁止發廣告之類的帖,已發現立即刪除!(2007-08-30)    希望各位上傳與下載有用資源和最新信息(2007-08-30)    熱烈祝賀臺州站長論壇全面升級成功,全新上線!(2007-08-30)    
便民網址導航,輕松網上沖浪。
臺州維博網絡專業開發網站門戶平臺系統
您當前的位置: 首頁 » AJAX編程 » 怎樣使用AJAX進行WEB應用程序開發

怎樣使用AJAX進行WEB應用程序開發

論壇鏈接
  • 怎樣使用AJAX進行WEB應用程序開發
  • 發布時間:2010-04-02 16:21:49    瀏覽數:6195    發布者:abcdef133    設置字體【   
一、簡介

AJAX,一個異步JavaScript和XML的縮略詞,是最近出來的技術詞語。異步意味著你可以經由超文本傳輸協議(HTTP)向一個服務器發出請求并且在等待該響應時繼續處理另外的數據。這就意味著,例如,你可以調用一個服務器端腳本來從一個數據庫中以XML方式檢索數據,把數據發送到存儲在一個數據庫的服務器腳本,或者簡單地裝載一個XML文件以填充你的Web站點而不需刷新該頁面。然而,在這項新技術提供巨大能力的同時,它也引起了在"Back"按鈕問題上的很多爭論。本文將幫助你確定在真實世界中何時使用AJAX是最佳選擇。

首先,我假定你對縮略詞JavaScript和XML部分有一個基本了解。盡管你能通過AJAX請求任何類型的文本文件,但是我在此主要集中討論XML。我將解釋怎樣在真實世界中使用AJAX以及怎樣在一個工程中評估它的價值。在你讀完本文后,你將會明白什么是AJAX,在什么情況下,為什么以及怎樣使用這項技術。你將要學習,在保持給用戶提供直觀體驗的同時怎樣創建對象,發出請求以及定制響應。

我已創建了一個適合于本文的示例工程(你可以下載源代碼)。這個示例實現了一個簡單的請求-它裝載一個包含頁面內容的XML文件并且分析數據以把它顯示在一個HTML頁面中。

二、常規屬性和方法

表1和2提供了一個屬性和方法的概述- 它們為Windows Internet Explorer 5,Mozilla,Netscape 7,Safari 1.2,和Opera等瀏覽器所支持。

表1屬性

屬性 描述

onreadystatechange 當請求對象變化時該事件處理器激活。

readyState 返回指示對象的當前狀態的值。

responseText 來自服務器的響應串的版本 。

responseXML 來自服務器的響應的DOM兼容的文檔對象。

status 來自服務器的響應的 狀態碼。

statusText 以一個字符串形式返回的狀態消息。

表2方法

方法 描述

Abort() 取消當前HTTP請求。

getAllResponseHeaders() 檢索所有的HTTP頭值。

getResponseHeader("headerLabel") 從響應體中檢索一個HTTP頭部的值。

open("method","URL"[,asyncFlag[,"userName" [,"password"]]]) 初始化一個MSXML2.XMLHTTP請求,并從該請求指定方法,URL和認證信息 。

send(content) 發送一個HTTP請求到服務器并接收響應。

setRequestHeader ("label", "value") 指定一個HTTP頭的名字。

三、從哪里開始

首先,你需要創建XML文件-后面我們對之進行請求并作為頁面內容進行分析。你正在請求的文件必須與 目標工程駐留在相同的服務器上。

下一步,創建發出請求的HTML文件。當頁面通過使用頁面主體 中的onload方法進行加載時,該請求發生。接著,該文件需要一個有ID的div標簽,這樣當我們準備好要 顯示內容時就可以對之進行定位。當你做完所有這些,你的頁面的主體上去,如下:

<body onload="makeRequest('xml/content.xml'); ">

<div id="copy"></div>

</body>


四、創建請求對象

為了創建請求對 象,你必須檢查是否瀏覽器使用XMLHttpRequest或ActiveXObject。這兩個對象之間的主要區別在于使用 它們的瀏覽器。Windows IE 5 及以上版本使用ActiveX對象; 而Mozilla,Netscape 7,Opera和Safari 1.2及以上版本使用XMLHttpRequest對象。另外一個區別是你創建對象的方式:Opera,Mozilla, Netscape和Safari允許你簡單地調用該對象的構造器,但是Windows IE需要把對象的名字傳遞到ActiveX 構造器中。下面是怎樣創建代碼來決定要使用哪個對象和怎樣創建它的示例:

if (window.XMLHttpRequest)
{ request = new XMLHttpRequest(); }
else if (window.ActiveXObject)
{ request = new ActiveXObject("MSXML2.XMLHTTP"); }


五、發出請求

現在既然你已經創建了你的請求對象,那么你已經為向服務器發 出請求作了準備。創建一個到事件處理器的參考以聽取onreadystatechange事件。然后,該事件處理器 方法將在狀態發生變化時作出響應。一旦我們完成請求,我們就開始創建這個方法。打開連接以GET或 POST一個定制的URL-在此是一個content.xml,并且設置一個布爾定義-是否你想要進行異步調用。

現在到了發出請求的時間了。在這個示例中,我使用了null,因為我們使用的是GET; 為了使用 POST,你需要使用下面這個方法發出一個查詢串:

request.onreadystatechange = onResponse;

request.open("GET". url, true);

request.send (null);


六、定制加載和錯誤處理消息

你為onreadystatechange方法創建的事件處理器 正是集中進行加載和處理錯誤的場所,F在到了考慮用戶并針對他們與之交互的內容的狀態提供反饋的 時候了。在這個實例中,我針對所有的裝載狀態代碼提供反饋,并且也對最經常發生的錯誤處理狀態代 碼提供一些基本的反饋。為了顯示請求對象的當前狀態,readyState屬性包括顯示在下表中的一些值。

值 描述

0 未初始化,對象沒有用數據進行初始化。

1 裝載中,對象正在裝載它 的數據。

2 裝載結束,對象完成了它的數據的裝載。

3 可交互,用戶能與對象交互了, 盡管它還沒有裝載結束。

4 完成,對象已經完全被初始化。

W3C中有很長的一串有關HTTP 狀態代碼的定義。我選擇了兩個狀態代碼:

200:請求成功了。

404:服務器沒有找到與所 請求的文件相匹配的任何東西。

最后,我檢查任何另外的狀況代碼-它們將生成一個錯誤并提供 一個一般錯誤信息。下面是一個代碼示例-你可以用之來處理這些情況。注意,我在定位我們前面在HTML 文件的主體中創建的div ID并且對它應用裝載和/或錯誤信息-通過innerHTML方法-這個方法用于設置在 div對象的開始和結束標簽之間的HTML:

if(obj.readyState == 0)
{ document.getElementById('copy').innerHTML = "Sending Request..."; }
if(obj.readyState == 1)
{ document.getElementById('copy').innerHTML = "Loading Response..."; }
if(obj.readyState == 2)
{ document.getElementById('copy').innerHTML = "Response Loaded..."; }
if(obj.readyState == 3)
{ document.getElementById('copy').innerHTML = "Response Ready..."; }
if(obj.readyState == 4){
if(obj.status == 200){ return true; }
else if(obj.status == 404)
{
// 添加一個定制消息或把用戶重定 向到另外一個頁面
document.getElementById('copy').innerHTML = "File not found";
}
else
{document.getElementById('copy').innerHTML = "There was a problem retrieving the XML."; }
}


當狀況代碼為200 時,這意味著請求成功。下面開始進行響應了。

七、分析響應

當你準備好分析來自請求 對象的響應時,真正的工作開始了,F在你可以用你請求的數據開始工作。僅為測試目的,在開發期間 ,可以使用responseText和responseXML屬性來顯示來自響應的原始數據。為了存取XML響應中的結點, 首先使用你創建的請求對象,定位到responseXML屬性以檢索(你可能已經猜測出來)來自響應的XML。定 位到documentElement-它檢索一個到XML響應的根結點的參考。

var response = request.responseXML.documentElement;


現在既然你有了到響應的根結點的參考,那么你可以使 用getElementsByTagName()以結點名字來檢索childNodes。下面一行用一個頭部的nodeName來定位一個 childNode:

response.getElementsByTagName('header') [0].firstChild.data;


使用firstChild.data可以允許你存取該元素中的文本:

response.getElementsByTagName('header')[0].firstChild.data;


下面是怎樣 創建這些代碼的完整的例子:

var response = request.responseXML.documentElement;
var header = response.getElementsByTagName ('header')[0].firstChild.data;
document.getElementById ('copy').innerHTML = header;


八、需求分析

現在既然你知道怎樣使用 AJAX的基礎知識,那么下一步就是決定是否在一工程使用它。須記住的最重要的事情是,在你還沒有刷 新頁面時你無法使用"Back"按鈕。為此,可以先專注于你的工程中的一小部分-它能夠從使用 這種類型的交互中受益。例如,你可以創建一個表單-它在用戶每次輸入一個輸入字段或一個字母時查詢 一個腳本以便進行實時校驗。你可以創建一個拖放頁面-在釋放一項時,它能夠把數據發送到一個腳本中 并把該頁面的狀態保存到一個數據庫中。使用AJAX的理由毫無疑問是存在的; 并且這種使用無論對開發 者還是用戶都會帶來益處; 這全依賴于具體的條件和執行情況。

還有其它方法可用來解決 "Back"按鈕的問題,例如使用Google Gmail-它現在能夠為你的操作提供一種撤消功能而不刷 新該頁面。以后還會出現許多更具創造性的例子-它們將通過提供給開發者創建獨特實時的體驗的手段給 用戶帶來更大的好處。

九、結論

盡管AJAX允許我們構建新的和改進的方式來與一個WEB頁 面進行交互; 但是作為開發者,我們需要牢記產品是不考慮技術的; 它關心的是用戶以及其如何與用戶 進行交互。沒有了用戶群,我們構建的工程毫無用處;谶@個標準,我們就能評估應該使用什么技術 以及何時使用它們來創建對相應用戶有用的應用。
娛樂休閑專區A 影視預告B 音樂咖啡C 英語階梯D 生活百科
網頁編程專區E AMPZF HTMLG CSSH JSI ASPJ PHPK JSPL MySQLM AJAX
Linux技術區 N 系統管理O 服務器架設P 網絡/硬件Q 編程序開發R 內核/嵌入
管理中心專區S 發布網址T 版主議事U 事務處理
陕西快乐10分玩法 泸州老窖股票 青海快3基本走势图 广西快三和值遗漏 辽宁快乐12走势图前主三 云南时时彩中奖规则 体彩安徽11选五开奖结果查询 福利彩票上海快3开奖结果 股票融资程序 山东11选5遗漏爱彩乐 安徽快三开奖结果一定牛