Jquery跨域调用

傷城~ 2022-08-26 14:11 138阅读 0赞

转自：http://www.cnblogs.com/5201314/archive/2009/06/23/1509552.html

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

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

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

不出意外的话应该已经可以跨域读取了。  
  
同时输出json数据时候\{之前的是(

Ajax的应用中，由于安全的问题，浏览器默认是不支持跨域调用的。传统解决的方法，包括：（参考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官方的例子，客户端掉用如下：

$.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(...)

jQuery从1.2开始就支持XMLHttp跨域请求了，具体怎么操作？

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

代码：  
**test.html，例如位于** [**www.qq.com**][www.qq.com]  
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd][http_www.w3.org_TR_xhtml1_DTD_xhtml1-transitional.dtd]">  
<html xmlns="[http://www.w3.org/1999/xhtml][http_www.w3.org_1999_xhtml]">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>jQuery-跨域请求</title>  
<script type="text/javascript" src="/js/jquery.js"></script>  
</head>  
<script type="text/javascript">  
jQuery(document).ready(function()\{  
 $.ajax(\{  
type : "GET",  
url : "[http://www.b.com/server.php&action=getmsg&callback][http_www.b.com_server.php_action_getmsg_callback]=?",  
 dataType : "jsonp",  
jsonp: 'callback',  
 success : function(json)\{  
$('\#msg\_box').html(json.msg);  
return true;  
\}  
\});  
\});  
</script>  
<body>  
<div id="msg\_box"></div>  
</body>  
</html>  
  
**server.php，例如位于**[**www.baidu.com**][www.baidu.com]  
 <?php  
$action = $\_GET\['action'\];  
$callback = $\_GET\[callback \];  
  
if ($action)  
\{  
 echo **"\{$callback\}(\{"msg":"this is a jquery jsonp test message!"\})";**  
exit();  
\}  
else  
 \{  
echo **"\{$callback\}(\{"msg":"error action!"\})";**  
 exit();  
\}  
?>

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

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

2.为什么使用JSONP：由于 JSON 只是一种含有简单括号结构的纯文本，因此许多通道都可以交换 JSON 消息。因为同源策略的限制，我们不能在与外部服务器进行通信的时候使用 XMLHttpRequest。而JSONP是一种可以绕过同源策略的方法，即通过使用 JSON 与 <script> 标记相结合的方法，从服务端直接返回可执行的JavaScript函数调用或者JavaScript对象。

3.谁在使用JSONP：dojo、JQuery、Youtube GData API 、Google Social Graph API 、Digg API 、GeoNames webservice、豆瓣API、Del.icio.us JSON API等。

\------------------------------------------------------------------------------------------------

和 AJAX 一样，JSONP 实际上也是早已存在，只是说法相对比较新颖（貌似也出来很久了）。自 1.2 版本起，JQuery加入了对 JSONP 的支持（[http://docs.jquery.com/Ajax/jQuery.getJSON\#urldatacallback][http_docs.jquery.com_Ajax_jQuery.getJSON_urldatacallback]）。我们可以很容易的利用 $.getJSON() 方法（或者其它基于 $.ajax() 的方法），来跨域加载 JSON 数据。我参考官网，写了个JQ测试的例子：

**a.html**

<html>  
<head>  
<script src="[http://code.jquery.com/jquery-latest.js"></script][http_code.jquery.com_jquery-latest.js_script]>  
</head>  
<body>  
<script type="text/javascript">  
function do\_jsonp() \{  
$.getJSON("[http://active.zol.com.cn/guofeng/profile2.php?callback][http_active.zol.com.cn_guofeng_profile2.php_callback]=?",  
function(data) \{  
$('\#result').val('My name is: ' + data.nick);  
\});  
\}  
</script>  
<a href="javascript :do\_jsonp();">Click me</a><br />  
<textarea id="result" cols="50" rows="3"></textarea>  
</body>  
</html>

**profile2.php**

<?php  
$callback = isset($\_GET\['callback'\]) ? $\_GET\['callback'\] : '';  
$json = '';

//php数组  
$arr = array(  
'name' => 'lava',  
'nick' => '比目鱼',  
'contact' => array(  
'MSN' => 'lavaguo\#msn.com',  
'email' => 'guo.feng\#zol.com.cn',  
'website' => 'http://www.zol.com.cn',  
)  
);

$arr = gb2312ToUtf8($arr);//中文需要转UTF-8  
$json = json\_encode($arr);//转成json数组  
if (!empty($callback)) \{  
$json = $callback . '(' . $json . ')';//注意这里的格式，调试时这里费了点时间  
\}  
echo $json;

你可能注意到上面的例子中，url 被写成了[http://active.zol.com.cn/guofeng/profile2.php?callback][http_active.zol.com.cn_guofeng_profile2.php_callback]=?，需要说明的是，这个问号会被 jQuery 自动替换为回调函数的函数名（如果是一个匿名函数，JQuery 会自动生成一个带时间戳的函数名）。

**总结下JSONP原理：**

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

此时，服务器先生成 json 数据。

然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp.

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

客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）

[www.qq.com]: http://www.qq.com/
[http_www.w3.org_TR_xhtml1_DTD_xhtml1-transitional.dtd]: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
[http_www.w3.org_1999_xhtml]: http://www.w3.org/1999/xhtml
[http_www.b.com_server.php_action_getmsg_callback]: http://www.b.com/server.php&action=getmsg&jsonp_callback
[www.baidu.com]: http://www.baidu.com/
[http_docs.jquery.com_Ajax_jQuery.getJSON_urldatacallback]: http://docs.jquery.com/Ajax/jQuery.getJSON#urldatacallback
[http_code.jquery.com_jquery-latest.js_script]: http://code.jquery.com/jquery-latest.js%22%3E%3C/script
[http_active.zol.com.cn_guofeng_profile2.php_callback]: http://active.zol.com.cn/guofeng/profile2.php?callback