使用getJSON解决jquery跨域问题

    Ajax的应用中,由于安全的问题,浏览器默认是不支持跨域调用的。传统解决的方法,包括:(参考http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/

Local proxy:
Needs infrastructure (can't run a serverless client) and you getdouble-taxed on bandwidth and latency (remote - proxy - client).
		
Flash:
Remote host needs to deploy a crossdomain.xml file, Flash isrelatively proprietary and opaque to use, requires learning a one-offmoving target programming langage.

Script tag:
Difficult to know when the content is available, no standard methodology, can be considered a "security risk".

以上方法都各有缺陷,都不是很好多解决方案。后来出现了一种叫JSON with Padding的技术,简称 JSONP.(原理参考 http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/),应用JSONP可以实现JSON数据的跨域调用。非常的幸运,JQuery1.2以后支持JSONP的应用。下面侧重说明在JQuery中,Json的跨域调用。

    应用JSONP实现Json数据跨域调用,需要服务器端与客户端的合作完成。引用Jquery官方的例子,客户端掉用如下:

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(data) {
	$.each(data.items, function(i, item) {
		$("<img/>").attr("src", item.media.m).appendTo("#images");
		if (i == 3)
			return false;
	});
});

    注意这里调用的地址中jsoncallback=?是关键的所在!其中,符号会被Query自动替换成其他的回调方法的名称,具体过程和原理我们这里不理会。我们关心的是jsoncallback=?起什么作用了?原来jsoncallback=?被替换后,会把方法名称传给服务器。我们在服务器端要做什么工作呢?服务器要接受参数jsoncallback,然后把jsoncallback的值作为JSON数据方法名称返回,比如服务器是JSP,我们会这样做:

  ...
  String jsoncallback=request.getParameter("jsoncallback");
  ...
  out.print(jsoncallback+"({\"account\":\"XX\",\"passed\":\"true\",\"error\":\"null\"})");

  Jquery取得的数据可能如下:

JQUET0988788({"account":"XX","passed":"true","error":"null"})

    总结,用JSONP要做两件事:
      1. 请求地址加参数:jsoncallback=?
      2. 服务器段把jsoncallback的值作为方法名传回来,如JQUET098788(...)
 
博文来源:http://www.javaeye.com/topic/260647

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 9
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值