jsonp

关注

转载最新推荐文章于 2026-03-23 00:09:57 发布 245 阅读 AI 写同款· GEO 优化 ›

看完必会的JSONP 1、JSONP是为了解决跨域问题产生的，为了弥补AJAX的不足。AJAX请求跨域资源，Chrome下会报错： 2、但是对于img、ifame、script等，我们发现，在它们的src中引用其他域的资源的时候，是可以加载的（对于iframe，如果跨域，虽然可以加载，但是无法进行DOM操作，postMessage可以解决）。 3，JSONP正式基于上述的技术 4，上述的函数就是我们常说的callback 阅读详情

jsonp

编辑

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

中文名

jsonp

外文名

JSON with Padding

模式

使用

串，

这段返回的

使用

编辑

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

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

假设客户期望返回JSON数据：["customername1","customername2"]

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

可能的调用方式：

1	`<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>

体现

编辑

JQuery下：

$.getJSON

 
        <script>
       
        $(document).ready(
        function
        (){
       
        $.getJSON(
        "http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?"
        ,
       
        function
        (data){
       
        $.each(data.items,
       
        function
        (i,item){
       
        $(
        "<img/>"
        ).attr(
        "src"
        ,item.media.m).appendTo(
        "#images"
        );
       
        if
        (i==3)returnfalse;
       
        });
       
        });
       
        });

jsoncallback=?，其中 '？ '会自动替换为function(data)函数。

2. $.ajax

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