JSONP简单介绍

最新推荐文章于 2022-06-16 11:45:07 发布

feng_xiaolin

最新推荐文章于 2022-06-16 11:45:07 发布

阅读量829

点赞数

分类专栏：我要掌握的知识点文章标签： JSONP 跨域

本文链接：https://blog.csdn.net/feng_xiaolin/article/details/83187928

版权

我要掌握的知识点专栏收录该内容

5 篇文章 1 订阅

订阅专栏

一、jsonp概念

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

作为一个没有官方标准的协议，JSONP通常用来解决JS的跨域问题（不限于此），和一些钓鱼网站的手法类似。

1、跨域的安全限制都是对浏览器端来说的，服务器端是不存在跨域安全限制的。

2、浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。

3、如果协议，端口和主机对于两个页面是相同的，则两个页面具有相同的源，否则就是不同源的。

如果要在js里发起跨域请求，则要进行一些特殊处理了。或者，你可以把请求发到自己的服务端，再通过后台代码发起请求，再将数据返回前端。

我理解的原理，不一定准确：

首先在客户端注册一个callback, 然后把callback的名字以下列参数形式传给服务器：http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback。

此时，服务器先生成 json 数据。

然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp.

最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。

客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）

据说 jsonp有两个潜在的问题，现在不会，没研究懂，什么时候会了再加上吧

使用

1、在客户端调用提供JSON支持的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">
//将内容插入到divCustomers中
function CustomerLoaded(result,methodName)
{
    //定义一个字符串，用于拼接html语句
    var html='<ul>';
    //读取请求中的信息
    for(var i=0;i<result.length;i++)
    {
        //拼接字符串
        html+='<li>'+result[i]+'</li>';
    }
    html+='</ul>';
    //将字符串中的语句写到html页面中
    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>这只是一个标题而已</title>
</head>
<body>
    //将拼接的字符串写入到这个div中
    <div id="divCustomers">
    </div>
    <script type="text/javascript">
        //将内容插入到divCustomers中
        function CustomerLoaded(result,methodName){
            //定义一个字符串，用于拼接html语句
            var html='<ul>';
            //读取请求中的信息
            for(var i=0;i<result.length;i++){
                //拼接字符串
                html+='<li>'+result[i]+'</li>';
            }
            html+='</ul>';
            //将字符串中的语句写到html页面中
            document.getElementById('divCustomers').innerHTML=html;
        }
    </script>    
    <script type="text/javascript"src="http://www.yiwuku.com/myService.aspxjsonp=onCustomerLoaded"></script>
</body>
</html>

体现

1、$.getJSON

//$(document).ready(function)文档就绪时运行运行,可以直接写成$().ready(function)或$(function)
//提示：ready() 函数不应与 <body onload=""> 一起使用。
< script > $(document).ready(function() {
    //jQuery中的$.getJSON( )方法函数主要用来从服务器加载json编码的数据，它使用的是GET HTTP请求。使用方法如下：
    //$.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] )
    //url是必选参数，表示json数据的地址；
    //data是可选参数，用于请求数据时发送数据参数；
    //jsoncallback=?，其中 '？ '会自动替换为function(data)函数。
    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
    //success是可选参数，回调函数，用于处理请求到的数据。
    function(data) {
        //
        $.each(data.items,
        //两个参数
        function(i, item) {
            //生成html语法的语句
            $("<img/>").attr("src", item.media.m).appendTo("#images");
            //结束条件
            if (i == 3) return false;
        });
    });
});

2、$.ajax

$.ajax({
    dataType: 'jsonp',
    data: 'id=10',
    jsonp: 'jsonp_callback',
    url: 'http://www.yiwuku.com/getdata',
    success: function() {
        //dostuff
    },
});

如何在服务器端实现对JSONP支持

这仅仅需要把服务的JSON数据转换成想要的script tags的形式就可以了，格式可以自已定义，毕竟这是个非官方的协议。

可参考：Implement JSONP in your Asp.net Application

注：Callback仅仅是JSONP的简单实现，可以根据具体需要实现更复杂的功能，比如可以在客户端动态集成更多的变量数据来完成分页功能。

Java:

return request.getParameter("jsonpcallback")+"("+JsonString+")";

返回内容像：jsonp1382016430883([{"id":1,"title":"XXXX"},{"id":2,"title":"YYYYY"}])

《Implement JSONP in your Asp.net Application》一文对服务器端的实现做了进一步讨论。

jQuery 1.2开始引入了JSONP，可以参考这篇文章。在这篇文章里也提到了JSONP的两个潜在问题，也是我所担心的：一个是滥用引起的服务器端安全问题，另一个是无处进行出错处理。

感觉下面这篇文章写的很容易理解，可以看一下

深入浅出JSONP--解决ajax跨域问题

feng_xiaolin

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JSONP简单介绍

一、jsonp概念JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的&lt;script&gt; 元素是一个例外。利用 &lt;script&gt; 元素的这个开放策略，网...
复制链接

扫一扫

专栏目录