JSONP 跨域原理与 jQuery 实现方式解析

JSONP 跨域原理

JSONP 全称为 JSON with Padding。受限于浏览器的同源策略，XmlHttpRequest 对象仅被允许请求当前源（包括域名、协议和端口）的资源。为了突破这一限制实现跨域请求，可以利用 HTML 中的 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 实现方式

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