什么是JSONP

Yang 376

JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1、example、com 的网页无法与不是 server1、example、com的服务器沟通,而 HTML 的<script> 元素是一个例外。利用 <script>元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。

一、JSONP意思

JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1、example、com 的网页无法与不是 server1、example、com的服务器沟通,而 HTML 的<script> 元素是一个例外。利用 <script>元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。

二、JSONP使用

1、在客户端调用提供JSONP支持的URL Service,获取JSONP格式数据。

比如客户想访问http://www、yiwuku、com/myService、aspx?jsonp=callbackFunction

假设客户期望返回JSON数据:[“customername1″,”customername2”]

那么真正返回到客户端的Script Tags: callbackFunction([“customername1″,”customername2″])

可能的调用方式:

<script type=”text/javascript” src=”http://www、yiwuku、com/myService、aspx?jsonp=callbackFunction”></script>

2、在客户端写callbackFunction函数的实现

<script type=”text/javascript”>

function CustomerLoaded(result,methodName)

{

    var html='<ul>’;

    for(var i=0;i<result、length;i++)

    {

        html+='<li>’+result[i]+'</li>’;

    }

    html+='</ul>’;

    document、getElementById(‘divCustomers’)、innerHTML=html;

}

</script>

3、页面展示

<div id=”divCustomers”></div>

4、最终Page Code

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1、0 Strict//EN” “http://www、w3、org/TR/xhtml1/DTD/xhtml1-strict、dtd”>

<html xmlns=”http://www、w3、org/1999/xhtml”>

<head>

    <title>Top Customers with Callback</title>

</head>

<body>

    <div id=”divCustomers”>

    </div>

    <script type=”text/javascript”>

        function onCustomerLoaded(result, methodName) {

            var html = ‘<ul>’;

            for (var i = 0; i < result、length; i++) {

                html += ‘<li>’ + result[i] + ‘</li>’;

            }

            html += ‘</ul>’;

            document、getElementById(‘divCustomers’)、innerHTML = html;

        }

    </script>

    <script type=”text/javascript” src=”http://www、yiwuku、com/myService、aspx?jsonp=onCustomerLoaded”></script>

</body>

</html>

三、JSONP的优缺点

1、优点

  • 它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制,JSONP可以跨越同源策略;
  • 它的兼容性更好,在更加古老的浏览器中都可以运行,不需要XMLHttpRequest或ActiveX的支持
  • 在请求完毕后可以通过调用callback的方式回传结果。将回调方法的权限给了调用方。这个就相当于将controller层和view层终于分开了。我提供的jsonp服务只提供纯服务的数据,至于提供服务以 后的页面渲染和后续view操作都由调用者来自己定义就好了。如果有两个页面需要渲染同一份数据,你们只需要有不同的渲染逻辑就可以了,逻辑都可以使用同 一个jsonp服务。

2、缺点

  • 它只支持GET请求而不支持POST等其它类型的HTTP请求。
  • 它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
  • jsonp在调用失败的时候不会返回各种HTTP状态码。
  • 缺点是安全性。万一假如提供jsonp的服务存在页面注入漏洞,即它返回的javascript的内容被人控制的。那么结果是什么?所有调用这个 jsonp的网站都会存在漏洞。于是无法把危险控制在一个域名下…所以在使用jsonp的时候必须要保证使用的jsonp服务必须是安全可信的。

回复

我来回复
  • 暂无回复内容

注册PingCode 在线客服
站长微信
站长微信
电话联系

400-800-1024

工作日9:30-21:00在线

分享本页
返回顶部