一.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:提供基本的框架功能和輕便式浏覽器端操作,讓開發者去創建具體應用,主要功能包括:
如: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。