动态script标签技术结合JSON数据交换格式解决Ajax的跨域问题
- 格式：doc
- 大小：17.50 KB
- 文档页数：5
动态ｓｃｒｉｐｔ标签技术结合ＪＳＯＮ数据交换格式解决Ａｊａｘ的跨域问题
作者：孙朝伟
来源：《中国新技术新产品》2008年第21期
摘要：本文讨论了结合使用JSON和Dynamic script Tag技术来解决Ajax应用中跨域访问第三方Web服务的问题。
关键词：Ajax；JSON；动态script标签；跨域
1 引言
当前多数的Web服务都是采用XML作为数据交换格式。
因此当我们在Ajax应用中会使用XMLHttpRequest对象来访问Web服务的时候就会遇到跨域限制问题。
跨域问题的实质是由于浏览器对JavaScript脚本的安全限制使得在Ajax应用中只能访问本域的Web服务。
我们通常选用的解决方案是在本域的服务器上建立一个跨域代理（Cross Domain Proxy）来间接的访问第三放Web服务。
但是跨域代理需要在本域的服务器上运行，不仅浪费服务器资源，而且也增加了开发和维护成本。
如果我们在编写Web服务的时候放弃XML作为数据交换格式，而采用JSON（JavaScript Object Notation）数据交换格式，那么将能够利用动态建立script标签的方式来规避跨域限制。
2 动态script标签技术
我们知道，script标签是属于HTML标签，而HTML标签是没有跨域限制的。
从而我们可以使用script标签中的src属性来访问其他任意域的URL链接来获取数据。
文档对象模型（DOM，Document Object Model）为我们提供了动态建立script标签的能力。
我们可以在需要的时候使用document.createElement()方法来建立一个script标签对象，并使用setAttribute()方法来设定它的src、id、type、language等属性，这样当我们使用
appendChild()方法将这个刚刚建立的script标签添加到网页中后，我们就能够得到这个script标签src属性的URL所返回的数据。
3 JSON数据交换格式
Web服务使用XML作为数据交换格式是不能用script标签访问Web服务并获取数据的。
但如果Web服务使用JSON作为数据交换格式就不会存在这个问题了。
3.1 JSON的定义
JSON建构于两种结构：
“名称/值”对的集合（A collection of name/value pairs）。
不同的语言中，它被理解为对象（object），纪录（record），结构（struct），字典（dictionary），哈希表（hash table），有键列表（keyed list），或者关联数组（associative array）。
值的有序列表（An ordered list of values）。
在大部分语言中，它被理解为数组（array）。
简单来说，JSON实际上是利用现代编程语言大多支持的一些基本数据结构，例如数组、字符串、对象等。
进行抽象而来的一种通用数据表述格式。
这使得JSON数据格式在能够支持这些数据结构的编程语言之间能够进行数据的交换。
3.2JSON格式举例
使用XML格式表示一个学生的姓名、学号、成绩等信息，可能如下：
＜?xml v ersion=“1.0”?＞
＜students＞
＜student＞
＜name＞张三＜/name＞
＜studentID＞200801＜/studentID＞
＜grade＞80＜/grade＞
＜/student＞
＜student＞
＜name＞李四＜/name＞
＜studentID＞200802＜/studentID＞
＜grade＞90＜/grade＞
＜/student＞
＜/students＞
上述XML转换为JSON格式表示： var StudentsJSON = {
student:[
{
name:'张三',
studentid:200801,
grade:80
},
{
name:'李四',
studentid:200802,
grade:90
}
]
}
从上面的例子中我们可以看出，XML和JSON有比较好的对应关系，XML数据可以非常容易的转换到JSON。
事实也正是如此，大多数的XML数据再转换为JSON的时候都不会有问题。
例如在http://www.thomasfrank.se/xml_to_json.html网站中就提供一个自动进行XML to JSON转换的JavaScript脚本。
3.3 JSON数据的访问
JSON数据的访问相对于XML要简单很多。
可以如同JavaScript对象一样访问JSON数据。
例如在上述JSON数据中，我们要访问第一个学生的姓名，只要写：
StudentsJSON.student[0].name就可以了。
要访问第二个同学的学号：
StudentsJSON.student[1].studentid
4 实例研究
雅虎为我们提供了一个图片搜索Web服务，URL为：
/ImageSearchService/V1/imageSearch。
这个Web服务支持返回JSON 格式数据。
该Web服务接受的参数为如下：
只要动态构建该URL并加入动态创建的script标签中的src属性中即可获得Web服务返回的JSON数据。
查询的结果都在ResultSet.Result[0]数组中。
当我们构建好查询网页后，可以在本机上用IE或Firefox等浏览器直接打开该网页并测试。
5 实验结果及比较
可以看到采用动态script标签技术结合JSON数据交换格式的方法使得跨域访问Web服务非常的容易。
然而在Web服务中使用JSON数据交换格式相对于XML又有那些优缺点呢？下面从五个方面进行分析：
可读性：JSON和XML的可读性可谓不相上下，JSON采用常见的语法数据结构，XML 使用的是规范的标签形式。
可扩展性：XML天生有很好的扩展性，而JSON也不逊于XML。
编码难度：XML有丰富的编码工具，比如Dom4j、JDom等，JSON也有提供的工具，但是JSON的编码明显比XML容易许多，即使不借助工具也能写出JSON的代码，可是要写好XML就不太容易了。
解码难度：XML的解析得考虑子节点父节点，让人头昏眼花，而JSON的解析难度几乎为0。
这一点XML输的真是没话说。
流行度：XML已经被业界广泛的使用，而JSON才刚刚开始，但是在Ajax这个特定的领域，未来的发展也许XML要让位于JSON。
到时Ajax就应该变成Ajaj （Asynchronous JavaScript and JSON）了。
参考文献
[1]json. . /json-zh.html
[2]Nicholas C. Zakas. JavaScript高级程序设计. 人民邮电出版社，2006年。
