现在的位置: 首页 > 综合 > 正文

Ajax跨域工具: Modello.ajax

2013年09月09日 ⁄ 综合 ⁄ 共 6553字 ⁄ 字号 评论关闭
Ajax跨域工具: Modello.ajax

问题
Ajax是个好东西,但使用起来却不是那么方便。问题总结如下:

  • 在各种浏览器上的创建方式和使用方法不一致
  • 各个浏览器对响应的缓存策略有所不同
  • 浏览器存在跨域获取限制

前两个问题可以通过封装 XMLHTTPRequest 对象来解决,第三个问题的解决方法有很多中,兼容性和移植性比较好的就是在本域服务器上放置一个中转 proxy 。Modello.ajax 就是提供这套解决方案的工具集。

安装
下载
ModelloMdello.ajax

解压并将 modello.js, modello.ajax.js, jsproxy.php 这三个文件放到你的服务器任意文档目录中
在 html 页面中包含 modello.js 和 modello.ajax.js 这两个脚本文件
urlget 方法
Modello.ajax 使用起来非常的简单,请看下面例子:

程序代码 程序代码
// 设置跨域中转 proxy 路径
Define('URLGET_PROXY', '/jsproxy.php');

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

var url = '…';

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

// 同步 POST 方法获取
var data = '…';
var response = urlget(url, data);

// 异步 POST 方法获取
var callback = function (response) {
    // …
}
var ret = urlget(url, data, callback);

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

// 使用命名通道
var chunnel = '…';
var ret = urlget(url, data, callback, headers, chunnel);

// 使用 Response 对象
if (response.getStatus() == 200) {
    alert(response.getText());
}// 设置跨域中转 proxy 路径
Define('URLGET_PROXY', '/jsproxy.php');
// 强大的 urlget 方法
var urlget = Class.get('modello.ajax.Urllib').urlget;
var url = '…';
// 同步 GET 方法获取
var response = urlget(url);
// 同步 POST 方法获取
var data = '…';
var response = urlget(url, data);
// 异步 POST 方法获取
var callback = function (response) {
    // …
}
var ret = urlget(url, data, callback);
// 设置请求头部
var headers = ["User-Agent: Modello.ajax's urlget"];
var ret = urlget(url, data, callback, headers);
// 使用命名通道
var chunnel = '…';
var ret = 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();        // 响应的体部数据格式化为 Xml Document 对象response.getStatus();     // HTTP 响应码(整数)
response.getStatusText(); // 响应码的字面解释
response.getHeader(key);  // 由 key 指定的响应的头部数据
response.getAllHeaders(); // 响应的所有头部数据(不包含状态行)
response.getRawHeader();  // 响应的原样头部数据(包含状态行)
response.getText();       // 响应的体部数据
response.getXML();        // 响应的体部数据格式化为 Xml Document 对象

大部分情况下,使用 urlget 函数足可以应付,并且它是可以跨浏览器,跨域使用的。如果你想做一些更底层的操作,Modello.ajax 为你提供两个跨浏览器使用的基类:Connection 和 Request
Connection 类
这是一个静态类,提供跨浏览器的方法返回一个 XMLHTTPRequest 对象。使用方法如下:

程序代码 程序代码
/*
* 成功返回一个跨浏览器版本的 XMLHTTPRequest 对象,
* 失败返回 null。
*/
var conn = Class.get('modello.ajax.Connection').get();/*
* 成功返回一个跨浏览器版本的 XMLHTTPRequest 对象,
* 失败返回 null。
*/
var conn = Class.get('modello.ajax.Connection').get();

Request 类
这是对 XMLHTTPRequest 对象的封装,提供更加易用的接口并解决浏览器对响应缓存的问题,但不具备跨域获取功能。Request 提供的属性和方法如下:
/*
* 类的路径
*/
var Request = Class.get('modello.ajax.Request');

/*
* 创建实例
* url, method, data 均为可选参数
*/
var request = new Request([url[, method[, data]]]);

/*
* 设置 URL
*/
request.setURL(url);

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

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

/*
* 设置回调函数
* 回调函数的原型为:
* var callback = 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() {};/*
* 类的路径
*/
var Request = Class.get('modello.ajax.Request');
/*
* 创建实例
* url, method, data 均为可选参数
*/
var request = new Request([url[, method[, data]]]);
/*
* 设置 URL
*/
request.setURL(url);
/*
* 设置获取方法。目前支持:GET, POST, HEAD
*/
request.setMethod(method);
/*
* 设置获取方法。目前支持:GET, POST, HEAD
*/    
request.setData(data);
/*
* 设置回调函数
* 回调函数的原型为:
* var callback = 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 分析函数
*/
var url = '
http://user:pass@host:port/path?query#flagment';
var ret = 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
*/
var url1 = '
http://www.example.com/about/about.html';
var url2 = '/index.html';
var url = Class.get('modello.ajax.Urllib').urljoin(url1, url2);
// 这时候
// url == '
http://www.example.com/index.html'/*
* urlparse:URL 分析函数
*/
var url = '
http://user:pass@host:port/path?query#flagment';
var ret = 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
*/
var url1 = '
http://www.example.com/about/about.html';
var url2 = '/index.html';
var url = Class.get('modello.ajax.Urllib').urljoin(url1, url2);
// 这时候
// url == '
http://www.example.com/index.html'

 

抱歉!评论已关闭.