Jquery的跨域调用

来源：互联网发布：雅思听力怎么提高知乎编辑：程序博客网时间：2024/04/30 23:05

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

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

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

应用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

[html] view plaincopyprint?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=gb2312"/>
<title>jQuery-跨域请求</title>
<scripttype="text/javascript"src="/js/jquery.js"></script>
</head>
<scripttype="text/javascript">
jQuery(document).ready(function(){
$.ajax({
type : "GET",
url : "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>
<divid="msg_box"></div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    <html xmlns="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=?",            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

[php] view plaincopyprint?

<?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();
}

 <?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();    }

- - ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

总结下JSONP原理：

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

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

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

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

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