Microsoft Word - RD技术通讯_2007_04_Vol_A.doc

Size: px

Start display at page:

Download "Microsoft Word - RD技术通讯_2007_04_Vol_A.doc"

资彪连
5 years ago
Views:

1 搜狗实验室技术交流文档 Vol2:1 轻量级 Ajax js 库摘要 Ajax 作为一个非常常用的功能, 在页面中的作用越来越举足轻重而对于浏览器的支持, 易用性,lib 本身大小就成为了衡量一个 lib 的指标我重写了 ajax library 用来取代现有的 prototype.js Ajax Ajax 既 Asynchronous JavaScript And XML 现在泛指在用户浏览的页面上, 在不刷新页面的情况下, 和 server 进行交互具体的详细的介绍请参见 Ajax: A New Approach to Web Applications 使用 Ajax 技术, 可以使用户在浏览的时候, 尽量的减少刷新的次数, 在一些细节方面, 可以很好的提升用户体验为什么要有 Ajax.js 现成的 Ajax/web2.0 相关的 library 有很多, 其中以 prototype 最为有名, 并且也是我们现在使用的最多的一个 library Prototype.js 是一个跟随着 ror 一起发展起来的 web2.0 类库, 他包含了 OO 框架,IO (Ajax,cookie), 一些页面简单的特效等功能, 非常的丰富, 但是带来的后果就是库本身就非常的大 1.4.* 约为 49k,1.5.* 更是多达 69k 很多时候, 我们只是需要一些简单的 ajax 功能, 但是却要背负着沉重的包袱, 这是非常痛苦的一件事情所以我重写了 ajax 相关功能, 经过几个月的使用, 基本上已经稳定大小为 2.3k, 经过压缩可以减少到 1.7k 和 prototype.js 的兼容性除了名字上的不同, 其他地方, 我都尽量保持兼容 prototype 的方式 Prototype.js 调用的方式是 new Ajax.Request(url, args

2 ajax.js 调用方式是 new Ajax(url, args 名称上面的改变是因为, 对于一个小的 lib 来说, 叫做 Ajax.Request 实在是太恶心了 Api // 需要的参数 ajaxargs = { method : get oncomplete : function (req) { ; new Ajax( url, ajaxargs // 想要访问的 url // 参数 Key mime method sync 其中 ajaxargs 为 parameters oncomplete Value mime type, 默认为 text/html get 或者 post, 默认为 post true 或者 false, true 为异步,false 为同步, 默认为异步请求需要传递的参数, 可以是 ka=va&kb=vb 这样的字符串, 也可以是一个 key/value 的 map {ka:va,kb:vb 注意 : 在 method 为 get 的时候, 忽略此参数, 应把相关参数罗列在 URL 之后回调方法, 当 ajax 请求成功之后, 调用此方法, 并以 request 作为参数, 在方法里面调用 request.responsetext 则可获取请求的全部结果, 默认 alert onerror 回调方法, 当 ajax 请求失败调用此方法, 应以 error 信息作为参数, 默认什么都不做 onloading 回调方法, 当 ajax 请求过程开始的时候调用此方法, 默认什么都不做实例程序 common.js 作用 : 在音乐盒里面的检查是否可以添加音乐的函数, 其中就是使用 ajax 的方法, 把需要添加的专辑和音乐信息传给 /mbox/addmusic.jsp 这个页面进行检查, 返回一段 json

3 function checkaddmusic(uid, plid, ms, cb) { new Ajax( { url : "/mbox/addmusic.jsp", // 请求 addmusic.jsp 进行合法性检查 mime : "text/a", params : { plid : plid, uid : uid, m : escape(ms), oncomplete : function (req) { (function (result) { var is_full = result['music_full']; if (is_full) { var MAX_SONG = 50; if (result['music_size'] < MAX_SONG) { alert(' 专辑已满, 您还可以添加 ' + (MAX_SONG-result['music_size']) + ' 首歌 ' else { alert(' 专辑已满 ' else { if (result['duplicate_count'] > 0) { var str = " 有 "+result['duplicate_count']+" 首歌重复 :"; var dl = result['duplicate_list']; for (var i = 0; i < dl.length; i += 1) { var ds = dl[i]; str += " n" + ds['title'] + " t" + ds['singer']; str += ' n 继续添加?' if (!confirm(str)) { return; eval, 并使用 cb( )(eval("("+req.responsetext+")") // 对返回 json 结果进行

4 addmusic.jsp 作用 : 检查用户准备添加的歌曲的合法性 <%@page contenttype="text/a; charset=gbk"%> <%@include file="actions/user_service.so"%> <% String plidstr = RequestUtil.getStringParam("plid", request, "-1" long plid = -1; try { plid = Long.parseLong(plidstr catch (Exception e) { plid = -1; String uid = RequestUtil.getStringParam("uid", request, "-1" // 获取参数, 和普通的没有区别 String m = RequestUtil.getStringParam("m", request, "-1" String a = RequestUtil.getStringParam("a", request, "c" out.clear( if ("a".equals(a)) { out.print(addmusiclist(plid, uid, m.split("@@@")) 格式 else if ("c".equals(a)) { out.print(checkaddmusic(plid, uid, m.split("@@@")) out.flush( %> // 输出按照 json 的一些应该注意的问题 1. 页面的多次点击问题使用 Ajax 的时候, 有一些问题可能会影响我们, 比如多次点击等当我们发出了一个请求之后, 是需要一定的时间才能收到服务器的结果由于采用了异步的方法, 页面也就没有阻塞, 在提高用户感受的同时, 也给了用户多次 ( 暴力 ) 点击的机会解决办法是可以在点击调用的函数里面做一个标记, 表示正在等待返回结果, 此时其他的请求则会被忽略在 oncomplete 或者 onerror 方法里面取消这个标记 function dosth(){ if (isrunning) return;

5 isrunning = true; new Ajax(url, { oncomplete : function(req) { isrunning = false; 2. json 的使用 json 作为一个轻量级的数据传输方案已经越来越多的使用在 web2.0 的应用中具体的信息可以参考在这里想说明一下 json 和 ajax.js 的配合情况当一个 jsp 文件接收到请求之后, 组合一段 js 然后返回给 js, 但是此时 js 接收到的是一个字符串, 并不能直接使用, 那么我们就需要一个处理, 来把这个字符串转换成为 js 可以识别的对象 json 字符串 :{ tom@sohu.com, nickname : Tom 对应的 js 对象 var tomobj = { tom@sohu.com, nickname : Tom 在这里, 我们采用一个 js 的小技巧, 使用 eval 函数和 js 当中的匿名方法 new Ajax(url, {., oncomplete : function(req) { //req.responsetext 为一个 json 的字符串 (function(data) { alert(data.name alert(data. )(eval( ( +req.responsetext+ ) ) // 在这里把一个 json 的字符串 convert 成为 js 的对象, 并使用具体的原理, 我会稍后详细解释, 大家知道可以这么用就可以了

Microsoft Word - RD技术通讯_2007_05_Vol_A.doc

Microsoft Word - RD技术通讯_2007_05_Vol_A.doc 搜狗实验室技术交流文档 Vol3:1 实现跨域访问的 Ajaj 摘要 Ajaj 即 Asynchronous JavaScript And JavaScript_Text 它跟 Ajax( 具体的详细的介绍请参见 Ajax: A New Approach to Web Applications ) 类似,Ajaj 也是在不刷新页面的情况下, 和 server 进行交互, 并且可以实现跨域交互简介