AJAX跨域访问的研究与应用

第２９卷　

第２２期　

Ｖ０１．２９　ＮＯ．２２　

计算机工程与设计　

Ｃｏｍｐｕｔｅｒ　Ｅｎｇｉｎｅｅｒｉｎｇ　ａｎｄ　Ｄｅｓｉｇｎ　

２００８年ｌ１月　

ＮＯＶ．２００８　

ＡＪＡｘ跨域访问的研究与应用　

陈腊梅　，　李　为　，　程振林　，　张晓力　

（１．华北电力大学计算机科学与技术学院，北京１０２２０６；２．中国科学院计算技术研究所，北京１０００８０）　

摘　要：在异域数据集成的Ｗｅｂ应用中，同源策略使ＡＪＡＸ跨域访问受到了限制。阐述了ＡＪＡｘ工作原理进而说明了同源策　

略如何影响ＡＪＸ跨域访问，分析了当前避开同源策略的主要方案，提出了ＸＭＬＨＴＴＰ代Ａ

访问和展现数据的问题。　

＋ＪＳＯＮ技术的解决方法，最后介　

绍了该方法在“科技基础条件平台异地软件共享系统”的应用。项目开发的实践结果表明，该方法有效地解决了ＡＪＡｘ跨域　

关键词：ＡＪＡＸ；同源策略；跨域访问；ＸＭＬＨＴＴＰ代理；ＪＳＯＮ　

中图法分类号：ＴＰ３１１．５２　文献标识码：Ａ　文章编号：１０００．７０２４（２００８）２２—５６８０—０５　

Ｒｅｓｅａｒｃｈ　ａｎｄ　ａｐｐｌｉｃａｔｉｏｎ　ｏｆ　ＡＪＡＸ　ｃｒｏｓｓ—ｄｏｍａｉｎ　ａｃｃｅｓｓ　

ＣＨＥＮ　Ｌａ—ｍｅｉ　．ＬＩ　Ｗｌｅｉ　。　ＣＨＥＮＧ　Ｚｈｅｎ．１ｉｎ２．　ＺＨＡＮＧ　Ｘｉａｏ—ｌｉ　

（１．Ｓｃｈｏｏｌ　ｏｆＣｏｍｐｕｔｅｒ　Ｓｃｉｅｎｃｅ　ａｎｄ　Ｔｅｃｈｎｏｌｏｇｙ，Ｎｏｒｔｈ　Ｃｈｉｎａ　Ｅｌｅｃｔｒｉｃ　Ｐｏｗｅｒ　Ｕｎｉｖｅｒｓｉｔｙ，Ｂｅｉｊｉｎｇ　１０２２０６，Ｃｈｉｎａ；　

２．Ｉｎｓｔｉｔｕｔｅ　ｏｆ　Ｃｏｍｐｕｔｉｎｇ　Ｔｅｃｈｎｏｌｏｇｙ，Ｃｈｉｎｅｓｅ　Ａｃａｄｅｍｙ　ｏｆ　Ｓｃｉｅｎｃｅｓ，Ｂｅｉｊｉｎｇ　１　０００８０，Ｃｈｉｎａ）　

Ａｂｓｔｒａｃｔ：ＡＪＡＸ　ｃｒｏｓｓ－ｄｏｍａｉｎ　ａｃｃｅｓｓｅｓ　ａｒｅ　ｌｉｍｉｔｅｄ　ｂｙ　ｓａｍｅ　ｏｒｉｇｉｎ　ｐｏｌｉｃｙ　ｉｎ　ｔｈｅ　ｗｅｂ　ａｐｐｌｉｃａｔｉｏｎｓ　ｏｆ　ｄａｔａ　ｉｎｔｅｇｒａｔｉｏｎ　ｂｅｔｗｅｅｎ　ｄｉｆｆｅｒｅｎｔ　

ｄｏｍａｉｎｓ．Ｔｈｅ　ｏｐｅｒａｔｉｎｇ　ｐｒｉｎｃｉｐｌｅｓ　ｏｆ　ＡＪＡＸ　ａｒｅ　ｅｘｐｌａｉｎｅｄ　ａｎｄ　ｔｈｅ　ｗａｙ　ｈｏｗ　ｓａｌｎｅ　ｏｒｉｇｉｎ　ｐｏｌｉｃｙ　ａｆｆｅｃｔｓ　ＡＪＡＸ　ｃｒｏｓｓ—ｄｏｍａｉｎ　ａｃｃｅｓｓｅｓ　ｉｓ　

ｉｌｌｕｓｔｒａｔｅｄ．Ｍａｊｏｒ　ｓｏｌｕｔｉｏｎｓ　ｔｏ　ａｖｏｉｄｉｎｇ　ｓａｍｅ　ｏｒｉｇｉｎ　ｐｏｌｉｃｙ　ａｒｅ　ａｎａｌｙｚｅｄ　ａｎｄ　ｔｈｅ　ｍｅｔｈｏｄ　ｏｆＸＭＬＨＴＴＰ　ｐｒｏｘｙ　ａｎｄ　ＪＳＯＮ　ｔｅｃｈｎｉｑｕｅ　ｉｓ　ｂｒｏｕ・　

