提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Jsonp跨域的原理以及Jquery的解决方案

jQuery跨域原理解决方案 以及 jsonp
2023-06-13 09:14:18 时间
原理：JSONP即JSONwithPadding。由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源。如果要进行跨域请求，我们可以通过使用html的script标记来进行跨域请求，并在响应中返回要执行的script代码，其中可以直接使用JSON传递javascript对象。这种跨域的通讯方式称为JSONP。
个人理解：

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

<!DOCTYPEhtmlPUBLIC"-//W//DTDXHTMLTransitional//EN""http://www.worg/TR/xhtmlDTD/xhtmltransitional.dtd">
<htmlxmlns="http://www.worg/xhtml">
<head>
<title>TestJsonp</title>
<scriptsrc="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"type="text/javascript"></script>
<scripttype="text/javascript">
functionjsonpCallback(result)
{
$.each(result.items,function(i,item){
$("<img/>").attr("src",item.media.m).appendTo("body");
if(i==3)returnfalse;
});
}
</script>
</head>
<body>
<scripttype="text/javascript"src="http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=jsonpCallback"></script>
</body>
</html>


jQuery的解决方案：
复制代码代码如下:

<!DOCTYPEhtmlPUBLIC"-//W//DTDXHTMLTransitional//EN""http://www.worg/TR/xhtmlDTD/xhtmltransitional.dtd">
<htmlxmlns="http://www.worg/xhtml">
<head>
<title>TestJsonp</title>
<scriptsrc="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"type="text/javascript"></script>
<scripttype="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)returnfalse;
});
});
});
</script>
</head>
<body></body>
</html>


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

相关文章