在Web客戶端使用xmlhttp對象,可以十分方便的和服務器交換數據,我們可以獲取和發送任何類型的數據,甚至二進制數據到服務器上。xmlhttp技術同時也是目前大多數無刷新頁面使用的和服務器交換數據的方式,這種方式比以往的隱藏iframe的方法要方便和經濟的多。
同時讓我們高興得是xmlhttp並不是IE特有的東西,雖然目前還不是W3C的標准,不過IE, Netscape/Mozilla, 和Safari都支持。在IE中我們使用new ActiveXObject('MSXML2.XMLHTTP')或者new ActiveXObject("Microsoft.XMLHTTP")來獲得的xmlhttp對象實例,使用前者還是後者和客戶端機器安裝的MSXML版本有關。在Netscape/Mozilla和Safari中,使用new XMLHttpRequest()來獲得xmlhttp對象實例。比如在IE中,我們通常這樣使用:
var localhost = "http://localhost:7001/ZJYCCCWeb"
var xmlhttp=false;
var result; //返回結果
try {
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) {
}
**/
//處理請求,返回結果
function processRequest(){
if (xmlhttp.readyState==4){
if(xmlhttp.status==200){
//處理結果信息
parseMessages();
}else{
}
}
}
/**
* 處理結果信息
*/
function parseMessages() {
//這步是處理返回的文本信息
result=xmlhttp.responseText;
//這步可以處理返回結果XML文檔
//response = xmlhttp.responseXML.documentElement;
//itemAgentCode = response.getElementsByTagName('AgentCode')[0].firstChild.data;
//alert(itemAgentCode);
}
/******** 以下是對外接口的方法 ********************/
/********描述:獲取坐席狀態列表***********/
/********返回:坐席員編號,坐席狀態;***********/
function GetAgentStatusList () {
var url=localhost+"/jsp/AgentStatus.jsp";
try{
//異步 xmlhttp.open("GET",url,true);
xmlhttp.open("GET",url,false);
xmlhttp.onreadystatechange = processRequest;
xmlhttp.send(null);
}catch(e){}
return result;
}
/*****增加錄音文件*********/
function InsertRecordFile(agentId,customerId,fileName){
var url=localhost+"/jsp/AddRecordFile.jsp?&agentID="+agentId+"&customerID="+customerId+"&fileName="+fileName;
try{
xmlhttp.open("POST",url,false);
xmlhttp.onreadystatechange = processRequest;
xmlhttp.send(null);
}catch(e){}
}
/**************************************************************/
var xmlhttp = null;
try
{
xmlhttp = new ActiveXObject("MSXML2.XMLHTTP");
}
catch(e)
{
try
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e2){}
}
使用xmlhttp對象其實是並不是什麼困難的事,它一共就6個方法8個屬性。不過它最主要的是提供了兩種執行模式:同步模式和異步模式。同步模式可以比較精確的控制程序流程,可是如果服務器的Response太慢,browser會有死掉失去相應的問題;而使用異步模式由於是事件觸發方式控制流程,會給程序運行帶來一些不可與預計的問題,因為你不知道客戶端等待服務器Response的過程中,用戶會在browser裡做什麼操作。
下面是一個同步方式獲取服務器數據的簡單示例:
function GetRemoteData(url)
{
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
try
{
xmlhttp.open('GET', url, false);
if ( xmlhttp.status == 200 )
{
return xmlhttp.responseText;
}
throw '';
}
catch(e)
{
return '';
}
}
XMLHTTP對象的屬性和方法列表(來自IXMLHTTPRequest接口): Name Type Description onreadystatechange N/A 指定當就緒狀態發生改變時調用的事件處理函數,僅用於異步操作 readyState Long 異步操作的狀態:未初始化(0),正在加載(1),已加載(2),交互(3),已完成(4) responseBody Variant 將響應信息正文作為unsigned byte數組返回 responseStream Variant 將響應信息正文作為一個ADO Stream對象返回 responseText String 將響應信息正文作為一個文本字符串返回 responseXML Object 通過XMLDom將響應信息正文解析為XMLDocument對象 status Long 服務器返回的HTTP狀態碼 statusText String 服務器HTTP響應行狀態 Name Desciption abort 取消當前 HTTP 請求 getAllResponseHeaders 從響應信息中檢索所有的標頭字段 getResponseHeader 從響應信息正文中獲得一個 HTTP 標頭值 open(method, url, boolAsync, bstrUser, bstrPassword) 打開一個與 HTTP 服務器的連接 send(varBody) 設定一個請求的標頭字段 setRequestHeader(bstrHeader, bstrValue) 向 HTTP 服務器發送請求。可包含正文。
這裡面顯然就open方法比較麻煩,帶了一大堆參數,它們的含義分別是: Parameter Description method HTTP的通信方式,比如GET, HEAD, POST, PUT, DELETE, CONNECT等 url 接收數據的服務器的URL地址,URL可帶QueryString boolAsync 一個布爾標識,說明請求是否為異步的。如果是異步通信方式,客戶端就不等待服務器的響應;如果是同步方式,客戶機會等到服務器返回消息後才去執行其它操作 bstrUser 用戶ID,用於服務器身份驗證 bstrPassword 用戶密碼,用於服務器身份驗證
異步通訊的示例:
xmlhttp.open("GET", "default.aspx", true);
xmlhttp.onreadystatechange = function()
{
if ( xmlhttp.readyState==4 )
{
alert(xmlhttp.responseText);
}
}
xmlhttp.send(null);
其實使用xmlhttp就這麼簡單,復雜的是服務器端數據的組織方式,而且需要開發人員同時熟悉Client和Server端的開發,才能事半功倍。可是好像說了半天這個玩意兒和xml沒有什麼關系啊,怎麼叫xmlhttp呢?我們注意到response的數據類型中有一個responseXML,不過它解析返回的XMLDocument屬於XMLDOM的內容了,和使用xmlhttp來和服務器通訊的關系並不大,以後再來細說。