DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> AJAX Hacks 之HACK3. 使用獨立的文件來取得http request
AJAX Hacks 之HACK3. 使用獨立的文件來取得http request
編輯:AJAX詳解     

本節講述將初始化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對象,作為獨立文件使用更靈活。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved