1.什么是JSONP?
JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。
JSON 数据是一种能很方便通过 JavaScript 解析的结构化数据。如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用 jsonp 类型。
使用jsonp 类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的 URL 后面。服务器端应当在 JSON 数据前加上回调函数名,以便完成一个有效的 JSONP 请求。如果要指定回调函数的参数名来取代默认的 callback,可以通过设置 $.ajax() 的 jsonp 参数。
注意:
JSONP 是 JSON 格式的扩展。它要求一些服务器端的代码来检测并处理查询字符串参数。
AJAX和JSONP在本质上是完全不同的东西。AJAX的核心是通过XmlHttpRequest获取数据,而JSONP的核心是动态添加
2.为什么要用JSONP?
由于浏览器的“同源策略(SOP:Same OriginPolicy)”,浏览器限制脚本程序只能和同协议、同域名、同端口的脚本进行交互,这包括共享和传递变量等。cookie的传递也是遵从同样策略。这就造成一些涉及到多个服务器的应用在整合时一些麻烦。跨域访问的问题造成A站点无法访问B站点的数据。
尽管浏览器不允许页面中的脚本程序跨域读取数据,但却允许HTML引用跨域的资源,如图片,CSS和脚本程序。对于脚本程序的引用比较特殊,它被浏览器解析以后,就和本地的脚本程序别无二致且可立即进行解释并执行。
如下引用:是有效的。总结发现,拥有“src”属性的标签有跨域的能力,如script、img、iframe等。
由于站外脚本的引用是通过script标签来实现的,而脚本程序又可通过DOM的方式可以对HTML页面的所有标签进行控制(包括动态的创建script标签),这就可以实现通过调用站外程序对本地资源进行更改了。另外,通过
3.JSONP实现流程
首先在客户端(A站点)注册一个callback事件,然后把callback事件的名字作为参数传给服务器(B站点)。此时,服务器(B站点)会生成JSON数据,同时生成一个funtion,该funtion就是客户端(A站点)的callback事件。
然后,将JSON数据直接以参数的形式,放置到function中,这样就生成了一段js语法的文档,返回给客户端。
最后,在客户端浏览器中解析script标签,并执行从服务器(B站点)返回的function,此时服务器(B站点)返回的json数据作为参数,传入到了客户端预先定义好的回调函数里(动态执行回调函数)。可以说jsonp的方式原理上和是一致的。
3.怎样使用JSONP
从http://A.com/index.html页面访问http://B.com/services.php的数据
示例1:
//在客户端注册callback事件
function jsonpCallback(result) {
console.log(result.msg);
}
var Script=document.createElement("script");//创建一个script标签
Script.type="text/javascript";
//提供JSONP服务的地址
Script.src="http://B.com/services.php?callback=jsonpCallback";
//把script标签放到head里,此时调用开始
document.getElementsByTagName("head")[0].appendChild(Script);
示例2:需要传递参数的写法
function jsonpCallback(result) {
console.log(result.msg);
}
当GET请求从http://B.com/services.php返回时,可以返回一段JavaScript代码,这段代码会自动执行,可以用来负责调用http://A.com/index.html页面中的一个callback函数。
注意:
调用了回调函数的script标签必须写在回调函数的下面。
jsonCallback是获取跨域服务器上的JSON数据后的客户端的回调函数。
http://a.com/services.php?callback=jsonpCallback是获取跨域服务器JSON数据的接口,参数为回调函数的名字。
不管是什么类型的地址,最后生成的返回值都是一段javascript代码。
回调的数据格式为:jsonpCallback({ msg:'hello JSONP'} )。
以上代码是写在客户端js文件里的。
4.jQuery怎样实现JSONP调用?
以上方法使用JavaScript原生方法实现的。从jQuery1.2版本开始,jQuery拥有对JSONP回调的本地支持。如果指定了JSONP回调,就可以加载另一个域的JSON数据,回调的语法为 url?callback=? 。jQuery自动将callback=?的?替换为要调用的函数名。
示例1:$.ajax()方法
$.ajax({
type:'get',
url:"http://a.com/services.php?参数名=参数值",
dataType:'jsonp',
jsonp:'callback', //传递给请求处理程序或页面的,用以获得JSONP回调函数名的参数名(一般默认为:callback)
jsonpCallback:'jsonpCallback',
timeout:2000,
success:function(result){
console.log(result.msg);
}
});
注意:
jsonp:'callback' 传递给请求处理程序或页面的,用以获得JSONP回调函数名的参数名(一般默认为:callback)
jsonpCallback:'jsonpCallback' 自定义的JSONP回调函数名称,默认为jQuery自动生成的随机函数名,也可以写成 ? ,jQuery会自动为你处理函数
jquery在处理jsonp类型的ajax时,会自动生成回调函数并把数据取出来供success属性方法来调用
示例2:使用$.get()方法
语法:$.get(URL,data,function(data,status,xhr),dataType)
$.get('http://B.com/services.php?callback=?', {name: encodeURIComponent('tester')}, function (json) {
console.log(result.msg); }, 'jsonp');
encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。
示例3:使用$.getJSON()方法
$.getJSON(url,data,success(data,status,xhr))
$.getJSON("http://B.com/services.php?callback=?",
function(result) {
console.log(result.msg);
});
5.JSONP的缺陷
JSONP没有错误处理。如果动态脚本插入有效,就执行调用;如果无效,就静默失败。失败是没有任何提示的。而且JSONP存在一定的安全隐患。