实践JSONP

Posted on | In | Visitors

一般情况下ajax请求本应用自己的服务，但是当ajax请求非本应用服务时，可能会遇到同源策略问题。所谓”同源”指的是”三个相同”：协议相同，域名相同和端口相同，非同源收到的限制包括：

（1） Cookie、LocalStorage 和 IndexDB 无法读取。

（2） DOM 无法获得。

（3） AJAX 请求不能发送。

针对非同源时ajax请求不能发送，提出了多种解决方法，其一是jsonp。

如下的三种标签不会遇到“跨域”问题（严格讲是跨站资源请求）

1
2
3
4
5
<script type="text/javascript" src="http://www.a.com/scripts/1.js"></script>

<img src="http://www.b.com/images/1.jpg" />

<link rel="stylesheet" href="http://www.c.com/assets/css/1.css" />

可以利用这一特性实现跨域http请求。<script>的内容会被执行，内容由服务端提供，格式为callback('服务端返回的数据')，即可实现回传数据并执行回调函数。

原生实现

定义回调函数

1
2
3
4
5
6
<script type="text/javascript">
  function handler(data) {
    alert(data);
    // our code here...
  }
</script>

引用远程脚本1.js：

1
<script type="text/javascript" src="http://service.a.com/script/1.js"></script>

1.js内容（可以变相的改成远程返回的内容）如下：

1
2
// 格式化：callback('服务端返回的数据')
handler('success');

进一步可以自定义回调函数（作为参数传递给服务端）

jQuery实现

1
2
3
4
5
6
7
8
9
10
11
12
        $.ajax({
            type: "get",
            async: false,
            url: "http://localhost:8546/Service.ashx",
            dataType: "jsonp",
            success: function (data) {
                alert(data);
            },
            error: function () {
                alert('fail');
            }
        });

jQuery会在url后追加参数jsonp=jsonpCallback

  • jsonp: “callback”,//传递给服务端的回调函数名称参数，如果不设置此项，则默认是”callback”
  • jsonpCallback: “handler”,//传递给服务端的回调函数名称，如果不设置此项，则默认是形如”jQuery111007837897759742043_1460657212499”的由jQuery自动生成的函数名称