Ajax的应用中,因为安全的问题,浏览器默认是不支持跨域调用的。传统解决的方法,包括:(参考http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/)python
以上方法都各有缺陷,都不是很好多解决方案。后来出现了一种叫JSON with Padding 的技术,简称 JSONP .(原理参考http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/),应用JSONP能够实现JSON数据的跨域调用。很是的幸运,JQuery1.2之后支持JSONP的应用。下面侧重说明在JQuery中,Json的跨域调用。json
应用JSONP实现Json数据跨域调用,须要服务器端与客户端的合做完成。引用Jquery官方的例子,客户端掉用以下:api
$.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取得的数据可能以下:app
JQUET0988788({"account":"XX","passed":"true","error":"null"})less
总结,用JSONP要作两件事:dom
一、请求地址加参数:jsoncallback=?
二、服务器段把jsoncallback的值做为方法名传回来,如JQUET098788(...)