ｇｈｔ　ｆｏｒｗａｒｄ．Ａｔ　ｌａｓｔ，ｔｈｅ　ａｐｐｌｉｃａｔｉｏｎ　ｏｆ　ｔｈｉｓ　ｍｅｔｈｏｄ　ｉｎ‘＇ｔｈｅ　ｓｙｓｔｅｍ　ｏｆ　ｓｏｆｔｗａｒｅ　ｓｈａｒｉｎｇ　ｂｅｔｗｅｅｎ　ｄｉｆｅｒｅｎｔ　ａｒｅａｓ　ｂａｓｅｄ　ｏｎ　ｓｃｉｅｎｃｅ　ａｎｄ　

ｔｅｃｎｏｌｈｏｇｙ　ｂａｓｉｃ　ｐｌａｔｆｏｒｍ＇’ｉｓ　ｉｎｔｒｏｄｕｃｅｄ．Ｐｒａｃｔｉｃｅ　ｉｎ　ｔｈｅ　ｐｒｏｊｅｃｔ　ｄｅｖｅｌｏｐｍｅｎｔ　ａｐｐｒｏｖｅｓ　ｔｈａｔ　ｔｈｉｓ　ｍｅｔｈｏｄ　ｃａｎ　ｅｆｆｅｃｔｉｖｅｌｙ　ｓｏｌｖｅ　ｔｈｅ　ｐｒｏｂｌｅｍ　

ｏｆ　ＡＪＡＸ　ｃｒｏｓｓ．ｄｏｍａｉｎ　ａｃｃｅｓｓ　ａｎｄ　ｄａｔａ　ｅｘｈｉｂｉｔｉｏｎ．　

Ｋｅｙ　ｗｏｒｄｓ：ＡＪＡＸ；ｓａｍｅ　ｏｒｉｇｉｎ　ｐｏｌｉｃｙ；ｃｒｏｓｓ—ｄｏｍａｉｎ　ａｃｃｅｓｓ；ＸＭＬＨＴＴＰ　ｐｒｏｘｙ；ＪＳＯＮ　

０引　言　

传统的Ｗｅｂ应用采用同步交互过程，在这种情况下，用　

户首先向服务器发送一个ＨＴＴＰ请求，服务器执行某些任务　

再向用户返回一个ＨＴＴＰ响应。服务器在处理请求（特别是负　

载比较大）的时候，用户大多数时间处于等待状态，屏幕内容　

是一片空白。这是一种不连贯的用户体验。与传统Ｗｅｂ应用　

不同，ＡＪＸ（Ａａｓｙｎｃｈｒｏｎｏｕｓ　ＪａｖａＳｃｒｉｐｔａｎｄｘＭＬ）技术具备与服务　

器异步通信的能力，它允许Ｗｅｂ页面内容快速更新而无需刷　

ＨｔｔｐＲｅｑｕｅｓｔ是一个ＡＰＩ，它允许客户端的ＪａｖａＳｃｒｉｐｔ与远程服　

务器建立ＨＴＴＰ连接和交换数据，比如纯文本、ＸＭＬ和ＪＳＯＮ　

（ＪａｖａＳｃｒｉｐｔ　ｏｂｊｅｃｔ　ｎｏｔａｔｉｏｎ）；　

（４）使用ＪａｖａＳｃｒｉｐｔ绑定一切。　

在ＡＪＡｘ中，客户端ＪａｖａＳｃｒｉｐｔ通过动态修改ＤＯＭ树和　

ＣＳＳ来更新Ｗｅｂ页面，异步通信使用ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ对象动　

态地更新数据而无需重新加载整个Ｗｅｂ页面。　

ＡＪＡｘ的异步刷新能力使异域的多个内容或服务集成到　

单一的Ｗｅｂ应用成为可能，这种聚集更将大大地丰富用户体　

验。然而从有ＪａｖａＳｃｒｉｐｔ脚本开始，同源策略就是Ｗｅｂ应用浏　

览器端最为重要的安全保障策略，它使任何ＪａｖａＳｃｒｉｐｔ脚本都　

不能访问异域ＨＴＭＬ中任何信息。　

针对同源策略的限制，本文浅析了按需方式、使用　

新页面，使用户从请求／响应的循环中解放出来。　

ＡＪＸ构建于动态ＨＴＭＬ／ＡＤＨＴＭＬ技术之上，包括如下常　

见技术：　

（１）基于ＸＨＴＭＬ和ＣＳＳ标准的表示；　

（２）使用ＤＯＭ（ｄｏｃｕｍｅｎｔｏｂｊｅｃｔｍｏｄｅ）进行动态显示和交互；　

（３）使用ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ通过异步方式获取数据：ＸＭＬ．　

收稿日期：２００７－１１－２３　Ｅ—ｍａｉｌ：ｃｙｓｈｍｉｌｙ０１１０＠１６３．ｔｏｍ　

