AJAX Hacks 之HACK3. 使用独立的文件来取得http request

<script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

<script type="text/javascript"> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

http://www.66of.com" target=_blank>AJAX http://www.66of.com" target=_blank>http://www.66of.com" target=_blank>HACKs 之http://www.66of.com" target=_blank>HACK3. 使用http://www.66of.com" target=_blank>独立的http://www.66of.com" target=_blank>文件来取得http request

本节讲述将初始化request对象的代码从其他代码中抽取出来，作为一个单独的JavaScrip文件来使用。

当一个http://www.66of.com" target=_blank>AJAX应用程序很大的时候，理清每部分的功能是很有必要的。所以把管理XMLhttprequest对象的代码作为一个http://www.66of.com" target=_blank>独立的js文件保存，如果某个页面使用到它，就将它加载近来，这样做无疑更容易管理。当代码需要修改时，只需修改该文件就是。

http://www.66of.com" target=_blank>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））。在其他http://www.66of.com" target=_blank>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对象，作为http://www.66of.com" target=_blank>独立文件使用更灵活。

< <script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

<script type="text/javascript"> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>