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

ajax|request

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

本节讲述将初始化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对象,作为独立文件使用更灵活。

<

时间: 2024-11-03 02:34:20

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

Ajax Hacks chm文件与源代码 下载_AJAX相关

Aajax探密书籍,收集了100条提示和技巧,并涵盖了Aajax技术的精华. Ajax Hacks  By Bruce W. Perry  本地下载

AJAX Hacks之Hack 4. 接收XML格式的数据

ajax|xml|数据 AJAX Hacks之Hack 4. 接收XML格式的数据 当前的许多交换数据的技术都使用XML格式的数据,那是因为XML格式的数据被广泛的使用和支持.因此,不同用户可以已有的技术来生成.发送.接收XML数据而不需要使用别的工具转换数据的格式. 一个典型的例子就是一个GPS设备可以在任何地方共享它需要的数据.无论是在远行.或是户外活动,当把设备插入到计算机的UBS接口后,就可以向web发送数据了.GPS软件被设置为默认支持XML格式的数据.而web也使用xml格式的数据.

AJAX Hacks 之HACK2. 使用Request对象与服务器进行数据传递

ajax|request|对象|服务器|数据 AJAX Hacks 之HACK2. 使用Request对象与服务器进行数据传递 以传统的传送表单数据的方式开始,本节介绍使用post方法发送数据,与服务器进行通信,而在这个过程中不会出现页面刷新现象.然后显示服务器相应的信息. 页面很简单,就是一个表单,要求用户输入姓名.性别.国家或地区.输入完毕用户可以提交表单.(具体图示见原文) 页面的HTML代码如下:"http://www.w3.org/TR/1999/REC-html401–1999122

AJAX Hacks 之HACK1. 检测浏览器的兼容性

ajax|浏览器 AJAX Hacks 之HACK1. 检测浏览器的兼容性 本节介绍如何使用JavaScript 建立起IE或Mozilla浏览器相应的请求对象.客户端使用的浏览器是各种各样的.因此也有不同的请求对象.如在Firefox, Netscape, Safari,Opera中是XMLHttpRequest.IE则是Microsoft.XMLHTTP 或 Msxml2.XMLHTTP. 使用AJAX的第一步是检测客户浏览器的类型,根据相应的类型取得request 对象.下面就是取得该对象

原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)_javascript技巧

由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(uri, data, cb) { $.ajax({ url: uri, type: 'POST', dataType: 'json', data: data, }) .done(cb) .fail(function() { console.log("error"); }) .always(f

基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)

首先需要导入一些js和css文件 <link href="__PUBLIC__/CSS/bootstrap.css" rel="external nofollow" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="__PUBLIC__/CSS/fileinput.css" rel="

Ajax hacks 之绪论:告别页面刷新

ajax|刷新|页面         曾记得INTERNET被用户称作"world wide wait"吗? web又回到了新石器时代了么? 在许多应用中, web仍然没有得到很大的改变.充斥着form.按钮,页面转移,等待,页面刷新,纠正错误,点击.等待--这可真够受的.  现在的许多网站,例如许多经过精心设计的网站得到了很大的提高.需要更多的用户响应,这样浏览器会在服务器处理完以后才得到响应. 例如google map就是这样工作的:客户机会将所有的信息缓存起来,这样用户在移动地图

PHP+Ajax异步带进度条上传文件实例_php实例

最近项目中要做一个带进度条的上传文件的功能,学习了Ajax,使用起来比较方便,将几个方法实现就行. 前端引入文件 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min

用ajax动态加载需要的js文件_AJAX相关

习惯了用java,在java中,需要某个类直接import就可以了,所以做javascript的时候也想实现这个效果. 前段时间,用了下dojo,里面的dojo.require的功能很不错,一看代码,晕了,一大堆东西,唉-还是自己写个简单点的,dojo.require可以引入包,我就只做一个导入js文件的. 开始用的document.write,执行顺序不对了,这是在后面进行导入,而我们总是在前面执行中就需要导入的js,这样,执行中就会报"某某未定义",就是顺序问题了. 接着,我就想用