基金项目：国家科技基础条件平台基金项目（２ｏ０５ＤＫＡ３９００）。　

ＩＦＲＡＭＥ方式，重点介绍了ＸＭＬＨＴＴＰ代理＋ＪＳＯＮ的方法，并　

将此方法应用于项目中。　

作者简介：陈腊梅（１９８１一），女，山西霍州人，硕士研究生，研究方向为Ｗｅｂ开发与应用；　李为（１９６４一），女，辽宁沈阳人，硕士，副教授，　

研究方向为计算机网络及应用；　程振林（１９７７一），男，山东莱州人，博士，研究方向为计算机应用、并行处理；　张晓力（１９８２一），女，河北　

邢台人，硕士，研究方向为Ｗｅｂ开发与应用。　

———

５６８０・——　

１　ＡＪＡＸ工作原理　

图１是传统Ｗｅｂ应用的同步交互过程和ＡＪＡｘ的异步交　

互过程的比较图。　

＼　／　＼　／　

客户端页面、　１调田　２发出　

匦　里．壑：　求　

调函数Ｊ　；　

４显示Ｉ旦塑里苎Ｊ；３返回　

数据　：数据　

在传统Ｗｅｂ应用模式中，用户通过界面动作触发一个连　

接到Ｗｅｂ服务器的ＨＴＴＰ请求。服务器完成一些处理——接　

收数据、处理计算、再访问其它的数据系统，最后返回一个　

：页面显示　．　ｆ　ａＶａｓｏｒｉｐｔ：￣．－－－－　

ＨＴＭＬ页面到客户端。这是一种“点击．＞等待．＞看到新的页　

面．＞再点击一＞再等待”的割裂的用户体验。ＡＪＡＸ技术采用异　

步的方式实现用户与程序的交互，这样大部分计算工作都是　

在用户无察觉的情况下，交由服务器去完成的，用户无须等待　

服务器的通讯便能继续浏览页面。这种方式大大地改善了用　

户体验。　

图２　ＡＪＡＸ的工作过程　

同源策略，即一个脚本只能读取与它同源的窗口或文档　

的属性，这里的“源”是指域名、端口或者协议。该机制将来自　

不同域（假设域代表始发者）的Ｗｅｂ应用程序分离开来，也就　

是说，如果多个窗口或框架中的一些应用程序是从不同的服　

务器下载的，那么它们无法相互访问数据和脚本，浏览器的脚　

ＡＪＡＸ的工作原理是在用户和服务器之间加了一个中间　

层——ＡＪＡＸ引擎。通常要产生一个ＨＴＴＰ请求的用户动作　

现在通过ＪａｖａＳｃｒｉｐｔ调用ＡＪＡＸ引擎来代替。任何用户动作的　

响应不再要求直接传到服务器——例如简单的数据校验、一　

些页面导航——引擎自己就可以处理它。　

图２说明了ＡＪＡＸ的工作过程。当用户访问采用ＡＪＸ　Ａ

本只被允许访问来自同一站点的资源。例如，若一个脚本的　

源端口是８０并且协议是ＨＴＴＰ，那么就不能操作源为端口２１　

及ＦＴＰ协议的文档。　

为了进一步说明，表１给出了　ＡＪＸ．Ａｔｏｍ域名下的　

技术构建的Ｗｅｂ应用程序触发事件时，程序调用ＪａｖａＳｃｒｉｐｔ事　

件处理函数。在这个函数中，ＪａｖａＳｃｒｉｐｔ利用ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ　

对象实例向服务器发送请求信息，同时指定回调函数。信息　

发送之后，ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ判断ＨＴＴＰ请求的状态。当服务器　

完成数据处理并成功返回信息之后，在回调函数中用对返回　

的ＸＭＬ文档信息或文本信息进行相应处理，并更新ＨＴＭＬ页　

面内容。　

比较示例。　

表１　同源策略限制跨域访问示例　

ＵＲＬ　

ｈｔｔｐ：／／ｗｗｗ．ＡＪＡＸ．ｃｏｍ／ｄｉｒ２／ｏｔｈｅｒ．ｈｔｍｌ　

ｈｔｔｐ：／／ｗｗｗ．ＡＪＡＸ．ｃｏｍ／ｄｉｒ／ｉｎｎｅｒ／ｏｔｈｅｒ．ｈｔｍ　

ｈｔｔｐｓ：／／ｗｗｗ．ＡＪＡＸ．ｃｏｍ／ｄｉｒ２／ｏｔｈｅｒ．ｈｔｍｌ　

ｈｔｔｐ：／／ｎｅｗｓ．ＡＪＡＸ．ｃｏｍ／ｄｉｒ２／ｏｔｈｅｒ．ｈｔｍｌ　

ｈｔｔｐ：／／ｗｗｗ．ＡＪＡＸ．ｃｏｍ：８１／ｄｉｒ２／ｏｔｈｅｒ．ｈｔｍ　

度量结果　

成功　

成功　

失败　

