JSONP道理及JQUERY JSONP的运用

2019年8月22日 177次阅读 来源: zhoutao

JSONP道理

JSON和JSONP

　　JSON(JavaScript Object Notation)是一种轻量级的数据交换花样。关于JSON人人应该是很相识了吧，不是很清晰的朋侪可以去json.org上相识下，简朴易懂。

　　JSONP是JSON with Padding的略称。它是一个非官方的协定，它许可在效劳器端集成Scripttags返回至客户端，经由过程javascriptcallback的情势完成跨域接见（这仅仅是JSONP简朴的完成情势）。

　　JSONP就像是JSON+Padding一样(Padding这里我们理解为添补)，我们先看下面的小例子然后再细致引见。

同源战略

在JavaScript中,有一个很主要的安全性限定，被称为“Same-OriginPolicy”（同源战略）。这一战略关于JavaScript代码可以接见的页面内容做了很主要的限定，即JavaScript只能接见与包括它的文档在统一域下的内容。

依据这个战略，在baidu.com下的页面中包括的JavaScript代码，不能接见在google.com域名下的页面内容；以至差别的子域名之间的页面也不能经由过程JavaScript代码相互接见。关于Ajax的影响在于，经由过程XMLHttpRequest完成的Ajax要求，不能向差别的域提交要求，比方，在abc.example.com下的页面，不能向def.example.com提交Ajax要求，等等。但是，当举行一些比较深切的前端编程的时刻，不可避免地须要举行跨域操纵，这时刻“同源战略”就显得过于刻薄。

但是html中有一些元素是不存在跨域题目的如:script,iframe等元素,应用这些元素,就可以很好的处置惩罚这个题目.

JSONP的完成体式格局

应用在页面中建立<script>节点的要领向差别域提交HTTP要求，这项手艺就可以处置惩罚跨域提交Ajax要求的题目。

先看一个简朴例子

example1.com有如许一个要领

<script type="text/javascript">
//回调函数
function callback(data) {
  //显现客户信息在A页面上;
}
</script>

//经由过程加载example2的JS文件来到达函数挪用和数据通报
<script type="text/javascript" src="http://example2.com/test.js"></script>

 example2.com的test.js内容以下

//回调函数
callback({name:"张三"});

以上这类要领只是一个简朴完成缘由的例子,实际中我们的数据和回调也不会都写死在JS中的,所以我们要想方法将这些静态的东西动态天生就可以了.只要将example1.com srcipt 地点改成一个能动态天生JS挪用要领的效劳地点即可.如:

<script type="text/javascript" src="http://example2.com/test.do"></script>

test.do Controller直接返回以下

callback(数据库客户信息的JSON对象);

例子以下:固然对<script type=”text/javascript”src=”http://example2.com/test.do”>的挪用,你也可以动态来建立script标签完成,如许就更天真一些.

假若要完成一个需求,某个网站a.com上显现的客户信息来自于别的网站b.com,明显经由过程AJAX要求去取数据是不能做到的,由于存在同源战略.

A网站的前台完成:

<script type="text/javascript">
    //回调函数
    function displayCustomer(data) {
         alert(data);
         //将客户信息显现在A.com的页面上...
     }
    ​
    window.onload = function(){

    ​     //增加<script>标签的要领
         function createScript(src){
             var script = document.createElement('script');
             script.setAttribute("type","text/javascript");
             script.src = src;
             document.body.appendChild(script);
         }
    }
</script>

createScript("http://B.com/search.do?&callback=displayCustomer");
  • B网站的背景完成:
@Controller
public classJsonpRest {
    @RequestMapping(value = "/test.do",method = RequestMethod.GET)
    public @ResponseBody Stringlist(HttpServletRequest request) {
        returnrequest.getParameter("callback")+"({name:'张三',age:18})";
    }
}

JSONP的长处是：

它不像XMLHttpRequest对象完成的Ajax要求那样遭到同源战略的限定；它的兼容性更好，在越发陈旧的浏览器中都可以运转，不须要XMLHttpRequest或ActiveX的支撑；并且在要求终了后可以经由过程挪用callback的体式格局回传效果。

JSONP的瑕玷则是：

  1. 它只支撑GET要求而不支撑POST等别的范例的HTTP要求；它只支撑跨域HTTP要求这类状况，不能处置惩罚差别域的两个页面之间怎样举行JavaScript挪用的题目。
  2. 没有关于 JSONP挪用的毛病处置惩罚。假如动态剧本插进去有用，就实行挪用；假如无效，就寂静失利。失利是没有任何提醒的。比方，不能从效劳器捕捉到404 毛病，也不能取消或重新最先要求。不过，守候一段时间还没有相应的话，就不必理它了。

JQUERY对JSONP的支撑

从JQery 1.2今后，就最先支撑JSONP的挪用。JQuery对前台做了很好的处置惩罚如自动天生全局回调函数等,但背景还须要开发人员本身完成.

$.getJSON("http://跨域的dns/xxx.do?callback=?",function(json){          
    // 营业逻辑实行代码
});

要求URL 
http://xxx.com/rest.do?callba…_1332575486681&_=1393510789026


$.ajax({
       url:"http://xxx.com/rest.do",
        dataType:"jsonp",   //必需指定

        jsonp : "c",        //若不指定章默以为callback

        jsonpCallback:"test",//若不指定章Jquery本身天生随机的称号
        success:function(data){
            //营业逻辑实行代码
        }
});

要求URL http://xxx.com/rest.do?c=test&_=1393510789026

  1. 当dataType为JSONP时,JQUERY会为用户天生一个全局函数称号为jsonpCallback参数的值,这个函数内部挪用了success要领JQUERY的完成道理及步骤
  2. 以GET体式格局要求目的地点,并在URL中拼接以jsonp参数值为key,以jsonpCallback值为value的参数
  3. 要求返回回调函数数据
  4. 触发挪用全局的回调函数,在全局函数回调中挪用success要领并将数据通报给success要领
    原文作者：zhoutao
    原文地址: https://segmentfault.com/a/1190000015805948
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