Ajax 架構學習筆記

一.XMLHttpRequest 對象的三個重要的屬性。

onreadystatechange 屬性

onreadystatechange 屬性存有處理伺服器響應的函數。下面的代碼定義一個空的函數，可同時對 onreadystatechange 屬性進行設定：

xmlHttp.onreadystatechange=function()

{

// 我們需要在這裡寫一些代碼

}

readyState 屬性

readyState 屬性存有伺服器響應的狀態資訊。每當 readyState 改變時，onreadystatechange 函數就會被執行。

這是 readyState 屬性可能的值：

狀態	描述
0	請求未初始化（在調用 open() 之前）
1	請求已提出（調用 send() 之前）
2	請求已發送（這裡通常可以從響應得到內容標題部）
3	請求處理中（響應中通常有部分資料可用，但是伺服器還沒有完成響應）
4	請求已完成（可以訪問伺服器響應並使用它）

我們要向這個 onreadystatechange 函數添加一條 If 語句，來測試我們的響應是否已完成（意味著可獲得資料）：

xmlHttp.onreadystatechange=function()

{

if(xmlHttp.readyState==4)

{

// 從伺服器的response獲得資料

}

}

responseText 屬性

可以通過 responseText 屬性來取回由伺服器返回的資料。

二．基本源碼：

var xmlHttp

function showCustomer(str)

{

xmlHttp=GetXmlHttpObject();

if (xmlHttp==null)

{

alert ("Your browser does not support AJAX!");

return;

}

//佈建要求響應的url

var url="getcustomer_xml.asp";

url=url+"?q="+str;

url=url+"&sid="+Math.random();

xmlHttp.onreadystatechange=stateChanged;

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

xmlHttp.send(null);

}

function stateChanged()

{

if (xmlHttp.readyState==4)

{

//responseText 以字串返回 HTTP 響應

//document.getElementById("txtHint").innerHTML=xmlHttp.responseText;

//responseXML 以 XML 返迴響應

//伺服器端ContentType 屬性為 response 對象設定了 HTTP 內容類型。該屬性的預設值是 "text/html"。伺服器端返回responseXML 要把內容類型設定為 XML。

var xmlDoc=xmlHttp.responseXML.documentElement;

document.getElementById("companyname").innerHTML=

xmlDoc.getElementsByTagName("compname")[0].childNodes[0].nodeValue;

document.getElementById("contactname").innerHTML=

xmlDoc.getElementsByTagName("contname")[0].childNodes[0].nodeValue;

document.getElementById("address").innerHTML=

xmlDoc.getElementsByTagName("address")[0].childNodes[0].nodeValue;

document.getElementById("city").innerHTML=

xmlDoc.getElementsByTagName("city")[0].childNodes[0].nodeValue;

document.getElementById("country").innerHTML=

xmlDoc.getElementsByTagName("country")[0].childNodes[0].nodeValue;

}

}

function GetXmlHttpObject()

{

var xmlHttp=null;

try

{

// Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();

}

catch (e)

{

// Internet Explorer

try

{

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

}

catch (e)

{

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

}

}

return xmlHttp;

}

三．Ajax架構：基於瀏覽器的應用程式框架，基於伺服器端的應用程式框架。

1.基於瀏覽器的應用程式框架一般分為兩種：

Aplication frameworks:提供了瀏覽器功能，但其最著名的還是在於通過視窗產生組件建立案頭GUI。 如：DOJO，qooxdoo，JavaFX，YUI，ExtJS(最開始的名字是yui-ext，因為擴充了yui的庫，後來發展為可選擇擴充jquery和prototype就改名字為ext)，Flex（與ExtJS有很多相似），TIBET等。

Infrastructural frameworks:提供基本的架構功能和輕便式瀏覽器端操作，讓開發人員去建立具體應用，主要功能包括：

• • 基於XMLHttpRequest組件的瀏覽器互動功能
  • XML解析和操作功能
  • 根據XMLHttpRequest的返回資訊進行相應的DOM操作
  • 一些特殊情況下，和其他的瀏覽器端技術如Flash（或Java Applets）等集合到一起應用

如：jQuery（代碼量少），prototype，MooTools（功能比prototype強大，設計比prototype完善，從prototype中汲取很多有益的設計理念），Google AJAXSLT，Flash/JavaScript，等。

2.基於伺服器端的應用程式框架通常以下面兩種方式工作(儘管它們根據不同的語言進行了分類) ：

HTML/JS Generation(HTML/JS產生)：通過伺服器端產生HTML和JS代碼在傳遞給瀏覽器端進行直接運行 。如：Ext GWT。

遠程互動：JavaScript調用伺服器端函數(例如調用Java函數)並返回給JavaScript的回調控制代碼，或者請求伺服器端資料資訊，例如Session資訊，資料庫查詢等。 如DWR。