跨浏览器的设置innerHTML方法

      2019-10-23 01:51      编程语言

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(url);//同步POST方法获取vardata='...';varresponse=urlget(url,data);//异步POST方法获取varcallback=function(response){//...}varret=urlget(url,data,callback);//设置请求头部varheaders=["User-Agent:Modello.ajax'surlget"];varret=urlget(url,data,callback,headers);//使用命名通道varchunnel='...';varret=urlget(url,data,callback,headers,chunnel);//使用Response对象if(response.getStatus()==200){alert(response.getText());}//设置跨域中转proxy路径
Define('URLGET_PROXY','/jsproxy.php');

//强大的urlget方法
varurlget=Class.get('modello.ajax.Urllib').urlget;

varurl='...';

//同步GET方法获取
varresponse=urlget(url);

//同步POST方法获取
vardata='...';
varresponse=urlget(url,data);

//异步POST方法获取
varcallback=function(response){
//...
}
varret=urlget(url,data,callback);

//设置请求头部
varheaders=["User-Agent:Modello.ajax'surlget"];
varret=urlget(url,data,callback,headers);

//使用命名通道
varchunnel='...';
varret=urlget(url,data,callback,headers,chunnel);

//使用Response对象
if(response.getStatus()==200){
alert(response.getText());
}

urlget各个参数的解释如下:

url:目标资源的URL地址。
data:POST数据。如果data为空,则使用GET方法获取。
callback:异步获取回调函数。如果callback为空,则使用同步获取。
headers:附加请求头部。这是一个数组,每一项为字符串,设置一行头部,字符串末尾不可以带回车换行。
chunnel:命名通道。用于重用某个连接通道。
urlget的返回值:

如果是同步获取,成功返回Response对象,失败返回false。如果是异步获取,成功返回true,并且在获取后调用回调函数,失败返回false。如果指定了命名通道,但该通道正在被其它请求占用,同步、异步都统一返回false。

回调函数的参数:

response:Response对象。
chunnel:调用时指定的命名通道。
Response对象
Response对象用于访问响应的各个数据项。它提供接口如下:

response.getStatus();//HTTP响应码(整数)response.getStatusText();//响应码的字面解释response.getHeader(key);//由key指定的响应的头部数据response.getAllHeaders();//响应的所有头部数据(不包含状态行)response.getRawHeader();//响应的原样头部数据(包含状态行)response.getText();//响应的体部数据response.getXML();//响应的体部数据格式化为XmlDocument对象response.getStatus();//HTTP响应码(整数)
response.getStatusText();//响应码的字面解释
response.getHeader(key);//由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(url);/**设置获取方法。目前支持:GET,POST,HEAD*/request.setMethod(method);/**设置获取方法。目前支持:GET,POST,HEAD*/request.setData(data);/**设置回调函数*回调函数的原型为:*varcallback=function(response){};*/request.setHandler(handler);/**设置请求头部*/request.setHeader(key,value);/**增加请求头部*/request.addHeader(header);/**发送请求*async为true,使用异步方式*默认使用同步方式*调用成功,同步方式返回response对象,异步方式返回true*调用失败,统一返回false*/request.open([async]);/**查询当前请求的状态*返回一个字符串描述,可能为:*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(url);

/*
*设置获取方法。目前支持:GET,POST,HEAD
*/
request.setMethod(method);

/*
*设置获取方法。目前支持:GET,POST,HEAD
*/
request.setData(data);

/*
*设置回调函数
*回调函数的原型为:
*varcallback=function(response){};
*/
request.setHandler(handler);

/*
*设置请求头部
*/
request.setHeader(key,value);

/*
*增加请求头部
*/
request.addHeader(header);

/*
*发送请求
*async为true,使用异步方式
*默认使用同步方式
*调用成功,同步方式返回response对象,异步方式返回true
*调用失败,统一返回false
*/
request.open([async]);

/*
*查询当前请求的状态
*返回一个字符串描述,可能为:
*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='http://user:pass@host:port/path?query#flagment';varret=Class.get('modello.ajax.Urllib').urlparse(url);//这时候//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='http://www.example.com/about/about.html';varurl2='/index.html';varurl=Class.get('modello.ajax.Urllib').urljoin(url1,url2);//这时候//url=='http://www.example.com/index.html'/*
*urlparse:URL分析函数
*/
varurl='http://user:pass@host:port/path?query#flagment';
varret=Class.get('modello.ajax.Urllib').urlparse(url);
//这时候
//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='http://www.example.com/about/about.html';
varurl2='/index.html';
varurl=Class.get('modello.ajax.Urllib').urljoin(url1,url2);
//这时候
//url=='http://www.example.com/index.html'

总结
Modello.ajax提供的所有东西已经描述完毕,希望它能帮助你加速Ajax应用的开发;)


上一篇:发现的以前不知道的函数

下一篇:没有了