Ajax/Sjax
魔豆爸
擅长Web开发前端技术,具有多种浏览器下开发经验。精通 JavaScriptAJAX编程熟练使用主流JS库。手写JS能力强,运用无干扰的JS思想进行开发。熟练使用CSS及DHTML,W3C标准的推广和贯彻者。熟悉Java语言,MVC设计模式,StrutsSpring架构
展开
-
基本的封装---Ajax之一
Ajax,或许已经是老掉牙的话题。我学习总结一下。大概会有6篇,从基本的ajax直至高级的ajax应用。最后会形成一个实用的Ajax工具库。创建一个基本的Ajax应用不需要太多的代码,大概三个步骤。 1,创建Ajax的核心对象XMLHttpRequest因为浏览器之间的不兼容,IE7之前的版本并没有原生的XMLHttpRequest对象却实现为ActiveX对象。互联网及各种书...2010-08-16 08:34:52 · 103 阅读 · 0 评论 -
跨域请求之JSONP 一
跨域请求的方式有很多种,1,iframe2,document.domain3,window.name4,script5,XDomainRequest (IE8+)6,XMLHTTPRequest (Firefox3.5+)7,postMessage (HTML5)8,后台代理.....2011-08-13 10:46:06 · 69 阅读 · 0 评论 -
跨域请求之JSONP 二
续上篇,加两个实用功能1,增加data属性,请求参数2,增加scope属性,可以让回调函数在指定的上下文中执行 接口如下 Sjax.load(url, { data // 请求参数 (键值对字符串或js对象) success // 成功后回调函数 scope // 回调函数执行上下文 timestamp // 是否加时间戳}); ...2011-08-14 08:25:43 · 79 阅读 · 0 评论 -
跨域请求之JSONP 三
script请求返回JSON实际上是脚本注入。它虽然解决了跨域问题,但它不是万能的。1,不能接受HTTP状态码2,不能使用POST提交(默认GET)3,不能发送和接受HTTP头4,不能设置同步调用(默认异步)...其最严重的就是不能提供错误处理,如果请求的代码正常执行那么会得到正确的结果。如果请求失败,如404,500之类,那么可能什么都不会发生。这...2011-08-15 07:08:58 · 77 阅读 · 0 评论 -
跨域请求之JSONP 四
此次主要是接口调整与代码重构。 接口如下 // 开启调试模式Sjax.debug = true;Sjax.get({ url // 请求url param // 请求参数 (键值对字符串或js对象) success // 请求成功回调函数 failure // 请求失败回调函数 scope ...2012-01-11 15:59:15 · 111 阅读 · 0 评论 -
跨域请求之JSONP 五
前面四篇与后台约定的是返回如下的结构 jsonp = "{name:xx, age:xx}" 即标示符jsonp为一个全局变量。这篇后台接口则是一个JSON作为函数的参数传入,即后台返回的是一个全局函数。 后台我用Java写的Servlet,如下 String callback = request.getParameter("callback");resp...2012-01-12 09:59:21 · 87 阅读 · 0 评论 -
ajax后退解决方案(一)
一、使用iframe,通过document.write产生历史 <!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>0</title></head><body> &a2011-11-11 13:52:07 · 103 阅读 · 0 评论 -
ajax后退解决方案(二)
二、使用iframe,通过修改iframe.src产生历史 <!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>0</title></head><body> &am2011-11-12 10:23:09 · 90 阅读 · 0 评论 -
ajax后退解决方案(三)
三、使用iframe,通过修改iframe.src产生历史,回调写在iframe对应的html页面中<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>0</title></head>&2011-11-13 08:43:05 · 88 阅读 · 0 评论 -
ajax后退解决方案(四)
三、通过修改location.hash产生历史,hashchange事件处理后退<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>0</title></head><body&am2011-11-14 11:08:13 · 88 阅读 · 0 评论 -
JS Queue LazyLoad 之二
上一篇实现了对多个JS文件的顺序加载,这篇再完善丰富一下。加入回调函数,即每个JS文件加载后都有一次回调机会,这个回调是取决于使用者的。也就是说使用者可以配置是否回调,甚至指定某一个或多个回调。非常灵活,可以根据项目需求决定那些资源JS下载后进行回调。此外这篇还解决了重复资源加载问题。 QueueLazyLoad.js([ { url // JS路径 fn ...2011-08-12 07:26:36 · 125 阅读 · 0 评论 -
JS Queue LazyLoad 之一
前面三篇实现了多个JS并行加载,即各个JS文件相互不依赖。实现时仅顺序将其插入到head中。直至全部插入完毕才进行回调。并行下载的好处是效率较高。 但有时我们需要加载的JS模块之间存在相互依赖关系。如a,b,c三个JS文件。b.js中代码依赖于a中定义的某些函数或类,c.js又依赖b.js中的函数或类,而c中具有一个入口函数。这时得保证a,b,c顺序加载,否则如果c早于b或a先加载完,则可...2011-08-11 14:20:55 · 82 阅读 · 0 评论 -
改造请求参数---Ajax之二
接上篇。引入了一个私有函数_serialize,它会把js对象串行化成HTTP所需参数模式,接受如下两种结构 {name:'jack',age:20} --> name=jack&age=20{fruit:['apple','banana','orange']} --> fruit=apple&fruit=banana&fruit=orange...2010-08-16 08:55:19 · 89 阅读 · 0 评论 -
结果分类---Ajax之三
Ajax中的x指的是xml,早期的数据格式都喜欢用xml,然后一层层的解析。当然简单的也会返回html(或称html片段)。现在使用JSON格式的也很多。根据不同需求,给Ajax对象添加了三个实用方法,Ajax.text,Ajax.json,Ajax.xml。Ajax.text返回纯文本,即responseTextAjax.json返回json,即会将responseText解析成js...2010-08-16 09:37:27 · 83 阅读 · 0 评论 -
检查超时---Ajax之四
有时发出一个请求,后端什么时候返回前端并不清楚。有可能是1秒,3秒甚至更长时间。因此有必要添加一个参数来设置等待的时间,如果在设定的时间内没有返回结果则放弃该次请求。实现思路:发出请求后指定一个时间,如超过该时间没有返回结果则忽略。window对象的setTimeout方法再次起左右了(setTimeout能解决很多IE下古怪的bug)代码大概如下:var timeout = opt....2010-08-16 11:17:48 · 105 阅读 · 0 评论 -
超时处理---Ajax之五
上一篇只是检查是否超时,超时后却不做任何处理。这里如果超时,会给failure第二个参数msg赋值为“request timeout”。 这样使用者能清楚的知道一次HTTP请求的细节。实现细节较为诡异,得慢慢体会。这里timeout的效果和JQuery,Ext是一样的。如下 Ajax.text('../servlet/Ajax',{ timeout : 2000, succ...2010-08-16 14:49:27 · 90 阅读 · 0 评论 -
创建xhr对象出现异常处理---Ajax之六
前面几篇一直采用最精简的方式创建Ajax的核心XMLHttpRequest对象var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); 没有考虑其可能出现的异常,即创建失败。其实个人认为以上创建方式创建失败的几率非常之少,起码在IE6/7/8/Fire...2010-08-16 15:40:05 · 257 阅读 · 0 评论 -
新API解析JSON---Ajax之七
ECMAScript 5发布有段时间了,其中就包括了解析JSON的原生API-JSON.parse。许多浏览器已经支持了。主流js库如JQuery,Ext,Prototype都优先使用JSON.parse,不支持该方法的浏览器则使用new Function或eval。为何优先使用JSON.parse,我想一个就是性能,原生的总是要快一些吧。此外JSON.parse较eval也更安全。这...2010-08-16 16:01:41 · 120 阅读 · 0 评论 -
JS/CSS module LazyLoad 之一
随着web app中JS越来越多,有时页面首次加载时有很多JS并没有用到。这时为了提高下载速度,提高页面渲染效率就需要让这部分暂时不用的JS延迟加载,即只在用到它们的时候再下载。这里会先实现一个最简单JS的惰性加载。后续几篇会逐步加强功能直至一个完整的JS/CSS模块加载库。这个系列里我不会实现队列,即各个JS文件是并行下载的,只有当多个JS全部下载后才执行回调。当然在第二个系列JS Queue ...2011-08-09 14:21:29 · 77 阅读 · 0 评论 -
JS/CSS module LazyLoad 之二
上一篇完成的JS的按需加载,这篇添加个新方法css,完成对CSS文件的加载。接口与JS相同,示例如下LazyLoad.css(['a.css', 'b.css', 'c.css'], function(){ console.log('css模块加载完毕');}); Firebug中效果如下, 上一篇对JS的加载实现是通过script元素,css则是通过li...2011-08-10 09:33:43 · 97 阅读 · 0 评论 -
JS/CSS module LazyLoad 之三
在开始这篇前,有两个小问题须说明一下 情况一LazyLoad.js(['a.js','a.js'],function(){}); 有人会问为什么要在页面中引入两次a.js? 我也想问。其实是多余的。但有人就喜欢这么用,那怎么办。只能凉拌了。我可以在内部对数组中重复元素去重下。但这无疑增加了LazyLoad.js的代码量,或者说我更愿意看到不要这么去写。当然我自己...2011-08-11 06:51:43 · 99 阅读 · 0 评论 -
ajax后退解决方案(五)
五、使用history.pushState产生历史,popstate事件处理后退<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>0</title></head><body&am2011-11-15 07:37:16 · 79 阅读 · 0 评论