jsonp

最新推荐文章于 2019-10-11 20:41:32 发布

最新推荐文章于 2019-10-11 20:41:32 发布 · 116 阅读

文章标签：

#jsonp #跨域

js跨域专栏收录该内容

2 篇文章

订阅专栏

本文介绍了JSONP(JSON with Padding)这一非官方协议，它允许服务器端集成script tags返回至客户端，通过JavaScript callback的形式实现跨域数据抓取。文章还讨论了JSONP的工作原理、安全性问题及jQuery中的实现方式。

个人简单记录积累学习

同源策略

由Netscape提出的一个安全策略

现在所有支持javascript的浏览器多会使用这个策略

同源指域名，协议，端口相同

但是随着web应用的扩张，以及各大网站直接的内嵌合作，需要我们有的时候去跨域进行数据的抓取和页面资源的操作（图片的访问等等）

JSONP--JSON with Padding

什么是jsonp

jsonp是一个非官方的协议，它允许在服务器端集成script tags返回至客户端，通过javascript callback的形式去实现跨域。

2. 简单说明

域A的页面pageA1加载域B的数据，在域B的页面pageB1以javascript的形式声明需要的数据。

然后在域pageA1用script标签把pageB1加载进来，那么pageB的脚本就会得以执行。

JSONP在此基础上加入回调函数，pageB1加载完之后会执行pageA1中定义的函数，所需要的数据会以参数的形式传递给改函数。

3. JSONP服务 ----Remote JSON Service

一种带有附加功能的web服务，该功能支持在特定于用户的函数调用中打包返回JSON数据。

这种方法依赖于接受回调函数名作为请求参数的远程服务。然后该服务生成对该函数的调用，将JSON数据作为参数传递，在到达客户端时将其插入Web页面并开始执行。

4. 缺点

安全隐患比较多，第三方的脚本随意执行，可能对敏感数据上会有影响。

5. jQuery的JSONP支持

/*1.4.2版本代码
*/
getJSON:function(url,data,callback){
     return jQuery.get(url,data,callback,"json");
}

get:function(url,data.callback,type){
     if(jQuery.isFunction(data)){
            type =type || callback;
            callback = data;
            data = null;
    }
     return jQuery.ajax({
            type:"GET",
            url:url,
            data:data,
            success:callback,
            dataType:type
     });
}

ajax:function(origSelectings){
      var s = jQuery.extend(true,{},jQuery.ajaxSettings,origSelectings);
      var jsonp,status,data,callbackContext = origSettings &&origSettings.context || s,
      type = s.type.toUpperCase();
      // Handle JSONP Parameter Callbacks
		if ( s.dataType === "jsonp" ) {
			if ( type === "GET" ) {
				if ( !jsre.test( s.url ) ) {
					s.url += (rquery.test( s.url ) ? "&" : "?") + (s.jsonp || "callback") + "=?";
				}
			} else if ( !s.data || !jsre.test(s.data) ) {
				s.data = (s.data ? s.data + "&" : "") + (s.jsonp || "callback") + "=?";
			}
			s.dataType = "json";
		} 
}

 //使用？作为回调函数名，而非真实的函数名，jQuery会自动生成的函数名。

jQuery.getJSON("*****?id=1&callback=?",function(data){
    console.log("Data is"+data.id)
});