失败　

失败　

协议不同　

主机不同　

端口不同　

原因　

２同源策略对ＡＪＡＸ的影响　

运行ＡＪＡＸ应用程序的核心代码是ＪａｖａＳｃｒｉｐｔ。由于Ｉｎ—　

ｔｅｍｅｔ完全开放的性质，引入ＪａｖａＳｃｒｉｐｔ这样的语言，安全显得　

尤为重要。ＪａｖａＳｃｒｉｐｔ抵御恶意代码的第一道防线是它本身不　

支持某些功能…。例如，客户端ＪａｖａＳｃｒｉｐｔ没有提供在客户的　

计算机上写文件、删除文件或者创建目录等方法。其中，最重　

要的安全限制是同源策略。　

同源策略的精髓很简单：它认为来自任何站点装载的信　

赖内容是不安全的，其目的在于防止某个文档或者脚本从多　

个不同“ｏｒｉｇｉｎ”（源）装载。当来自多个始发源的内容以某种　

方式被集成到一个单一的应用程序中时，一些内容相互之间　

可能具有不同的信任级别，或者它们可能根本没有必要相互　

信任。同源策略满足了这种需求，它把来自不同始发者的内　

容分离开来，将它们之间的冲突减至最少。这种策略给Ｊａ－　

ｖａＳｃｒｉｐｔ以安全保障，同时也限制了基于ＪａｖａＳｃｒｉｐｔ的跨域访　

问技术。　

同源策略是对于客户端脚本（尤其是ＪａｖａＳｃｒｉｐｔ）的重要安　

全度量标准。它首先出自ＮｅｔｓｃａｐｅＮａｖｉｇａｔｏｒ２．０，之后历经Ｎａｖｉ－　

ｇａｔｏｒ２．０１和Ｎａｖｉｇａｔｏｒ２．０２的修正完善　。　

图ｌ传统Ｗｅｂ应用的同步交互过程和ＡＪＡＸ的异步交互过程的比较　

一

５６８１—　

３　ＡＪＡＸ跨域访问　

ＡＪＡＸ跨域访问是指利用ＡＪＡＸ，在不同域的Ｗｅｂ页面间　

相互操作，实现一个对用户来说“无缝”的应用。同源策略的　

目的是控制应用程序与远程服务器的交互。要想实现ＡＪＡＸ　

的跨域访问，必须绕过同源策略的限制。避开同源策略主要　

有以下两种方式。　

３．１避开同源策略：按需方式　

按需方式是指使用ＪａｖａＳｃｒｉｐｔ脚本在页面内动态生成　

＜ｓｃｒｉｐｔ＞标记，将其ｓｒｃ属性指向异域以完成对跨域页面的调　

用。核心代码如下：　

（１）ｆｕｎｃｔｉｏｎ　ｌｏａｄＣｏｎｔｅｎｔ０　

（２）｛　

（３）　ｖａｒ　Ｓ＝ｄｏｃｕｍｅｎｔ．ｃｒｅａｔｅＥｌｅｍｅｎｔ（’ＳＣＲＩＰＴ”）；　

（４）　ｓ．ｓｒｃ＝’ｈｔｔｐ：／／ｗｗｗ．ａｎｏｔｈｅｒｄｏｍａｉｎ．ｃｏｒｎ（／ＴｅｓｔＣｒｏｓｓＤｏ—　

ｍｉｎｅ．ｈｔｍｌ？ｆ＝ｓｅｔＤｉｖＣｏｎｔｅｎｔ’：　

（５）ｄｏｃｕｍｅｎｔ．ｂｏｄｙ．ａｐｐｅｎｄＣｈｉｌｄ（ｓ）；　

（６））　

（７）　

（８）ｆｕｎｃｔｉｏｎ　ｓｅｔＤｉｖＣｏｎｔｅｎｔ（ｖ）　

（９）｛　

（１０）ｖａｒ　ｓｈｏｗＤａｔａＲｅｓｕｌｔ＝ｄｏｃｕｍｅｎｔ．ｇｅｔＥｌｅｍｅｎｔＢｙｌｄ（”ｓｈｏｗ—　

ＤａｔａＲｅｓｕｌｔ”）；　

（１　１）　ｓｈｏｗＤａｔａＲｅｓｕｌｔ．ｉｎｎｅｒＨＴＭＬ：ｖ；　

｝　

当用户触发ｌｏａｄＣｏｎｔｅｎｔ事件时，ＪａｖａＳｃｒｉｐｔ脚本动态控制　

生成一个新的ｓｃｒｉｐｔ标签（行（３）），此时页面开始下载ｓｒｃ所指　

向的‘ｈｔｔｐ：ｌｌｗｗｗ．ａｎｏｔｈｅｒｄｏｍａｉｎ．ｃｏｍ／ＴｅｓｔＣｒｏｓｓＤｏｍｉｎｅ．ｈｔｍｌ’，结　

束时回调其中的ｓｅｔＤｉｖＣｏｎｔｅｎｔ（行（４）），从而更新网页上一个　

