ajax 跨域请求问题
JQuery1.2后getJSON方法支持跨域读取json数据,原理是利用一个叫做jsonp的概念。当然,究其本质还是通过script标签动态加载js,似乎这是实现真正跨域的唯一方法。 getJSON的用法JQuery手册已经写得很详细,参考手册就可以了,很简单。需要指出的一点是getJSON利用的jsonp需要客户端与服务端作出配合。
不出意外的话应该已经可以跨域读取了。 的中,由于安全的问题,浏览器默认是不支持跨域调用的。传统的方法,包括:(参考http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/) Local proxy:Needs infrastructure (can't run a serverless client) and you get double-taxed on bandwidth and latency (remote - proxy - client).Flash:Remote host needs to deploy a crossdomain.xml file,Flash is relatively proprietary and opaque to use,requires learning a one-off moving 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官方的例子,客户端掉用如下:
4 |
$("<img/>" ).attr( "src" "#images" ); |
5 | if( i == 3 ) return false ; |
7 | }); |
注意这里调用的地址中jsoncallback=?是关键的所在!其中,符号会被Query自动替换成其他的回调方法的名称,具体过程和原理我们这里不理 会。我们关心的是jsoncallback=?起什么作用了?原来jsoncallback=?被替换后,会把方法名称传给服务器。我们在服务器端要做什 么工作呢?服务器要接受参数jsoncallback,然后把jsoncallback的值作为JSON数据方法名称返回,比如服务器是,我们会这 样做:
...
String jsoncallback=request.getParameter("jsoncallback");
out.print(jsoncallback+"({"account":"XX","passed":"true","error":"null"})");
Jquery取得的可能如下:
JQUET0988788({"account":"XX","passed":"true","":"null"})
总结,用JSONP要做两件事:
1/请求地址加参数:jsoncallback=?
2/服务器段把jsoncallback的值作为方法名传回来,如JQUET098788(...)
jQuery从1.2开始就支持XMLHttp跨域请求了,具体怎么操作?
jQuery中跨域访问的核心原理:JS文件注入,因为因为script标签的src属性是可以跨域的,利用script标签的src属性直接返回非本域名下的数据,具体采用的方式称为:jsonp。
代码:
test.html,例如位于www.qq.com
01 | <!DOCTYPE html PUBLIC "-//W3C//DTD 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
03 | head> |
http-equiv
"Content-Type"
content
"text/html; charset=gb2312"
/>
05 | title>jQuery-跨域请求</ 06 |
scripttype "text/javascript" src "/js/jquery.js" ></ script 07 |
</08 |
"text/javascript" 09 |
jQuery(document).ready(function(){ |
11 | type : "GET",monospace!important; border:0px!important; outline:0px!important; text-align:right!important; float:none!important; vertical-align:baseline!important; position:static!important; left:auto!important; top:auto!important; right:auto!important; bottom:auto!important; height:auto!important; width:2.7em!important; line-height:1.1em!important; font-size:10pt!important; min-height:inherit!important; display:block!important">12 | url : "http://www.b.com/server.php&action=getmsg&callback=?", |
13 | dataType : "jsonp",monospace!important; border:0px!important; outline:0px!important; text-align:right!important; float:none!important; vertical-align:baseline!important; position:static!important; left:auto!important; top:auto!important; right:auto!important; bottom:auto!important; height:auto!important; width:2.7em!important; line-height:1.1em!important; font-size:10pt!important; min-height:inherit!important; display:block!important">14 | jsonp: 'callback',monospace!important; border:0px!important; outline:0px!important; text-align:right!important; float:none!important; vertical-align:baseline!important; position:static!important; left:auto!important; top:auto!important; right:auto!important; bottom:auto!important; height:auto!important; width:2.7em!important; line-height:1.1em!important; font-size:10pt!important; min-height:inherit!important; display:block!important">15 | success : function(json){ |
17 | return true; |
19 | }); |
23
id
"msg_box"
div
24
>
server.php,例如位于 www.baidu.com
$action
=
$_GET
[
'action'
];
$callback[callback ]; |
() |
echo "{$callback}({" msg ":" this is a jquery jsonp test message! "})" exit (); |
} |
{ |
;
(); |