1. JSONP定义
JSONP是英文JSON with Padding的缩写，是一个非官方的协议。它允许在服务器端生成scripttags返回至客户端，通过javascript callback的形式来实现站点访问。 JSONP是一种scripttag的注入，将server返回的response添加到页面实现特定功能。
2.JSONP由来
要解释JSONP的来由，先要说一下浏览器的“同源策略(SOP:Same Origin Policy)”。简而言之，就是浏览器限制脚本程序只能和同协议、同域名、同端口的脚本进行交互，这包括共享和传递变量等。cookie的传递也是遵从同样策略。这就造成一些涉及到多个服务器的应用在整合时一些麻烦。跨域访问的问题造成A站点的Ajax代码无法访问B站点的数据。
如何解决跨域访问呢？那就要借助浏览器的一个特性：尽管浏览器不允许页面中的脚本程序跨域读取数据，但却允许HTML引用跨域的资源，如图片，CSS和脚本程序。对于脚本程序的引用比较特殊，它被浏览器解析以后，就和本地的脚本程序别无二致且可立即进行解释并执行。如在B站点的一个js文件，一个简单的提示框：alert（“ThisisVictor！”）;。在A站点引用这个js，这个脚本就会在B站点的应用中执行，显示一个alert信息。由于站外脚本的引用是通过scripttag来实现的，而脚本程序又可通过DOM的方式可以对HTML页面的所有标签进行控制（包括动态的创建script标签），这就可以实现通过调用站外程序对本地资源进行更改了。另外，通过标记的使用，就可从服务端直接返回可执行的JavaScript函数调用或者JSON数据。
3. JSONP原理
首先在客户端注册一个callback, 然后把callback的名字传给服务器。此时，服务器先生成JSON数据。然后以JavaScript 语法的方式，生成一个function,function名字就是传递上来的参数jsonp.
然后，将JSON数据直接以入参的方式，放置到function中，这样就生成了一段 js 语法的文档，返回给客户端。
最后，在客户端浏览器中解析script标签，并执行返回的JavaScript文档，此时数据作为参数，传入到了客户端预先定义好的回调函数里(动态执行回调函数)。
4、JSONP的客户端具体实现：
不管jQuery也好，extjs也罢，又或者是其他支持jsonp的框架，他们幕后所做的工作都是一样的。
我们现在www.test.com这个域名下面有这么个html文件testjsonp.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>
<title>Untitled Page</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$.ajax({
type: "GET",
async: false,
//url: "http://test/jsonp.php",
url:"http://mytaobao.com/jsonp.php",
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
success: function(json){
alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。回调函数名为: '+json.func);
},
error: function(){
alert("fail");
}
});
});
</script>
</head>
<body>
</body>
</html>
注意，要真正运行上面的代码可能需要jquery的文件，你可以将<script type="text/javascript" src="jquery-1.7.2.min.js"></script>改为你目录中jquery的文件路径：
如：<script type="text/javascript" src="js/jquery.js"></script>
然后，你可以再找个另外一个域名的web目录，将文件jsonp.php:
<?php
$callback = $_GET["callback"];
$a = array(
'code'=>'CA1998',
'price'=>'6000',
'tickets'=>20,
'func'=>$callback,
);
$result = json_encode($a);
echo "flightHandler($result)";
exit;
放到这个目录下面去。这样就可以测试了。
直接在浏览器访问testjsonp.html.就可以看到效果了。
283
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