ｄｉｖ：ｉｄ＝‘ｓｈｏｗＤａｔａＲｅｓｕｌｔ’的内容（行（１０）、行（１１））。在这里有一　

点必须注意：ｓｒｃ属性所指异域的返回内容必须是合法的Ｊａｖａ—　

Ｓｃｒｉｐｔ脚本。　

此方案存在的缺陷是：ｓｃｒｉｐｔ的ｓｒｃ属性完成该调用时采　

取的方式是‘ｇｅｔ’，如果请求时传递的字符串过大时，可能会无　

法正常运行。这种方法较适合聚合类门户使用。　

３．２避开同源策略：使用ＩＦＲＡＭＥ　

使用ＩＦＲＡＭＥ是指设置一个带有框架的子域页面，即在　

一

级域页面中内嵌一个或者多个ＩＦＲＡＭＥ，内嵌的ＩＦＲＡＭＥ为　

子域，设置子域的ｄｏｃｕｍｅｎｔ．ｄｏｍａｉｎ和一级域相同。然后在不　

同予域名的页面发起不同的请求，把结果通过ＪａｖａＳｃｒｉｐｔ进行　

传递即可。　

使用ＩＦＲＡＭＥ这种方式能够获取数据来显示，但由于在　

跨域访问的情况下，父窗口与子窗口的交互被拒绝，它的应用　

受到了限制。　

４　ＸＭＬＨＴＴＰ代理＋ＪＳＯＮ实现ＡＪＡＸ跨域访问　

ＸＭＬＨＴＴＰ代理是指在本域与异域通讯时加一中间层，　

由它向异域服务器进行读取数据的操作。图３为ＸＭＬＨＴＴＰ　

代理。这种代理机制通过调解Ｗｅｂ浏览器和服务器之间的　

ＨＴＴＰ请求和响应使Ｗｅｂ浏览器可以绕过同源策略。这一中　

・——

５６８２－——　

图３　ＸＭＬＨＴＴＰ代理　

间层可以使用ＰＨＰ、ＪＳＰ、ＡＳＰ、Ｓｅｒｖｌｅｔ等任何具备网络通讯功　

能的语言。　

使用一个服务器端代理，浏览器可以将请求发给Ｗｅｂ服　

务器。Ｗｅｂ服务器与外部Ｗｅｂ服务器联系，以请求适当的信　

息。当Ｗｅｂ服务器收到响应时，把响应转发给浏览器。其结　

果就是外部数据可以进行无缝传输。　

ＸＭＬＨＴＴＰ代理方式的ＡＪＡＸ跨域访问如图４所示。客　

户端Ｗｅｂ应用程序将第三方ＵＲＬ作为ＨＴＴＰ请求中的一个　

请求参数传递给ＡＪＡＸ代理；代理将请求转发给要访问的异　

域。异域进行业务处理后，把处理结果返回给ＸＭＬＨＴＴＰ代　

理。ＸＭＬＨＴＴＰ代理获得数据后，剩下要完成的工作就和　

ＡＪＡＸ通常的工作过程相一致。由此看，ＸＭＬＨＴＴＰ代理的使　

用隐藏在Ｗｅｂ应用程序开发人员所开发的后台程序中。对　

于Ｗｅｂ应用程序开发人员而言，它看上去可能完全不具有同　

源策略。　

＠　＠　①　

ｒ客户

ｌ触发事件　

端页面、　）＼　２发出　／ＸＭ

ｌＡ接受参数　

ＬＨＴＴＰ代　

２指定【旦Ｉ　Ｉ　＋　

调函数　

／——　—＿、　

Ｂ从参数中　

获得异域　业务处理　

：页面显示　～　—

６昂示　调函数Ｊ

—、ＪＪａｖａＳｃｒｉｐｔ￣　

数据　

　５返回　

—　／　

数据　Ｉ　

的ｕＲＬ　

Ｉ异域Ｃ连接

’　

ＵＲＬ　ｌ

ｌ　

’　

ＩＤ获得数据ｌ　　：

数据　

图４　ＸＭＬＨＴＴＰ代理工作原理　

下面给出设有ＸＭＬＨＴＴＰ代理的ＡＪＡＸ工作过程示例程　

序。示例程序分别为客户端、中间层以及异域的核心代码，其　

中中间层为Ｓｅｒｖｌｅｔ。　

在Ｃｌｉｅｎｔ端，将常用的ｕｒｌ＝“ＰｒｏｃｅｓｓＳｅｒｖｌｅｔ”修改为如下　

代码：　

ｕｒｌ＝“ＰｒｏｘｙＳｅｒｖｌｅｔ？ｕｒｌ＝”＋ｕｒｌ　

这样就把以异域ｕｒｌ为参数的字符串传给了ＸＭＬＨＴＴＰ　

代理。　

在中间层，ＸＭＬＨＴＴＰ代理为一个ｓｅｒｖｌｅｔ类，本例中将其　

定义为ＰｒｏｘｙＳｅｒｖｌｅｔ。代码如下所示：　

