- 浏览: 138853 次
- 性别:
- 来自: 西南边陲
最新评论
-
leafxf:
这个和直接引用js有多大不同和优点?
近乎完美的简单 JS 跨域解决方式 --window.name -
zhangyg:
我怎么不行,我在执行到 var _getData = func ...
近乎完美的简单 JS 跨域解决方式 --window.name -
ray_linn:
akane 写道以后都走网上电子书城 楼主的问题就解决了
又 ...
试说知识传播与版权限制的两难 ---牢骚、希望或灵感 -
asd:
知识库还是很好的,我不知道这里面的商业模式是什么,但是百度文库 ...
试说知识传播与版权限制的两难 ---牢骚、希望或灵感 -
lkj107:
支持知识产权保护,BS百毒好好看看google是如何达到共赢的 ...
试说知识传播与版权限制的两难 ---牢骚、希望或灵感
>>注意:请下载后面(9楼)的v1.1正式版。如果要优先考虑IE7中的Native XHR,请自己把附件中bajax.js文件里的bajax_object函数替换一下(修改的代码在9楼的页面里——不想更新附件了)。
前一段时间写51ditu和动易的集成,现在准备改进成Ajax的。很早以前就知道了Ajax,但一直没有实际用过。
网上Google了一番,看了Sajax.php……
还是简单点好,自己写了个很小的封装,测试对浏览器的兼容性还不错,并且回调函数的接口比较友好。
另:经测试,发现如果是对同一个XMLHttpReques对象进行多次open、send等操作,IE会有Cache问题,Firefox正常。但如果是每一次都是重新new一个的话,IE就支持得很好了(Firefox自然不用说)。
用这个库(面向用户的其实就一个函数),不用考虑XMLHttpRequest的任何细节,就如同调用和定义普通的Js函数。
用法:
附源码内容
注意我加的那句,没有这句,在IE6下会有内存泄漏。
不知内存泄漏会出现在哪里?
JS是有内存垃圾收集处理功能的。
可能的一种情况是:因为每次都是创建一个新的请求对象(xhr),返回的对象可能被无限期存储起来而没有释放(一个变量被赋值新的对象,原来的那个值是会进入垃圾处理的)。但这应该是应用的问题了。
>>1. 应该只使用 msxml2.xmlhttp.6.0和3.0,具体原因请搜索IEBlog。
bajax_object的代码是从Sajax.php中拷过来的,没仔细研究。查哈看。。
谢谢
前一段时间写51ditu和动易的集成,现在准备改进成Ajax的。很早以前就知道了Ajax,但一直没有实际用过。
网上Google了一番,看了Sajax.php……
还是简单点好,自己写了个很小的封装,测试对浏览器的兼容性还不错,并且回调函数的接口比较友好。
另:经测试,发现如果是对同一个XMLHttpReques对象进行多次open、send等操作,IE会有Cache问题,Firefox正常。但如果是每一次都是重新new一个的话,IE就支持得很好了(Firefox自然不用说)。
用这个库(面向用户的其实就一个函数),不用考虑XMLHttpRequest的任何细节,就如同调用和定义普通的Js函数。
用法:
<script language="javascript" src="bajax.js"></script> <script language="javascript"> function callback(req, id) { if(req.readyState == 4 && req.status == 200) { if(id)document.getElementById(id).innerHTML = req.responseText; //eval(req.responseText); } } </script> <div id="someid"></div> <div onClick="bajax_send('http://xxx.net/yourscript.php?xxx', callback, 'someid')">点击查看哦!</div>
附源码内容
var bajax_debug_enable = false; // 主函数: //(URL,回调函数,传递给回调函数的附加数据,方法,POST数据,是否异步) function bajax_send(url, callback, fdata, method, sdata, asyn) { fdata = (fdata === undefined)? null: fdata; method = method || "GET"; sdata = (sdata === undefined)? null: sdata; asyn = (asyn === undefined)? true: asyn; var X = new bajax_object(); if(asyn) X.onreadystatechange = function(){ callback(X, fdata); }; X.open(method, url, asyn); if(bajax_debug_enable) bajax_debugger(callback); X.send(sdata); if(asyn) return X; else callback(X, fdata); } // 兼容IE与其它浏览器(From Sajax.php v0.12) function bajax_object() { var A; var _msxmlhttp = new Array( 'Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 'Msxml2.XMLHTTP.3.0', 'Msxml2.XMLHTTP', 'Microsoft.XMLHTTP'); for(var i = 0; i < _msxmlhttp.length; i++) { try { if(A = new ActiveXObject(_msxmlhttp[i])) break; } catch (e) { A = null; } } if(!A && typeof XMLHttpRequest != "undefined") A = new XMLHttpRequest(); if(!A) alert("Could not create connection object."); return A; } // Debug information... function bajax_debugger(func) { var S = func.toString(); alert('[Running] ' + S.slice(9, S.indexOf(')', 10)) + ')'); }
- bajax.js.rar (1.3 KB)
- 描述: Ajax 简易封装.修订
- 下载次数: 279
- bajax_v0.3.rar (1.5 KB)
- 下载次数: 196
评论
11 楼
Liner
2007-07-24
不好意思,请教hax:
按照你的说法:req.onreadystatechange = null;
但是这行代码在IE6中会出现运行时错误提示(Firefox中正常),何解?
这样的代码应该不是纸上谈兵吧。谢了。
按照你的说法:req.onreadystatechange = null;
但是这行代码在IE6中会出现运行时错误提示(Firefox中正常),何解?
这样的代码应该不是纸上谈兵吧。谢了。
10 楼
Liner
2007-07-23
唉。。。。干脆彻底改一下,用OO封装得了。(谢谢hax提供的修补)
以下为Bajax的正式版,呵呵 。用法与前面稍有不同。
用法:
源代码:
注:v1.0版在IE中可能会有些问题,同时异步时出错抛出的异常难以处理。请用v1.1。
以下为Bajax的正式版,呵呵 。用法与前面稍有不同。
用法:
<script language="javascript" src="bajax.js"></script> <script language="javascript"> function callback(req, id) { var _node = document.getElementById(id); // 直接使用req的响应值 if(_node) _node.innerHTML = 'Hai ' + req.responseText; } var _obj = new Bajax(); </script> <div id="someid"></div> <div onClick="_obj.get('/script.php?name=Liner', callback, 'someid')">GET方法</div> <div onClick="_obj.post('/script.php', 'name=Liner', callback, 'someid')">POST方法</div>
源代码:
/** bajax.js * Base Ajax 简易封装 2007.07.20 * --------------------------------------------------------------------------- * >>接口: * get, post 常用普通接口。 * e_handler 出错处理句柄,可选。 * _object 创建浏览器兼容XHR的包装。 * * >>参数: * @url: 请求的响应页面; * @sdata: POST的数据; * @callback: 处理响应数据的回调函数; * * 以下参数可选 * @fdata: 传递给回调函数的数据,默认null; * @asyn: 是否异步,默认true。 * * 返回值: * 如果是异步,返回异步请求对象;否则不返回。 * * >>回调函数: * * 回调函数有两个参数:(req, data) * @req: 异步请求对象(XMLHttpRequest 或 ActiveXObject) * @data: 传入的附加数据。 * * >>注意: * * 1、传递到回调函数的附加数据可以是数值、字串、数组或对象。 * 2、可置e_handler的参数为null来取消出错处理。 * * @Author: Tubz. * @Copyright: GNU - LGPL. * --------------------------------------------------------------------------- */ function Bajax() { // 默认出错处理 this._eh = Bajax._error; } // 调试设置 Bajax.debug_enable = false; //-- 用户接口 ----------------------------------------------------------------- // GET 请求 //(URL, 回调函数[, 回调函数附加数据, 是否异步]) Bajax.prototype.get = function (url, callback, fdata, asyn) { fdata = (fdata === undefined)? null: fdata; asyn = (asyn === undefined)? true: asyn; var _self = this; var X = Bajax._object(); if(asyn) X.onreadystatechange = function() { Bajax._callback(X, callback, fdata, _self); }; X.open('GET', url, asyn); if(Bajax.debug_enable) Bajax._debugger(callback); X.send(null); if(asyn){ return X; }else{ Bajax._callback(X, callback, fdata, _self); } } // POST 请求 //(URL, POST数据, 回调函数[, 回调函数附加数据, 是否异步]) Bajax.prototype.post = function (url, sdata, callback, fdata, asyn) { fdata = (fdata === undefined)? null: fdata; asyn = (asyn === undefined)? true: asyn; var _self = this; var X = Bajax._object(); if(asyn) X.onreadystatechange = function() { Bajax._callback(X, callback, fdata, _self); }; X.open('POST', url, asyn); if(Bajax.debug_enable) Bajax._debugger(callback); X.setRequestHeader('Content-length', sdata.length); X.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); X.send(sdata); if(asyn){ return X; }else{ Bajax._callback(X, callback, fdata, _self); } } // 设置出错处理函数 Bajax.prototype.e_handler = function (func) { if(func !== undefined) this._eh = func; } // 创建一个兼容的XHR对象。 // 改了一下:IE7中优先采用Native XHR Bajax._object = function() { var A; if(typeof XMLHttpRequest != 'undefined') { A = new XMLHttpRequest(); }else{ var _msxmlhttp = new Array( 'Msxml2.XMLHTTP.6.0', 'Msxml2.XMLHTTP.3.0', 'Msxml2.XMLHTTP', 'Microsoft.XMLHTTP'); for(var i = 0; i < _msxmlhttp.length; i++) { try { if(A = new ActiveXObject(_msxmlhttp[i])) break; } catch (e) { A = null; } } } if(!A) alert("Could not create connection object."); return A; } //-- 私有函数 ----------------------------------------------------------------- Bajax._callback = function (req, callback, data, obj) { if(req.readyState == 4) { if(req.status != 200) { //req.onreadystatechange = null; if(obj._eh) obj._eh(req, callback); }else{ callback(req, data); //req.onreadystatechange = null; } } } // Debug: 显示采用的回调函数。 Bajax._debugger = function (func) { alert('running: ' + Bajax._fname(func)); } // 默认的出错处理 Bajax._error = function (req, callback) { alert(req.statusText + '\nShould run: ' + Bajax._fname(callback)); } // 提取函数名(含参数) Bajax._fname = function (func) { var S = func.toString(); return S.slice(9, S.indexOf(')', 10)) + ')'; } //-- End.----------------------------------------------------------------------
注:v1.0版在IE中可能会有些问题,同时异步时出错抛出的异常难以处理。请用v1.1。
9 楼
Liner
2007-07-23
不了解 MS 的 ActiveXObject,看来真是有些特别
得改一下回调函数的格式约定了,呵呵
谢谢hax给予如此详细的指正。
得改一下回调函数的格式约定了,呵呵
function callback(req, id) { if(req.readyState == 4) { if(req.status != 200) { // do some thing. req.onreadystatechange = null; }else{ var _node = document.getElementById(id); if(_node) _node.innerHTML = 'Hai ' + req.responseText; // clear the reference req.onreadystatechange = null; } } }
谢谢hax给予如此详细的指正。
8 楼
hax
2007-07-23
BTW,实际上面还不是最严谨,因为出错的时候也应该置为null。
7 楼
hax
2007-07-23
function callback(req, id) { if(req.readyState == 4 && req.status == 200) { var _node = document.getElementById(id); if(_node) _node.innerHTML = 'Hai ' + req.responseText; // clear the reference req.onreadystatechange = null; } }
注意我加的那句,没有这句,在IE6下会有内存泄漏。
6 楼
Liner
2007-07-21
hax 写道
1. 应该只使用 msxml2.xmlhttp.6.0和3.0,具体原因请搜索IEBlog。
2. 虽然没有仔细看,不过你的代码很有可能会有内存泄露。。。
2. 虽然没有仔细看,不过你的代码很有可能会有内存泄露。。。
不知内存泄漏会出现在哪里?
JS是有内存垃圾收集处理功能的。
可能的一种情况是:因为每次都是创建一个新的请求对象(xhr),返回的对象可能被无限期存储起来而没有释放(一个变量被赋值新的对象,原来的那个值是会进入垃圾处理的)。但这应该是应用的问题了。
>>1. 应该只使用 msxml2.xmlhttp.6.0和3.0,具体原因请搜索IEBlog。
bajax_object的代码是从Sajax.php中拷过来的,没仔细研究。查哈看。。
谢谢
5 楼
hax
2007-07-20
1. 应该只使用 msxml2.xmlhttp.6.0和3.0,具体原因请搜索IEBlog。
2. 虽然没有仔细看,不过你的代码很有可能会有内存泄露。。。
2. 虽然没有仔细看,不过你的代码很有可能会有内存泄露。。。
4 楼
Liner
2007-07-20
快一个月了,想强化一下Ajax的封装——有“对象池管理”的功能。测试时附带验证这个Bajax的POST操作(以前只是使用GET方法)…………呵呵,大跌眼镜——因为没有设置必要的Header,POST是没有成功的!惨
毕竟只是才学啊,Http的请求模型都没得搞明白
现在修正Bug,并且接口完全改了:把POST和GET分作2个独立的函数,直接使用更方便。
>>原始内容删除。请查看/下载后面(9楼)的正式版。
毕竟只是才学啊,Http的请求模型都没得搞明白
现在修正Bug,并且接口完全改了:把POST和GET分作2个独立的函数,直接使用更方便。
>>原始内容删除。请查看/下载后面(9楼)的正式版。
3 楼
xieye
2007-06-26
LZ的照片好难看……
2 楼
Liner
2007-06-25
呵呵,怎么没人回一哈啊。。。。
自己补充一下:
我不太清楚IE、Firefox或是其它浏览器申请一个XMLHttpRequest对象的开销有多大?因为每个Ajax请求都是申请一个新的XMLHttpRequest对象。这样做的好处是不存在在全局域管理一个XMLHttpRequest对象池之类的东西,各请求对象之间没有冲突,程序好写。不足之处可能就是会有开销的问题(估计问题不大,毕竟OO就是在使用对象嘛,呵呵)。
另外,能够传递一个附加的数据到回调函数中,也是一种极大的方便。比如可以传递一个外部容器的Id,或者一个需要用响应数据操作的对象、甚至可以传递一个数组,以用于与服务器响应数据的复杂操作等。
(创建XMLHttpRequest对象的兼容代码来源于Sajax.php v0.12,在此声明一下。)
自己补充一下:
我不太清楚IE、Firefox或是其它浏览器申请一个XMLHttpRequest对象的开销有多大?因为每个Ajax请求都是申请一个新的XMLHttpRequest对象。这样做的好处是不存在在全局域管理一个XMLHttpRequest对象池之类的东西,各请求对象之间没有冲突,程序好写。不足之处可能就是会有开销的问题(估计问题不大,毕竟OO就是在使用对象嘛,呵呵)。
另外,能够传递一个附加的数据到回调函数中,也是一种极大的方便。比如可以传递一个外部容器的Id,或者一个需要用响应数据操作的对象、甚至可以传递一个数组,以用于与服务器响应数据的复杂操作等。
(创建XMLHttpRequest对象的兼容代码来源于Sajax.php v0.12,在此声明一下。)
1 楼
庄严
2007-06-24
很好!!!
发表评论
-
一个类似 Base64 但真正实现了加密的 JS 文字加密算法
2011-02-16 15:11 2929算法的基本原理和 Base64 ... -
针对文字加密的简单 JS 加密算法 --进制乱序法改良版
2011-02-12 12:08 5588在上一篇文章《普通 http 网络下数据的安全传输(设计原理) ... -
普通 http 网络下数据的安全传输(设计原理)
2011-02-10 16:32 7822曾几何时,https 安全但 ... -
近乎完美的简单 JS 跨域解决方式 --window.name
2011-02-04 22:47 25995当然,“近乎完美”仅仅是个人观点,但如下所述,它确实简单而颇有 ... -
几个文字加密的 JS 简洁算法(续2)--进制乱序法
2011-01-31 22:44 2298续前一篇博文《几个文字加密的简洁算法和一些个人的想法》——字符 ... -
几个文字加密的 JS 简洁算法(续)-- 字符错位法
2011-01-26 12:28 3757续上一篇博文《几个文字加密的简洁算法和一些个人的想法》,不说开 ... -
几个文字加密的 JS 简洁算法(字符平移法)和一些个人的想法
2011-01-22 21:43 7812未深入了解过数据加密 ... -
几个文字加密的简洁算法和一些个人的想法
2011-01-22 21:34 0未深入了解过数据加密 ... -
优化PHP执行效率的40条技巧
2009-11-08 21:37 24291.如果一个方法能被静 ... -
姓氏排序程序 Js 版(小程序共享)
2009-10-19 10:02 1788一朋友给客户做类似黄 ... -
最简单的判断 Javascript 和 Cookie 是否禁用的代码
2009-10-09 12:10 948在服务器端 include 即可,如 PHP: include ... -
对 XSS 跨站攻击之所以存在的一些思考
2009-09-21 23:07 1279一直对漏洞、骇客、攻击之类的东西没敢深入,甚至肤浅的了解都算不 ... -
标准的字根输入法设想
2009-04-30 20:44 1429国家新版《汉字部首表》即将于5月1日发布,其中:主部首 2 ... -
普通 http 下可靠的网路认证方式
2009-04-01 21:41 1282认证过程: 服务器:对客户端的每次请求,每一次都生成 ... -
在IIS中用ISAPI_Rewrite Lite版配置虚拟主机支持二级域名
2007-10-23 11:49 3166为二级域名的问题搞了2天,狂郁闷。。。。先是用程序,感觉太累赘 ... -
在Apache中配置使用Asp.net(记录备忘共享)
2007-10-17 14:38 4803本来是出于好奇,Apache中居然也能支持Asp一把了。。。呵 ... -
学写一个程序开发框架(PHP),灵感来源于ROR
2007-08-30 12:20 2500先向各位高手们请个安。 我对ROR的了解很浅,仅仅是看了一遍它 ... -
盗站与采集,分析及反制之术PHP实现
2007-08-10 23:53 3506一般的说,只要做过站 ... -
具有xhr对象管理功能的Ajax简易封装(Majax)
2007-07-20 21:57 3299内部由一个数组缓存工作中的xhr对象,类似于“池”,当一个请求 ... -
我的汉字输入法编码方案
2007-05-28 22:24 2610很早就有了这个东西,因为一直没学会编写输入法程序,所以就没有拿 ...
相关推荐
详细介绍了使用ajax如何兼容各种浏览器
一个ajax局部刷新的实例 兼容各个主流浏览器
Ajax存在问题就是在异步情况下无法控制什么时候完成记录显示,本人根据回调方法封装了个类,能够将回调方法用参数方式指定,使ajax调用结束后调用回调方法,吧内容传回。ajaxSubmitToDivCallback(显示内容div,提交...
ajax简易模型 兼容多个浏览器(ff ie ...) get post请求
ajax回调函数是怎么写的ajax回调函数是怎么写的ajax回调函数是怎么写的
兼容浏览器的ajax框架,比较实用,轻量级的.
今天找寻AJAX类,使用起来不是很方便,算了自己封装一个 注:简单封装,使用简单
资源名称:jQuery简化Ajax开发内容简介:Ajax 并不是一种语言,它只是几种旧技术如 Javascript 和 XML 以及 DOM 的综合应用,全称为 Asynchronous Javascript and XML,即 异步 Javascript 和 XML...
封装了跟后台接口沟通的ajax,还有一个获取url传递get参数的两个公共函数,自己用来跟C#后台接口沟通的前端封装类,有类似需求的可以看看
jquery AJAX 回调函数取JSON成功代码,不需要数据库,jquery路径引导正确可运行,数据调用是已定义json数据
使用 jQuery 简化 Ajax 开发
Ajax的小封装对ajax的get请求的小封装.
该功能是用ajax+js插件做的一个上传图片的功能!解决了所有浏览器下都兼容的问题,里面代码详细,注释很明确!希望能帮助各位码友哈!
ajax封装兼容函数,有利于提高开发效率,减少代码量。
提供完整的html5页面开发流程和开发方式,包括html5页面开发代码,含ajax封装方法,以及调用的方式
ajax技术封装表单的实例,完整代码,易看懂。用于学习ajax。
1、自己手写的javascript ajax异步调用 并回调js函数传参。 2、异步调用并实现xsl 解析xml
Ajax的通用函数,兼容IE chrome firefox
如果回调用于ajax,例如分页,应该控制好ajax顺序
简单页面访问后台接口的一个样例,用于调试后台接口是否支持跨域,是否支持ajax请求,是否又正确的值返回前端,在postman正确的情况下浏览器不一定能成功,此时就需要用ajax模拟调用检查