如何使用AJAX技術構建優秀的Web應用程式

來源:互聯網
上載者:User
一、 簡介

  非同步JavaScript+XML(即Ajax),是一種建立互動式web應用程式的Web開發技術。這種程式使用JavaScript和XML從用戶端提交伺服器請求,且整個過程中僅需要交換少量的資料而不必提交整個web頁面。因此,這樣的程式將更快和更具響應性,並將成為新一代客戶機-伺服器系統的重要基礎技術之一。你可以在網站http://www.google.com/webhp?complete=1&hl=en處看到一種良好的AJAX實踐技術展示。在此頁面中,如果你把任何字母輸入到文字框內,那麼隨後就會出現一個下拉式清單方塊,其中的內容直接來自於伺服器而不必提交整個頁面。AJAX的核心是XMLHttpRequest對象。用戶端能夠在後台檢索並直接提交XML資料。為了把檢索的XML資料轉換成可產生的HTML內容,需要依賴於用戶端文件物件模型(DOM)讀取XML文檔結點樹並且組成使用者看得見的HTML元素。其實,AJAX並非象HTML,DHTML等一樣的單一技術,它結合了不同的技術:

  ·XMLHttpRequest對象被使用於與web伺服器非同步地交換資料。

  ·XML被普遍用作把資料轉送回伺服器的格式(儘管任何格式都能使用,例如普通文本,HTML等)。

  ·如果使用XML作為轉換格式,那麼DOM通常與如JavaScript這樣的用戶端指令碼語言一起使用來動態地顯示和描述互動資訊。

  ·XHTML(或HTML),CSS用於標記和資訊格式化。

   二、 XMLHttpRequest對象

  從曆史來看,是微軟首先在其Internet Explorer 5 for Windows中以一個ActiveX對象形式實現了XMLHttpRequest對象。隨後,由Mozilla工程的工程師實現了Mozilla 1.0(和Netscape 7)的一種相容的本機版本;而稍後,蘋果公司在其Safari 1.2上也實現了相同的工作。其實,在W3C標準的文件物件模型(DOM)Level 3載入與儲存規範中,也提到了類似的功能。現在,它成為一種事實上的標準,並開始在以後發行的大多數瀏覽器中得到實現。

  (一) 建立對象

  XMLHttpRequest對象的建立方式因瀏覽器不同而有所不同。對於Safari和Mozilla來說,其建立方式如下所示:

var req = new XMLHttpRequest();

  對於Internet Explorer 5.0+(指5.0及更高版本),則要把對象名傳遞到ActiveX建構函式中:

var req = new ActiveXObject("Microsoft.XMLHTTP");

  該對象的方法控制所有的操作,而其屬性儲存區從伺服器返回的各種資料片斷,例如XMLHttpObject.responseText包含從伺服器返回的xml或字串值。

  (二) 方法

  在Windows IE 5.0+、Safari 1.2和Mozila中支援的XMLHttpRequest對象的方法列舉如下:

方法 描述
abort() 取消當前的請求。如果你在一個不處理請求(readyState 0或4)的對象上調用它,"神秘的事情"發生了。
getResponseHeader("headerLabel") 返回單個頭標籤的字串值
getAllResponseHeaders() 以一個串形式返回完整的頭(標籤和值)集合
open("method","URL"[,asyncFlag[, "userName"[,"password"]]]) 指派目標URL、方法及一個懸掛請求的其它可選屬性
send(content) 傳輸請求。(可選擇地)其中可以加入可寄送的字串或DOM對象資料
setRequestHeader("label","value") 把一個標籤/值對指派給要發送的請求中的頭部

  在上面的方法中,open和send方法是最重要的。下面,讓我們首先從應用程式的觀點來討論open方法。

var req;
………………………
req = new ActiveXObject("Microsoft.XMLHTTP");
……………
var url="AjaxServer.aspx?PubID="+ID;
……………
//開啟一個到URL的GET請求
req.open("GET",url,true);
//實際發送一個空請求
req.send(null);

   注意

  在這個應用程式範例中,AjaxClient.aspx頁面是使用者介面,AjaxServer.aspx則負責提供每一個使用者請求時的資料。要特別注意的是,AjaxServer.aspx頁面不應該包含任何HTML。你可以測試一下如果頁麵包含HTML將會發生什麼。

  open方法的第一個參數(見上面表格中的Open函數)指示當前操作為一個GET操作或是POST操作。在進行簡單的資料檢索時,一般使用GET。當向外傳輸的資料包大於512位元組且操作包括伺服器端活動(如插入,更新等)時,一般使用Post。接下來,我們看一下"url"參數。這個參數可以是一個完整的url也可以是一個相對url。在上面例子中,使用的是相對的url。"asyncFlag"參數指示在執行send方法後是否立即處理到來的指令碼(這意味著不必等待是否有響應)。最後兩個參數分別是"username"和"password",如果"url"中提供這些資料的話。

  另一個重要的方法是send方法,它實際上使用一個訊息體發送請求。對於本例而言,它只是發送一個空請求。

