Microsoft Word - RD技术通讯_2007_05_Vol_A.doc

Size: px

Start display at page:

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

愁酆
5 years ago
Views:

搜狗实验室技术交流文档 Vol3:1 实现跨域访问的 Ajaj 摘要 Ajaj 即 Asynchronous JavaScript And JavaScript_Text 它跟

server 进行交互, 并且可以实现跨域交互简介 Ajax 在 web 开发中已经是一个大家耳熟能详的词, 目前很多 web2.

跨域时就会有问题 : 而很多应用, 客户端 (Ajax 页面 ) 跟服务器端 ( 获取数据的页面 ) 不能整合到一个域下面, 需要跨域访问, 那怎么办?

1 搜狗实验室技术交流文档 Vol3:1 实现跨域访问的 Ajaj 摘要 Ajaj 即 Asynchronous JavaScript And JavaScript_Text 它跟 Ajax( 具体的详细的介绍请参见 Ajax: A New Approach to Web Applications ) 类似,Ajaj 也是在不刷新页面的情况下, 和 server 进行交互, 并且可以实现跨域交互简介 Ajax 在 web 开发中已经是一个大家耳熟能详的词, 目前很多 web2.0 的应用都采用了 Ajax, 但是在某些应用中, 需要跨域访问去获取数据, 而由于浏览器的安全性限制, Ajax 是不能跨域通讯的 Ajax 不跨域可以正常访问 : Ajax 跨域时就会有问题 : 而很多应用, 客户端 (Ajax 页面 ) 跟服务器端 ( 获取数据的页面 ) 不能整合到一个域下面, 需要跨域访问, 那怎么办? 我在网上查了下, 有一些解决 Ajax 跨域的方法, 但都是要在后台通过代理将所有的站点虚拟到一个域下, 并真正没有解决跨域问题, 而且很麻烦 [ 参见

2 用 Proxy 的方法可以解决 Ajax 跨域的问题, 但是会在 Web Server 处形成瓶颈 ( 上图中橙色圈处 ) 因为 "GET /yourwebapp.html" 的只请求一次, 而 XMLHttpRequest 请求是多次的, 如果访问量大, 则造成 Web Server 不必要的负载而用 Ajaj 就可以解决这个问题,Ajaj 则可以跨域交互并且不会给 Web Server 带来负载 Ajaj 即 Asynchronous JavaScript And JavaScript_Text 它跟 Ajax 类似,Ajaj 也是在不刷新页面的情况下, 和 server 进行交互, 并且可以实现跨域交互如图 : Ajaj 原理基本原理 Ajaj 动态的向 Document 中加入一个 <script> 对象, 并利用 <script> 对象的 src 属性向服务器端发送一个请求, 这相当于 Ajax 中 XMLHttp 的 send 方法服务器端则返回一段 JS 代码, 当结果返回给浏览器时,JS 代码会被执行,Ajax 中 XMLHttp 的 onreadystatechange 方法从而达到异步通讯的目的并且 <script> 标签的 SRC 属性向服务器端发送是不受域的限制的具体实现中, 服务器返回的 JS 是用回调函数包起来的 JSON 字符串当结果返回给浏览器时, 回调函数会被执行由于回调函数的名称是固定的, 为了解决异步通讯中返回时回调函数会冲突的问题, 在实际的应用中, 将 <script> 放在一个动态生成的 <iframe> 中, 请求完毕后再自动销毁另一种解决冲突的方法是通过给服务器不同的参数导致服务器调用不同的回调函数, 在不同的对象上调用回调函数条件与限制 1 所在的页面必须是标准的 HTML 页面, 即要有 <html> 和 <body> 的完整标签 ; 否则会导致 document.appendchild 方法无法使用而出错 2 由于允许跨域访问会有安全问题, 所以 Ajaj 最好用在对安全要求不高的领域 Ajaj 并不是要代替 Ajax 的, 如果不需要跨域就用 Ajax 是比较好的 Ajaj 与 Ajax 的区别 Ajaj Ajax

3 数据获取方式是否支持跨域 Reques t 数据格式不采用 XMLHTTP, 而是 SCRIPT 标签的 SRC 引用依赖 XMLHTTP, 要进行浏览器判断外部脚本的方式, 数据处理效率比 XMLHTTP 高支持不支持支持 get 方式,post 支持较为复杂, 但 get 方式就能支持 get 和 post 满足大部分的应用 < 回调函数 >( <JSON 字符串 > ) XML JSON 如 : 如 : _onreadystatechange({"name":"zzy","phone":"8732" <Data><name>zzy</name> </Dat } ); a> _onreadystatechange("name==zzy!!phone==8732" {"name":"zzy","phone":"8732"} ); Ajaj.JS 我将尹伟铭同学的 " 轻量级 Ajax js 库 " 修改成 Ajaj js 了, 正好也方便大家对比 Ajax 和 Ajaj 的区别用法如下 : API ajajargs = { oncomplete : function (jsreturn) { // 回调函数 } }; new Ajaj( url, // 想要访问的 url ajajargs // 参数 ); 其中 ajajargs 定义为 : Key parameters oncomplete onerror onloading Value 需要传递的参数, 可以是 ka=va&kb=vb 这样的字符串, 也可以是一个 key/value 的 map {ka:va,kb:vb} 回调方法, 当 ajax 请求成功之后, 调用此方法, 并以返回的数据作为参数回调方法, 当 ajaj 请求失败调用此方法, 应以 error 信息作为参数, 默认什么都不做回调方法, 当 ajaj 请求过程开始的时候调用此方法, 默认什么都不做 Ajaj Api 的 ajajargs 和 Ajax.js 相比删减了三个参数 :

4 Key Value mime mime type, 默认为 text/html,(ajaj 不需要指定 ) method (Ajaj 目前仅支持 get, 也可以支持 post, 但较为复杂 ) sync 数据格式 Ajax 默认为异步请求, 用同步方式非常少 Ajaj 仅支持异步 Ajaj 的返回数据外边需要用一个回调函数来包起来 : < 回调函数 >( <JSON 字符串 > ) 回调函数名是固定的, 如用 _onreadystatechange, 这个只要在 Ajaj 库中约定即可如 : _onreadystatechange({"name":"zzy","phone":"8732"} ); _onreadystatechange("name==zzy!!phone==8732" ); 关于 JSON, 具体的信息可以参考 ] 现在介绍一下另一种数据格式, 这个格式在 go2map 的地图应用中已经使用了很多年 : < 参数名 1>==< 参数值 1>!!< 参数名 2>==< 参数值 2> 优点 : 节约空间缺点 :== 和!! 作为分割符号, 数据中不能再出现 == 和!!, 不过一般情况下也不会出现这 2 个分割符号实例程序已在 IE6.0 和 Firefox2.0 上测试通过 t.htm 说明 : 创建一个 Ajaj 对象, 获取数据和处理返回的数据 <html> <body> <script type="text/javascript" src="ajaj.js"></script> <script type="text/javascript"> var a=new Ajaj("data.jsp",{"parameters":{"id":"1","value":"888"},"onComplete":function(a){alert(a.phone)}});

5 var b=new Ajaj("data2.jsp",{"parameters":{"id":"2","value":"999"},"onComplete":function(a){alert( a.phone)}}); var c=new Ajaj("data2.jsp",{"parameters":{"id":"3","value":"777"},"onComplete":function(a){alert( a.name)}}); </script> </body> </html> data.jsp 说明 : 从服务器获取数据的页面 /* <%@page contenttype="text/a; charset=gbk"%> <% // 获取 URL 参数并处理 // 根据参数获取数据 // 输出约定格式的数据, 如 :JSON 约定格式的字符串 %> */ _onreadystatechange({"name":"zzy","phone":" ","zip":"100083"}); data2.jsp 说明 : 从服务器获取数据的页面 /* <%@page contenttype="text/a; charset=gbk"%> <% // 获取 URL 参数并处理 // 根据参数获取数据 // 输出约定格式的数据, 如 :JSON 约定格式的字符串 %> */ _onreadystatechange({"name":"soym","phone":" ","zip":"100083"});

Microsoft Word - RD技术通讯_2007_04_Vol_A.doc

Microsoft Word - RD技术通讯_2007_04_Vol_A.doc 搜狗实验室技术交流文档 Vol2:1 轻量级 Ajax js 库摘要 Ajax 作为一个非常常用的功能, 在页面中的作用越来越举足轻重而对于浏览器的支持, 易用性,lib 本身大小就成为了衡量一个 lib 的指标我重写了 ajax library 用来取代现有的 prototype.js Ajax Ajax 既 Asynchronous JavaScript And XML 现在泛指在用户浏览的页面上,