（１）ｐｕｂｌｉｃ　ｃｌａｓｓ　ＰｒｏｘｙＳｅｒｖｌｅｔ　ｅｘｔｅｎｄｓ　ＨｔｔｐＳｅｒｖｌｅｔ｛　

（２）　

（３）ｐｒｏｔｅｃｔｅｄ　ｖｏｉｄ　ｓｅｒｖｉｃｅ（ＨｔｔｐＳｅｒｖｌｅｔＲｅｑｕｅｓｔ　ｒｅｑ，ＨｔｔｐＳｅ—　

ｖｒｌｅｔＲｅｓｐｏｎｓｅ　ｒｅｓｐ）　

（４）ｔｈｒｏｗｓ　ＳｅｒｖｌｅｔＥｘｃｅｐｔｉｏｎ，ＩＯＥｘｃｅｐｔｉｏｎ｛　

（５）　

（６）　

ＵＲＬ　ｕｒｌ＝ｎｅｗ　ＵＲＬ（ｒｅｑ．ｇｅｔＰａｒａｍｅｔｅｒ（“ｕｒｌ”））：　

（７）　

（８）　

ＤａｔａｌｎｐｕｔＳｔｒｅａｍ　ｄｉｓ＝ｎｅｗ　ＤａｔａｌｎｐｕｔＳｔｒｅａｍ（ｕｒ１．ｏｐｅｎ一　

字节数比较可以发现，对于等效的ＪＳＯＮ和ＸＭＬ有效负载，前　

者总是小于后者。　

下面是ＪＳＯＮ数据格式的示例代码：　

（１）｛‘‘ａｄｄｒｅｓｓｂｏｏｋ”：｛“ｎａｍｅ”：“Ｍａｒｙ　Ｌｅｂｏｗ”，　

Ｓｔｒｅａｍ（））；　

【９）　Ｓｔｒｉｎｇ　ｌｉｎｅ；　

（１０）ＰｒｉｎｔＷｒｉｔｅｒ　ｐｗ＝ｒｅｓｐ．ｇｅｔＷｒｉｔｅｒ０；　

（１１）　ｗｈｉｌｅ（（１ｉｎｅ＝ｄｉｓ．ｒｅａｄＬｉｎｅ０）！＝ｎｕｌ１）｛　

（１２）ｐｗ．ｐｆｉｎｔｌｎ（１ｉｎｅ）；　

（１３）　｝　

（１４）｝　

（１５）｝　

在这段示例代码中，ｐｗ是ＰｒｉｎｔＷｒｉｔｅｒ的一个实例，它用来　

输入从ＤａｔａｌｎｐｕｔＳｔｒｅａｍ读到的数据。ＵＲＬ的对象ｕｒｌ指向异　

域（通过客户端传来的参数获得），它通过调用ｏｐｅｎＳｔｒｅａｍ方法　

打开了一个指向异域的连接，并且将从此连接中读取到的输　

入流返回给ＤａｔａｌｎｐｕｔＳｔｒｅａｍ的实例。由此可知，ＸＭＬＨＴＴＰ代　

理的主要作用有两点：　

（１）打开指向异域的连接；　

（２）获得连接中的数据。　

远程服务器上的业务处理类也为ｓｅｒｖｅｌｅｔ类，其核心代码　

如下所示：　

（１）ｐｕｂｌｉｃ　ｃｌａｓｓ　ＰｒｏｃｅｓｓＳｅｒｖｌｅｔ　ｅｘｔｅｎｄｓ　ＨｔｔｒｌＳｅｒｖｌｅｔ｛　

（２）　

（３）ｐｒｏｔｅｃｔｅｄ　ｖｏｉｄ　ｓｅｒｖｉｃｅ（ＨａｐＳｅｒｖｌｅｔＲｅｑｕｅｓｔ　ｒｅｑ，ＨｔｔｐＳｅ—　

ｒｖｌｅｔＲｅｓｐｏｎｓｅ　ｒｅｓｐ）　

（４）ｔｈｒｏｗｓ　ＳｅｒｖｌｅｔＥｘｃｅｐｔｉｏｎ，ＩＯＥｘｃｅｐｔｉｏｎ｛　

（５）　

（６）　业务处理过程　

（７）　…　

（８）　Ｓｔｒｉｎｇ　ｒｅｓｐｏｎｓｅＴｅｘｔ＝处理结果数据；　

（９）　ｒｅｓｐ．ｇｅｔＷｒｉｔｅｒ０．ｐｒｉｎｔ（ｒｅｓｐｏｎｓｅＴｅｘｔ）；　

（１０）　｝　

（１１）｝　

这段代码主要是将业务处理的结果数据ｒｅｓｐｏｎｓｅＴｅｘｔ传　

给中间层代码中的ｌｉｎｅ变量。最后，回调函数将得到的数据　

显示在客户端页面。　

通常在ＡＪＡＸ应用程序中，ＸＭＬ作为数据传输的媒介　。　

