跨浏览器的设置innerHTML方法

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 方法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'

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

(0)

相关推荐

  • 跨浏览器的设置innerHTML方法

    Ajax是个好东西,但使用起来却不是那么方便.问题总结如下: 在各种浏览器上的创建方式和使用方法不一致  各个浏览器对响应的缓存策略有所不同  浏览器存在跨域获取限制  前两个问题可以通过封装 XMLHTTPRequest 对象来解决,第三个问题的解决方法有很多中,兼容性和移植性比较好的就是在本域服务器上放置一个中转 proxy .Modello.ajax 就是提供这套解决方案的工具集. 安装 下载 Modello 和 Mdello.ajax  解压并将 modello.js, modello.

  • Iframe实现跨浏览器自适应高度解决方法

    本文以实例形式讲述了Iframe实现跨浏览器自适应高度解决方法,非常具有实用价值.分享给大家供大家参考之用.具体方法如下: 该方法使用了jQuery,因此需要在iframe的src页面里面引入jQuery. 父页面里面相对简单一点,主要包含以下代码: <iframe id="if1" scrolling="no" src="2.html"></iframe> 在iframe的src页面里面代码如下: <script

  • javascript跨浏览器的属性判断方法

    今天在写代码的时候发现一个很容易出错的地方.当我们在声明变量时,常常会因为不同的 browser 有不同的 API 定义,然后用以下的写法来判断哪一个属性,例如: 复制代码 代码如下: var fullscreenElement = document.mozFullScreenElement || document.webkitFullscreenElement || document.fullscreenElement; 用||来检查要用哪一个 attribute.不过要小心 javascri

  • js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法

    本文实例讲述了js插件设置innerHTML时在IE8下提示"未知运行时错误"解决方法.分享给大家供大家参考.具体分析如下: 问题描述: 网站中使用了一个js插件,设置innerHTML时,在IE8下报错"未知运行时错误": <div id="divContainer"> <a name="link"> -->报错处 第三方插件内容- </a> </div> 原因: 所设置

  • Javascript实现跨域后台设置拦截的方法详解

    本文主要给大家介绍了关于Javascript跨域后台设置拦截的相关内容,分享出来供大家参考学习,话不多说了,来一起看看详细的介绍吧. 子域名之间互相访问需要跨域 结论放在开头: 1.服务端必须设置允许跨域 2.客户端带cookie需要设置 withCredentials 3.无论服务端是否允许跨域,该request都会完整执行 4. options 预请求需要设置返回空,不然requestMapping没有支持该方法则出错 环境搭建 需求 首先需要搭建两个环境.一个是提供API的server A

  • 开发跨浏览器的JavaScript方法说明第1/2页

    开发跨浏览器的JavaScript 1. childNodes在ff中和ie的区别. ff中的node(nodeType = 1)都是用textNode(nodeType = 3)分开的,而ie/op不是这样的. <div id="box1"><span>content</span></div> 在ff下,box1的childNodes为3个,ie下为1个. 2. 设置某个node对象的style class名称. ie中要设置某个nod

  • 完美解决浏览器跨域的几种方法(汇总)

    1.什么是跨域问题 在页面中使用js访问其他网站的数据时,就会出现跨域问题,比如在网站中使用ajax请求其他网站的天气.快递或者其他数据接口时,以及hybrid app中请求数据,浏览器会提 示一下错误: XMLHttpRequest cannot load http://你请求的域名. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://当前页的域名' is t

  • ASP.NET WebAPI2复杂请求跨域设置的方法介绍

    ASP.Net Core的跨域设置比较简单  官方都整合了 具体的参见微软官方文档: https://docs.microsoft.com/zh-cn/aspnet/core/security/cors?view=aspnetcore-3.1#ecors 跨域条件 跨域是指的当前资源访问其他资源时发起的http请求由于安全原因(由于同源策略,域名.协议.端口中只要有一个不同就不同源),浏览器限制了这些请求的正常访问,特别需要注意的是这些发生在浏览器中. 解决方法 方法1.web.config文件

  • Jquery跨浏览器文本复制插件Zero Clipboard的使用方法

    当开发者需要对某局部文本进行点击复制效果时,在IE下实现比较简单.但要想做到跨浏览器比较困难了.Zero Clipboard 它利用 Flash 进行复制,所以只要浏览器装有 Flash 就可以运行,而且比IE的document.execCommand("Copy") 更加灵活. Zero Clipboard 的实现原理 Zero Clipboard 利用 Flash 进行复制,之前有 Clipboard Copy 解决方案,其利用的是一个隐藏的 Flash.但最新的 Flash Pl

  • js跨浏览器的事件侦听器和事件对象的使用方法

    本文特意为跨浏览器实现添加事件侦听器和跨浏览器事件对象的使用方法做了下总结,并把这些方法打包,欢迎大家学习. 打包的一个EventUtil对象 var EventUtil = { // 添加侦听事件 addEventListener:function (element, type, handler) { // IE9+.Firefox.Safari.chrome和Opera if(element.addEventListener) { element.addEventListener(type,

随机推荐