Jsonp 跨域的原理以及Jquery的解决方案
Jsonp 跨域的原理以及Jquery的解决方案
发布时间:2016-12-30 来源:查字典编辑
摘要:如果要进行跨域请求,我们可以通过使用html的script标记来进行跨域请求,并在响应中返回要执行的script代码,其中可以直接使用JSO...

如果要进行跨域请求,我们可以通过使用html的script标记来进行跨域请求,并在响应中返回要执行的script代码,其中可以直接使用JSON传递javascript对象。这种跨域的通讯方式称为JSONP。

个人理解:

就是在客户端动态注册一个函数function a(data),然后将函数名传到服务器,服务器返回一个a({/*json*/})到客户端运行,这样就调用客户端的function a(data),从而实现了跨域.

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W//DTD XHTML Transitional//EN" "http://www.worg/TR/xhtmlDTD/xhtmltransitional.dtd">

<html xmlns="http://www.worg/xhtml" >

<head>

<title>Test Jsonp</title>

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script>

<script type="text/javascript">

function jsonpCallback(result)

{

$.each(result.items, function(i,item){

$("<img/>").attr("src", item.media.m).appendTo("body");

if ( i == 3 ) return false;

});

}

</script>

</head>

<body>

<script type="text/javascript" src="http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=jsonpCallback"></script>

</body>

</html>

jQuery的解决方案:

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W//DTD XHTML Transitional//EN" "http://www.worg/TR/xhtmlDTD/xhtmltransitional.dtd">

<html xmlns="http://www.worg/xhtml" >

<head>

<title>Test Jsonp</title>

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script>

<script type="text/javascript">

$(function() {

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

if (i == 3) return false;

});

});

});

</script>

</head>

<body></body>

</html>

jquery 的jsoncallback是动态生成的,真正请求服务器的地址:http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=jsonp1274058545738

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类