服务器将响应数据以ＸＭＬ文档方式返回给浏览器客户端。通　

过ＤＯＭ技术，这些返回的ＸＭＬ文档能够得到准确的解析。　

采用ＤＯＭ的复杂性源于其基于函数的根，这使得对数据树的　

简单修改或访问都需要进行无数次方法调用　。　

ＤＯＭ在各种浏览器中的实现细节不尽相同，这一过程将　

带来极为复杂的编程模式，其跨浏览器兼容性出现问题的可　

能性极大。　

ＪＳＯＮ是一种轻量级的数据交换格式　。它不仅减少解析　

ＸＭＬ带来的性能问题和兼容性问题，而且与ＪａｖａＳｃｒｉｐｔ引擎自　

然匹配。　

ＪＳＯＮ的另一个优点是它的非冗长性。目前还没有正式　

的研究表明比ＸＭＬ有更高的线上传输效率；不过通过简单的　

（２）　“ａｄｄｒｅｓｓ”：｛　

（３）　“ｓｔｒｅｅｔ”：“５　Ｍａｉｎ　Ｓｔｒｅｅｔ”　

（４）　“ｃｉｔｙ”：“ＢｅｉＪｉｎｇ，ＣＨＩＮＡ”，　

（５）　“ｚｉｐ”：１０２２０６，　

（６）　｝，　

（７）　“ｐｈｏｎｅＮｕｍｂｅｒｓ”：［　

（８）　“６１９　３３２—３４５２”，　

（９）　“６６４　２２３．４６６７”　

（１０）　］　

（１１）　｝　

（１２）｝　

使用ＪａｖａＳｃｒｉｐｔ访问ＪＳＯＮ中的名称：ａｄｄｒｅｓｓｂｏｏｋ．ｎａｍｅ；访　

问ＪＳＯＮ中的地址：ａｄｄｒｅｓｓｂｏｏｋ．ａｄｄｒｅｓｓ．ｓｒｔｅｅｔ；访问ＪＳＯＮ中的　

电话号码第一位：ａｄｄｒｅｓｓｂｏｏｋ．ａｄｄｒｅｓｓ．ｐｈｏｎｅＮｕｍｂｅｒｓ［０】。　

ＪＳＯＮ开创一条比ＤＯＭ技术更为便捷的数据访问途径。　

ＸＭＬＨＴＴＰ代理＋ＪＳＯＮ避开了同源策略的限制，使ＡＪＡＸ跨域　

数据传输更具高效性和稳定性。　

５　ＸＭＬＨＴＴＰ代理＋ＪＳＯＮ方式在异地软件共享　

系统中的应用　

“科技基础条件平台异地软件共享系统”（以后称“项目”）　

包括两类Ｗｅｂ应用：“注册中心”Ｗｅｂ应用（以后称“注册中心　

应用”）和“共享程序发布方”Ｗｅｂ应用（以后称“发布方应用”）。　

其中，发布方应用运行在共享软件提供商（以后称“提供商”）的　

服务器上，而注册中心应用运行在管理中心（以后称“注册中　

心”）的服务器上。图５描述了项目中ＡＪＡＸ跨域访问的场景：　

提供商使用独立的发布方应用系统在线发布应用软件以共　

享，注册中心对所有提供商发布的共享软件进行实时地统计　

和操作。　

提供商１　

、

发布　

注册中心应用　

／　

ＵＲＬ　

援　Ｉ三篮　

应用程序１１　

应用程序１２　

应用程序１ｎ　

应用程序２１　

鍪　主＼册中心跨域访问　兰（ＵＲＬ　２：）　一

提供商２　

、

发布　

应用程序２２　

厂————］／Ｉ　用　厅２２

／　

应用程序２ｎ　

应用程序ｎｌ　

应用程序ｎ２　

提供商ｎ　

发布　

应用程序ａｎ　

一　

应用程序ｎｎ　

图５项目中ＡＪＡＸ跨域访问的场景　

－——

５６８３－——　

图６细化了项目中使用ＸＭＬＨＴＴＰ代理与ＪＳＯＮ实现　

ＡＪＡＸ跨域访问的细节。现说明如下：　

（１）用户访问注册中心应用程序的触发事件时，调用Ｊａｖａ—　

Ｓｃｒｉｐｔ处理函数。此函数完成两项任务：①向ＸＭＬＨＴＴＰ代理　

ＡＪＡＸ的核心，同源策略对ＪａｖａＳｃｒｉｐｔ的影响同时限制了ＡＪＡＸ　

跨域访问。　

本文说明了如何避开同源策略的限制，并结合实例介绍　

了ＸＭＬＨＴＴＰ代理＋ＪＳＯＮ方法。实践证明该法大大提高了数　

据解析和传输效率，有效地解决了该项目中访问并展现多　

“源”数据的问题，使用户更具交互性的体验。　

发出ＨＴＴＰ请求；②指定回调函数。在向ＸＭＬＨＴＴＰ代理发出　

