DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> 如何使用AJAX技術構建優秀的Web應用程序
如何使用AJAX技術構建優秀的Web應用程序
編輯:AJAX詳解     
一、 簡介

  異步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應用程序的主要技術及有關概念,並給出一個完整示例程序的關鍵片斷的分析。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved