源:http://blog.csdn.net/hitzhang/archive/2009/11/09/4790304.aspx
这几天在试用淘宝的open api功能,看了它的实例有php、java、c#、ruby,可惜都是服务器端例子,就突然有了想法,是不是可以用javascript写一个客户端的例子。淘宝open api虽然其它地方做的不是很人性化,但是还提供了一个伪代码的例子,既然这样,说干就干。说实话,以前从来没有写过javascript代码,不过有网络也不是什么大问题,依靠w3school和百度基本上花了一个小时就完成了,在dreamweaver上面使用“实时视图”,看结果也没有问题,可是一旦用firefox或者ie打开,就不行了,获取不了淘宝api地址提供的json或者xml数据,刚开始我还以为是编码的问题,xmlhttprequest的处理写的有误,但是改了很多,问题依旧,很是恼火,就仔细看了xmlhttprequest的说明,后来才恍然大悟:javascript是不能跨域访问服务器的。看来不做前端开发就会很多基础问题都不懂啊!
那么怎么解决呢?百度google了很多看到可行并试验过的解决办法有:
1. 在服务器端架设代理,用php或者别的语言写一个proxy函数,通过这个函数完成对第三方域名的数据请求,这个办法和我最开始的纯javascript方案冲突,没有选择,不过的确可用
2. 采用javascript动态资源载入的办法,就是通过javascript动态创建一个Dom script元素:createElement(),然后设置该script元素的src地址是你想跨域请求数据的url,这样第三方域名的数据就可以被载入进来了,但是有一个缺点就是,第三方域名的数据必须是正确的javascript格式数据(比如json数据),在YUI上的GET工具就有一个封装好的实现,大家可以放心、快捷的使用,最开始我也是想用这个办法,毕竟淘宝open api的数据是支持json格式的,但是在实际过程中又面临这样的问题:淘宝open api返回的json数组,是没有定义变量名的,而这样的joson数组在javascript是非法的,因此任然得不到调用,这个办法失败,但是这是一个很好的办法,到时候可以在数据统计js代码上做一些文章,比如说进行用户调查等
3. 采用iframe的办法,方法和方法2比较类似,也是通过javascript动态创建一个Dom iframe元素,然后设置iframe元素的地址是你想跨域请求的数据的url,然后通过javascript获取iframe元素的
标签里面的内容就是你想要得到的跨域数据了。这个办法的缺点就是浏览器缓存严重,如果同一个url的数据变化频率高的话,这不是一个好办法,还好淘宝open api在他的api地址里面加入了一个和时间相关的md5签名,每次请求的url刷新一次,由于时间不同,url都是不一样的,浏览器一般就缓存不了了(对于opera这种缓存超牛的浏览器没有测试),最后就用了这个方案解决了经过这次折腾有两个感受:
1. 前端也是有很多东西可以学习的
2. firefox一定要学会firebug,它能提供给你很多前端开发、调试的帮助