跨浏览器的设置innerHTML方法_javascript技巧_脚本之家

Ajax是个好东西,但使用起来却不是那么方便。问题总结如下:
在各种浏览器上的创建方式和使用方法不一致
各个浏览器对响应的缓存策略有所不同 浏览器存在跨域获取限制
前两个问题可以通过封装XMLHTTPRequest对象来解决,第三个问题的解决方法有很多中,兼容性和移植性比较好的就是在本域服务器上放置一个中转proxy。Modello.ajax就是提供这套解决方案的工具集。
安装 下载Modello和Mdello.ajax
解压并将modello.js,modello.ajax.js,jsproxy.php这三个文件放到你的服务器任意文档目录中
在html页面中包含modello.js和modello.ajax.js这两个脚本文件 urlget方法
Modello.ajax使用起来非常的简单,请看下面例子:
//设置跨域中转proxy路径Define(‘URLGET_PROXY’,’/jsproxy.php’);//强大的urlget方法varurlget=Class.get(‘modello.ajax.Urllib’).urlget;varurl=’…’;//同步GET方法获取varresponse=urlget;//同步POST方法获取vardata=’…’;varresponse=urlget;//异步POST方法获取varcallback=function{//…}varret=urlget;//设置请求头部varheaders=[“User-Agent:Modello.ajax’surlget”];varret=urlget(url,data,callback,headers);//使用命名通道varchunnel=’…’;varret=urlget(url,data,callback,headers,chunnel);//使用Response对象if==200){alert;}//设置跨域中转proxy路径
Define(‘URLGET_PROXY’,’/jsproxy.php’); //强大的urlget方法
varurlget=Class.get(‘modello.ajax.Urllib’).urlget; varurl=’…’;
//同步GET方法获取 varresponse=urlget; //同步POST方法获取 vardata=’…’;
varresponse=urlget; //异步POST方法获取 varcallback=function{ //… }
varret=urlget; //设置请求头部
varheaders=[“User-Agent:Modello.ajax’surlget”];
varret=urlget(url,data,callback,headers); //使用命名通道
varchunnel=’…’; varret=urlget(url,data,callback,headers,chunnel);
//使用Response对象 if==200){ alert; } urlget各个参数的解释如下:
url:目标资源的URL地址。
data:POST数据。如果data为空,则使用GET方法获取。
callback:异步获取回调函数。如果callback为空,则使用同步获取。
headers:附加请求头部。这是一个数组,每一项为字符串,设置一行头部,字符串末尾不可以带回车换行。
chunnel:命名通道。用于重用某个连接通道。 urlget的返回值:
如果是同步获取,成功返回Response对象,失败返回false。如果是异步获取,成功返回true,并且在获取后调用回调函数,失败返回false。如果指定了命名通道,但该通道正在被其它请求占用,同步、异步都统一返回false。
回调函数的参数: response:Response对象。
chunnel:调用时指定的命名通道。 Response对象
Response对象用于访问响应的各个数据项。它提供接口如下:
response.getStatusresponse.getStatusText();//响应码的字面解释response.getHeader;//由key指定的响应的头部数据response.getAllHeadersresponse.getRawHeaderresponse.getText();//响应的体部数据response.getXML();//响应的体部数据格式化为XmlDocument对象response.getStatus
response.getStatusText();//响应码的字面解释
response.getHeader;//由key指定的响应的头部数据 response.getAllHeaders
response.getRawHeader response.getText();//响应的体部数据
response.getXML();//响应的体部数据格式化为XmlDocument对象
大部分情况下,使用urlget函数足可以应付,并且它是可以跨浏览器,跨域使用的。如果你想做一些更底层的操作,Modello.ajax为你提供两个跨浏览器使用的基类:Connection和Request
Connection类
这是一个静态类,提供跨浏览器的方法返回一个XMLHTTPRequest对象。使用方法如下:
/**成功返回一个跨浏览器版本的XMLHTTPRequest对象,*失败返回null。*/varconn=Class.get(‘modello.ajax.Connection’).get();/*
*成功返回一个跨浏览器版本的XMLHTTPRequest对象, *失败返回null。 */
varconn=Class.get(‘modello.ajax.Connection’).get(); Request类
这是对XMLHTTPRequest对象的封装,提供更加易用的接口并解决浏览器对响应缓存的问题,但不具备跨域获取功能。Request提供的属性和方法如下:
/**类的路径*/varRequest=Class.get(‘modello.ajax.Request’);/**创建实例*url,method,data均为可选参数*/varrequest=newRequest([url[,method[,data]]]);/**设置URL*/request.setURL;/**设置获取方法。目前支持:GET,POST,HEAD*/request.setMethod;/**设置获取方法。目前支持:GET,POST,HEAD*/request.setData;/**设置回调函数*回调函数的原型为:*varcallback=function{};*/request.setHandler;/**设置请求头部*/request.setHeader;/**增加请求头部*/request.addHeader;/**发送请求*async为true,使用异步方式*默认使用同步方式*调用成功,同步方式返回response对象,异步方式返回true*调用失败,统一返回false*/request.open;/**查询当前请求的状态*返回一个字符串描述,可能为:*Uninitialized:未初始化*Loading:初始化*Loaded:发送数据*Interactive:数据传送中*Complete:完成*/request.getState();/**返回当前使用的Connection对象*/request.getConnection();/**返回Response对象*如果当前的请求状态不为Complete,返回null*/request.getResponse();/**中止当前请求*/request.abort();/**清理所有请求头部*/request.reset();/**除了上面的方法,还可以对Request对象设置事件处理函数*总共有下面几种事件*/request.onException=function(){};request.onLoading=function(){};request.onLoaded=function(){};request.onInteractive=function(){};request.onComplete=function(){};/*
*类的路径 */ varRequest=Class.get(‘modello.ajax.Request’); /*
*创建实例 *url,method,data均为可选参数 */
varrequest=newRequest([url[,method[,data]]]); /* *设置URL */
request.setURL; /* *设置获取方法。目前支持:GET,POST,HEAD */
request.setMethod; /* *设置获取方法。目前支持:GET,POST,HEAD */
request.setData; /* *设置回调函数 *回调函数的原型为:
*varcallback=function{}; */ request.setHandler; /* *设置请求头部 */
request.setHeader; /* *增加请求头部 */ request.addHeader; /*
*发送请求 *async为true,使用异步方式 *默认使用同步方式
*调用成功,同步方式返回response对象,异步方式返回true
*调用失败,统一返回false */ request.open; /* *查询当前请求的状态
*返回一个字符串描述,可能为: *Uninitialized:未初始化
*Loading:初始化 *Loaded:发送数据 *Interactive:数据传送中
*Complete:完成 */ request.getState(); /*
*返回当前使用的Connection对象 */ request.getConnection(); /*
*返回Response对象 *如果当前的请求状态不为Complete,返回null */
request.getResponse(); /* *中止当前请求 */ request.abort(); /*
*清理所有请求头部 */ request.reset(); /*
*除了上面的方法,还可以对Request对象设置事件处理函数
*总共有下面几种事件 */ request.onException=function(){};
request.onLoading=function(){}; request.onLoaded=function(){};
request.onInteractive=function(){}; request.onComplete=function(){};
jsproxy
对于跨域调用,Modello.ajax采用在本域服务器设置一个中转proxy的方式。使用proxy方式可以不用对个别浏览器进行特殊设置,不用依赖具体的服务器,并且具备扩展能力等优点。随Modello.ajax工具集提供的proxy用php写成,可运行php的服务器都可以安装。proxy也可以用其它语言编写,Modello.ajax有计划在后续版本中提供python版的jsproxy。下面来描述jsproxy的设计,有需要的朋友可以参考来实现其它语言版本的jsproxy。
jsproxy接收三个POST参数:url,data,headers。url为目标资源的URL地址;data为POST数据,如果为空则使用GET方法获取资源;headers附加的请求头部数据。jsproxy根据这些参数去获取目标资源,然后将收到的响应头部和响应体部全部转发给请求者。jsproxy收到的参数是由Modello.ajax发出的,字符集为UTF-8,处理的时候要注意这点。jsproxy获取到的响应的字符集有很多种可能的,在转发响应之前jsproxy应该自动检测出当前响应的字符集,并在转发的响应头部指明。如果忽律这个步骤,请求者收到的响应有可能是乱码。
urlparse,urljoin函数
urlparse,urljoin这样的URL处理函数在其它脚本语言中很常见,但在JavaScript中却没有。Modello.ajax提供了这两个函数,前面提到的urlget函数内部就使用了这两个函数。下面来解释他们的用法:
/**urlparse:URL分析函数*/varurl=’
*urlparse:URL分析函数 */
varurl=”;
varret=Class.get(‘modello.ajax.Urllib’).urlparse; //这时候
//ret.user==’user’ //ret.pass==’pass’ //ret.host==’host’
//ret.post==’post’,默认为80 //ret.path==’path’,以’/’开头
//ret.query==’query’ //ret.flagment==’flagment’ /*
*urljoin:合并两个URL */
varurl1=”;
varurl2=’/index.html’; varurl=Class.get(‘modello.ajax.Urllib’).urljoin;
//这时候 //url==” 总结
Modello.ajax提供的所有东西已经描述完毕,希望它能帮助你加速Ajax应用的开发;)

发表评论

电子邮件地址不会被公开。 必填项已用*标注