ＨＴＴＰ请求时，把各个发布方应用中的处理类的ＵＲＬ作为参　

数一同传递过去；　

（２）ｘＭＬＨＴＴＰ代理根据获得的参数解析出不同的ＵＲＬ，　

同时打开与不同ＵＲＬ的连接；　

（３）提供商通过发布方应用共享软件，发布方应用对所有　

已发布程序进行实时动态地统计。提供商每发布一个共享软　

件，系统将此软件的描述自动添加到原有的满足ＪＳＯＮ格式的　

字符串中；　

参考文献：　

【１］Ｄａｖｉｄ　Ｆｌａｎａｇａｎ．ＪａｖａＳｃｒｉｐｔ权威指南［Ｍ】．４版．北京：机械工业　

出版社，２００３．　

［２］　Ｊｅｓｓｅ　Ｒｕｄｅｒｍａｎ．Ｔｈｅ　ｓａｍｅ　ｏｒｉｇｉｎ　ｐｏｌｉｃｙ［ＥＢ／ＯＬ］．ｈｔｔｐ：／／　

ｗｗｗ．ｍｏｚｉｌｌａ．ｏｒｇ／ｐｒｏｊｅｃｔｓ／ｓｅｃｕｒｉｔｙ／ｃｏｍｐｏｎｅｎｔｓ／ｓａｍｅ—ｏｒｉｇｉｎ．　

ｈｔｍ１．　

（４）ＸＭＬＨＴＴＰ代理获得跨域数据，并且将所有发布方的　

数据收集起来组织成一个新的满足ＪＳＯＮ格式的字符串，最后　

传给回调函数；　

（５）回调函数获得数据后，通过控制ＣＳＳ来更新Ｗｅｂ页面，　

将数据呈现在客户端页面。　

［３３］　柯自聪．ＡＪＡＸ开发精要【Ｍ】　Ｅ京：电子工业出版社，２００６：６３—６８．　

［４】Ｄａｎｉｅｌ　Ｒｕｂｉｏ．ＪＳＯＮ简介【ＥＢ／ＯＬ］．ｈｔｔｐ：／／ｄｅｖ２ｄｅｖ．ｂｅａ．ｃｏｍ．ｃｎ／　

ｔｅｃｈｄｏｃ／２００７／０３／ｊａｖａ—ｓｏａ—ｉｎｔｒｏｄｕｃｔｉｏｎ－ｊｓｏｎ．ｈｔｍ１．　

［５］介绍ＪＳＯＮ［ＥＢ／ＯＬ］．ｈｔｔｐ：／／ｗｗｗ．ｊｓｏｎ．ｏｒｇ／ｊｓｏｎ－ｚｈ．ｈｔｍ１．　

【６】　赵永屹，宿红毅，胡韶辉．基于ＡＪＡＸ与Ｊ２ＥＥ的新型Ｗｅｂ应　

６结束语　

ＡＪＡＸ打破了使用页面重载的惯例技术组合，带来了更为　

强大的Ｗｅｂ体验，如何充分利用ＡＪＡｘ的异步刷新特征实现　

更好的信息共享成为Ｗｅｂ开发人员关注的焦点。ＪａｖａＳｃｒｉｐｔ是　

用的设计与实现［Ｊ］．计算机工程与设计，２００７，２８（１）：１８９—１９２．　

【７］　王星，潘郁．基于ＡＪＡＸ技术的Ｗｅｂ模型在网站开发中的应用　

研究［Ｊ】．微计算机信息，２００６，２２（９）：２０６．２０７．　

［８】　吕林涛，万经华，周红芳．基于ＡＪＡｘ的Ｗｅｂ无刷新页面快速　

更新数据方法［Ｊ】．计算机应用研究，２００６，２３（１１）：１９９—２０１．　

发布方应用（ＵＲＬ１）　

发布应用程序１ｎ　

注册中心应用（ＵＲＬ）　

客户端　

ｌ指向　

服务器端　

向ＪＳＯＮ１　

垫　

ＸＭＬＨｔｔｐ代理　

ＪＳＯＮ格式的数据　

（ＪＳＯＮ１）　

已应用程序１１的描述　

１指定＼　

～　

中添加　

应用　

程序　

】ｎ的　

描述　

使用　

４传回ＪＳＯＮ　

ＵＲＬＣｏｎｎｅｃｔｉｏｎ　

已应用程序１２的描述　

／回调　

墼　

５页面呈现ｌ　

格式的数据　

与不同ＵＲＬ连　

应用程序１ｎ描述　

应用程序列表　

得ＪＳＯＮ格式数据　

应用程序ｌ１的描述　

应用程序ｌ２的描述　

；　

＋　

ＪＳＯＮ１数据　

发布方应用（ＵＲＬｎ）　

应用程序１ｎ的描述　

应用程序ｎ１的描述　

应用程序ｎ２的描述　

ＪＳＯＮｎ数据　

应用程序１１１１的描述　

图６　ＸＭＬＨＴＴＰ代理＋ＪＳＯＮ的应用　

・——

５６８４－——