本節講述將初始化request對象的代碼從其他代碼中抽取出來,作為一個單獨的JavaScrip文件來使用。
當一個AJax應用程序很大的時候,理清每部分的功能是很有必要的。所以把管理XMLHttpRequest對象的代碼作為一個獨立的JS文件保存,如果某個頁面使用到它,就將它加載近來,這樣做無疑更容易管理。當代碼需要修改時,只需修改該文件就是。
hack將所有的和request-object相關的代碼放在了http_request.JS文件中,任何使用XMLHttpReques的頁面都可以通過以下代碼調入該文件:
下面是該文件的代碼,帶注釋共有71行:
var request = null;
/* Wrapper function for constructing a Request object.
Parameters:
reqType: HTTP 請求類型GET 或 POST.
url: 服務器URL
asynch: 是否發送異步請求。
respHandle: 處理響應的函數.
如果有第五個參數,那就是post的數據*/
function httpRequest(reqType,url,asynch,respHandle){
//Mozilla浏覽器
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
//如果請求類型是POST,
//第五個參數是post的數據
if(reqType.toLowerCase() != “post” {
initReq(reqType, url,asynch,respHandle);
} else {
//post的數據
var args = arguments[4];
if(args != null && args.length > 0){
initReq(reqType,url,asynch,respHandle,args);
}
}
} else if (window.ActiveXObject){
request=new ActiveXObject(“Msxml2.XMLHTTP”;
if (! request){
request=new ActiveXObject(“Microsoft.XMLHTTP”;
}
if(request){
//如果請求類型是POST,
//第五個參數是post的數據
if(reqType.toLowerCase() != “post” {
initReq(reqType,url,asynch,respHandle);
} else {
var args = arguments[4];
if(args != null && args.length > 0){
initReq(reqType,url,asynch,respHandle,args);
}
}
} else {
alert(“Your browser does not permit the use of all ”+
“of this application‘s features!”;}
} else {
alert(“Your browser does not permit the use of all ”+
“of this application‘s features!”;}
}
/* Initialize a Request object that is already constructed */
function initReq(reqType,url,bool,respHandle){
try{
/* 設定處理響應的函數*/
request.onreadystatechange=respHandle;
request.open(reqType,url,bool);
//如果請求類型是POST,
//第五個參數是post的數據
if(reqType.toLowerCase() == “post” {
request.setRequestHeader(“Content-Type”,
“application/x-www-form-urlencoded; charset=UTF-8”;
request.send(arguments[4]);
} else {
request.send(null);
}
} catch (errv) {
alert(
“The application cannot contact ”+
“the server at the moment. ”+
“Please try again in a few seconds.\n”+
“Error detail: ”+errv.message);
}
}
應用程序通過這段代碼調用httpRequest()函數(4個或5個參數(post))。在其他hack中會出現許多這樣的例子:
var _url = "http://www.parkerriver.com/s/sender";
var _data=“first=Bruce&last=Perry&middle=W”;
httpRequest(“POST”,_url,true,handleResponse,_data);
注釋詳細的描述了各參數的意思,最後一個參數表示伴隨post請求發送的數據。
注意
POST HTTP請求在請求頭信息中包含了post的數據。而GET 中是以URL中的name/values的形式出現。
如果代碼沒有使用POST,那麼客戶代碼只使用前4個參數。第四個參數也可以是客戶代碼中聲明了的函數名稱(即:在http_request.JS文件以外出現的其它響應處理函數),或者是一個字面上的函數。接下來的可選的是在一個函數調用中定義一個函數,盡管這樣會使代碼難看並難以閱讀。然而,在HTTP響應處理很短而簡單時使用這樣的方式是很明智的,例如:
var _url = "http://www.parkerriver.com/s/sender";
//a debugging set-up
httpRequest(“POST”,_url,true,function(){alert(request.responseText);});
httpRequest()可以引發相同的浏覽器檢測並為IE設置XMLHttpReques,initReq()函數處理設置request對象的第二步:指定onreadystatechange 處理函數,調用open()和 send()方法創建一個HTTP請求。代碼使用try/catch 語句來處理相關的異常或錯誤。例如:如果代碼調用open方法發生錯誤時,try/catch語句將捕獲該錯誤,並且彈出窗口。
最後,伴隨著web頁面對http_request.JS的引入,request變量可以作為全局變量在任何文件中使用。
request須作為一個保留變量名,因為會出現在局部變量來干擾作為全局變量的request,如下述代碼:
function handleResponse(){
//supercedes the imported request variable
var request = null;
try{
if(request.readyState 4){ if(request.status 200){...
讓讀者更清晰的了解如何取得request對象,作為獨立文件使用更靈活。