[
//實際發送一個空請求
req.send(null);
]

  (三) 屬性

屬性 描述
onreadystatechange 每當狀態改變時激發的事件的事件處理器。其中,readyState對象狀態整數含義如下:0=uninitialized1=loading2=loaded3=interactive4=complete
responseText 經伺服器處理後返回的資料的字串版本
responseXML 經伺服器處理後返回的DOM相容的資料文檔對象
status 由伺服器返回的數字代碼,例如404代表"Not Found",200代表"OK"
statusText 伴隨著狀態碼的字串資訊

  在此,應用程式中使用了onreadystatechange:

//這是事件處理器機制;在本例中,"RequestProcessor"即是事件處理器。
req.onreadystatechange=RequestProcessor;

  對於這個應用程式來說,"RequestProcessor"是用戶端的事件處理器。現在,在事件處理器內,使用readyState屬性來獲得各種狀態。值4顯示已經完成某種處理。現在,在處理結果前,你應該檢查狀態或statusText以決定操作成功與否。在這個應用程式中,我是以下面方式實現的:

function RequestProcessor()
{
 //如果readyState處理"Ready"狀態
 if(req.readyState == 4)
 {
  //返回的狀態碼200意味著一切順利
  if(req.status == 200)
  {
   //如果responseText不空
   //req.responseText實際上是一個由AJAXServer.aspx的"Response.Write("" + sbXML.ToString() + "");"方法編寫的字串
   if(req.responseText != "")
   {
    populateList(req.responseXML);
   }
   else
   {
    clearSelect(publishedBooks);
   }
  }
 }
 return true;
}

  注意 對象req被聲明為一個頁面級的變數:

var req = new ActiveXObject("Microsoft.XMLHTTP");

  警告

  請求目的的url必須與用戶端指令碼處於同一個域中。原因是,XMLHttpRequest對象採用與用戶端指令碼一致的封裝技術。在大多數支援這種功能的瀏覽器上,擁有存取XMLHttpRequest對象的指令碼的頁面都需要使用http:協議檢索。這意味著,你無法在一個本地硬碟上(file:協議)進行頁面測試。

   三、 實際問題

  在AJAX中,如果網路或遠程伺服器出現中斷,會發生什麼呢?實際上,存在兩個主要問題;預設地,它們並沒有在XMLHttpRequest對象中得到解決。這兩個主要問題是:

  1.處理延遲:如果網路或遠程伺服器耗費較多時間,那麼這個問題如何與你的AJAX應用程式相聯絡呢?

  2.響應順序:潛在地,網路(或伺服器)會不斷變化。這意味著,響應可能不會以與請求相同的順序返回。

  為了處理上面這兩個問題,程式員必須編寫代碼來解決這個問題。對於第一個問題,一種可能的方案如下所示:

function callInProgress(xmlhttp) {
 switch ( xmlhttp.readyState ) {
  case 1,2,3:
   return true;
   break;
   //Case 4和0
  default:
   return false;
   break;
 }
}

  現在,在調用send()前,我可以先檢查一下是否該對象正處於忙態:

if ( !callInProgress(xmlhttp) ) {
 xmlhttp.send(null);
} else {
 alert("I'm busy. Wait a moment");
}

  (一) 支援Ajax技術的瀏覽器

  ·微軟Internet Explorer版本5.0及以上版本,和基於它的瀏覽器(Mac OS版本不支援)

  ·基於Gecko的瀏覽器,如Mozilla,Mozilla Firefox,SeaMonkey,Epiphany,Galeon和Netscape版本7.1及以上版本

  ·實現KHTML API版本3.2及以上版本的瀏覽器,包括Konqueror版本3.2及以上版本,還有Apple Safari版本1.2及以上版本

  ·Opera瀏覽器版本8.0及以上版本,包括Opera Mobile瀏覽器版本8.0及以上版本

  (二) 不支援Ajax技術的瀏覽器

  ·Opera 7及以下版本

  ·微軟Internet Explorer 4.0及以下版本

  ·基於文本的瀏覽器,如Lynx和Links

  ·沒有可視化實現的瀏覽器

  ·1997年以前的瀏覽器

  (三) 本文應用程式範例特定需求

  軟體要求:

  1.ASP.Net 2.0;

  2.MS SQL Server 2000,並要求相應的pubs資料庫設定;

  3.改變web.config檔案中的DB連接字串("CONN_STRING"鍵)。

<APPSETTINGS>
<ADD value="data source=cal-slcu2-196;Database=pubs;User=sa;PWD=sa" key="CONN_STRING" />
</APPSETTINGS>

  變數或類名應該象上面這樣被包括到<code>標記中。

   四、 總結

  本文概括性地歸納了基於AJAX技術構建下一代流行Web應用程式的主要技術及有關概念,並給出一個完整樣本程式的關鍵片斷的分析。


相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.