跨浏览器的设置innerHTML方法


Posted in Javascript onSeptember 18, 2006

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 应用的开发;)

Javascript 相关文章推荐
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
Oct 24 Javascript
Javascript代码在页面加载时的执行顺序介绍
May 03 Javascript
捕获和分析JavaScript Error的方法
Mar 25 Javascript
js实现数字每三位加逗号的方法
Feb 05 Javascript
JavaScript函数作用域链分析
Feb 13 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
Nov 30 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
Mar 05 Javascript
vue增删改查的简单操作
Jul 15 Javascript
Angular CLI 安装和使用教程
Sep 13 Javascript
详解angularjs4部署文件过大解决过程
Dec 05 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
Apr 07 Javascript
JavaScript Base64编码和解码,实现URL参数传递。
Sep 18 #Javascript
JavaScript静态的动态
Sep 18 #Javascript
基于Web标准的UI组件 — 树状菜单(2)
Sep 18 #Javascript
JavaScript中的私有成员
Sep 18 #Javascript
javascript的事件描述
Sep 08 #Javascript
由浅到深了解JavaScript类
Sep 08 #Javascript
js常用函数 不错
Sep 08 #Javascript
You might like
php建立Ftp连接的方法
2015/03/07 PHP
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
javascript控制swfObject应用介绍
2012/11/29 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
jquery手风琴特效插件
2015/02/04 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
2015/09/16 Javascript
JavaScript中获取HTML元素值的三种方法
2016/06/20 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
详解ES6 Promise对象then方法链式调用
2018/10/20 Javascript
vue打包之后生成一个配置文件修改接口的方法
2018/12/09 Javascript
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
[01:01:23]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第一场 11.26
2020/11/30 DOTA
用Python中的wxPython实现最基本的浏览器功能
2015/04/14 Python
Django如何实现内容缓存示例详解
2017/09/24 Python
python取数作为临时极大值(极小值)的方法
2018/10/15 Python
对python 判断数字是否小于0的方法详解
2019/01/26 Python
django如何通过类视图使用装饰器
2019/07/24 Python
Python3.5 win10环境下导入kera/tensorflow报错的解决方法
2019/12/19 Python
Python reduce函数作用及实例解析
2020/05/08 Python
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
毕业生物理教师求职信
2013/10/17 职场文书
商学院大学生求职的自我评价
2014/03/12 职场文书
农村婚礼主持词
2014/03/13 职场文书
警示教育活动总结
2014/05/05 职场文书
羽毛球社团活动总结
2014/06/27 职场文书
新课培训心得体会
2014/09/03 职场文书
群众路线教育实践活动自我剖析思想汇报
2014/10/04 职场文书
JavaScript 与 TypeScript之间的联系
2021/11/27 Javascript
Python requests用法和django后台处理详解
2022/03/19 Python