Jquery跨域问题

JQuery1.2后getJSON方法支持跨域读取json数据&＃xff0c;原理是利用一个叫做jsonp的概念。当然&＃xff0c;究其本质还是通过script标签动态加载js&＃xff0c;似乎这是实现真正跨域的唯一方法。

getJSON的用法JQuery手册已经写得很详细&＃xff0c;参考手册就可以了&＃xff0c;很简单。需要指出的一点是getJSON利用的jsonp需要客户端与服务端作出配合。

1. 客户端传递的URL里要包含callback变量&＃xff0c;以形如callback&＃61;?的形式结尾。&＃xff08;jquery会随机生成一个字符串替换&＃xff1f;传递给服务端&＃xff09;
2. 服务端获取客户端传递的callback的值callbackValue&＃xff0c;和需要传递的json字符串构成 callbackValue.’(’.json.’)&＃39;传回给客户端&＃xff08;示例为php字符串连接方式&＃xff0c;其他语言类似&＃xff09;

不出意外的话应该已经可以跨域读取了。

同时输出json数据时候{之前的是(

的中&＃xff0c;由于安全的问题&＃xff0c;浏览器默认是不支持跨域调用的。传统的方法&＃xff0c;包括&＃xff1a;&＃xff08;参考http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/&＃xff09;

Local proxy:Needs infrastructure (can&＃39;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".

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

      应用JSONP实现Json数据跨域调用&＃xff0c;需要端与客户端的合作完成。引用Jquery官方的例子&＃xff0c;客户端掉用如下&＃xff1a;

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

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

      ...

      String jsoncallback&＃61;request.getParameter("jsoncallback");

      ...

      out.print(jsoncallback&＃43;"({\"account\":\"XX\",\"passed\":\"true\",\"error\":\"null\"})");

Jquery取得的可能如下&＃xff1a;

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

总结&＃xff0c;用JSONP要做两件事&＃xff1a;

      1/请求地址加参数&＃xff1a;jsoncallback&＃61;?

      2/服务器段把jsoncallback的值作为方法名传回来&＃xff0c;如JQUET098788(...)

jQuery从1.2开始就支持XMLHttp跨域请求了&＃xff0c;具体怎么操作&＃xff1f;

jQuery中跨域访问的核心原理&＃xff1a;JS文件注入&＃xff0c;因为因为script标签的src属性是可以跨域的&＃xff0c;利用script标签的src属性直接返回非本域名下的数据&＃xff0c;具体采用的方式称为&＃xff1a;jsonp。

代码&＃xff1a;
   test.html&＃xff0c;例如位于www.qq.com

    server.php&＃xff0c;例如位于 www.baidu.com

　　今天上午&＃xff0c;路路同学问了一个JQuery跨域读取json数据的问题。JQuery用得很少&＃xff0c;还真没实际试过。于是上网找个找&＃xff0c;看到了JQ的$.getJSON() 方法。先介绍下概念性的东西&＃xff0c;网上找的&＃xff0c;简单看看就行了。

1.JSONP&＃xff08;JSON with Padding-填充json数据也就是常用的json跨域方式&＃xff09;&＃xff1a;利用script标签&＃xff0c;通过特定的src地址的调用&＃xff0c;来执行一个客户端的js函数&＃xff0c;在 服务器端生成相对的数据&＃xff08;json格式&＃xff09;并以参数的形式传递给这个客户端的js函数并执行这个函数&＃xff0c;前提是需要服务器端的数据输出支持。       

2.为什么使用JSONP&＃xff1a;由于 JSON 只是一种含有简单括号结构的纯文本&＃xff0c;因此许多通道都可以交换 JSON 消息。因为同源策略的限制&＃xff0c;我们不能在与外部服务器进行通信的时候使用 XMLHttpRequest。而JSONP是一种可以绕过同源策略的方法&＃xff0c;即通过使用 JSON 与



Click me

profile2.php

$callback &＃61; isset($_GET[&＃39;callback&＃39;]) ? $_GET[&＃39;callback&＃39;] : &＃39;&＃39;;
$json &＃61; &＃39;&＃39;;//php数组
$arr &＃61; array(&＃39;name&＃39; &＃61;> &＃39;lava&＃39;,&＃39;nick&＃39; &＃61;> &＃39;比目鱼&＃39;,&＃39;contact&＃39; &＃61;> array(&＃39;MSN&＃39; &＃61;> &＃39;lavaguo#msn.com&＃39;,&＃39;email&＃39; &＃61;> &＃39;guo.feng#zol.com.cn&＃39;,&＃39;website&＃39; &＃61;> &＃39;http://www.zol.com.cn&＃39;,)
);$arr &＃61; gb2312ToUtf8($arr);//中文需要转UTF-8
$json &＃61; json_encode($arr);//转成json数组
if (!empty($callback)) {$json &＃61; $callback . &＃39;(&＃39; . $json . &＃39;)&＃39;;//注意这里的格式&＃xff0c;调试时这里费了点时间
}
echo $json;function gb2312ToUtf8(&$input)
{if (!is_array($input)) {$input &＃61; iconv(&＃39;GB2312&＃39;, &＃39;UTF-8&＃39;, $input);} else {foreach ($input as $k&＃61;>$v) {gb2312ToUtf8(&$input["$k"]);}}return $input;
}?>

你可能注意到上面的例子中&＃xff0c;url 被写成了http://active.zol.com.cn/guofeng/profile2.php?callback&＃61;?&＃xff0c;需要说明的是&＃xff0c;这个问号会被 jQuery 自动替换为回调函数的函数名&＃xff08;如果是一个匿名函数&＃xff0c;JQuery 会自动生成一个带时间戳的函数名&＃xff09;。

总结下JSONP原理&＃xff1a;

首先在客户端注册一个callback, 然后把callback的名字传给服务器。

此时&＃xff0c;服务器先生成 json 数据。

然后以 Javascript 语法的方式&＃xff0c;生成一个function , function 名字就是传递上来的参数 jsonp.

最后将 json 数据直接以入参的方式&＃xff0c;放置到 function 中&＃xff0c;这样就生成了一段 js 语法的文档&＃xff0c;返回给客户端。

客户端浏览器&＃xff0c;解析script标签&＃xff0c;并执行返回的 Javascript 文档&＃xff0c;此时数据作为参数&＃xff0c;传入到了客户端预先定义好的 callback 函数里.&＃xff08;动态执行回调函数&＃xff09;