浅谈JSONP原理

2017 年 4 月 23 日, iamjs, 0

由于浏览器的跨域机制限制，我们在A域下的一个页面，没办法直接请求B域下的接口（具体来说是可以发起请求，但是前端不会加载请求结果），这种场景下JSONP便应运而生。实际上JSONP的原理很简单，浏览器加载页面的时候虽然不认其他域下返回的数据，但是对<script>、<img>这些标签却能支持其他域名下的文件，JSONP便是利用这一点，模拟网页端加载异域下的js文件来响应服务端返回的数据。下面详细介绍这个过程：

1、网页端通过jQuery等js框架，在页面追加一个<script>标签，并把src值设置为异域接口地址，定义回调函数A（这个函数可以定义固定函数名，也可以设置随机函数名），并把A作为参数传递给服务端；

2、服务端接口响应请求，将输出结果以’A(“JSON数据”)‘的格式返回；

3、页面端加载到<script>中src指定的js代码，执行回调函数A。

注意，JSONP的原理是通过<script>标签加载js代码，因此他只能通过GET请求来实现，在jQuery中$.ajax()函数中若将datatype设置为jsonp，将type设置为POST，此时实际不会走JSONP实现方式，而是发起一个普通的http请求来加载。

下面再介绍jQuery框架中调用JSONP的方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$.ajax({
       type : "get",
       async:false,
       url : "ajax.ashx",
       dataType : "jsonp",
       jsonp: "callbackparam",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
       jsonpCallback:"success_jsonpCallback",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
       success : function(json){
           alert(json);
           alert(json[0].name);
       },
       error:function(){
           alert('fail');
       }
});

或者：

1

 $.getJSON(url, callback)

附：$.ajax()方法详解

open与fopen的区别 浏览器跨域问题以及解决方案（转）