跨域请求解决方案之--JSONP_ajax跨域请求github的json数据-优快云博客

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

使用

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
       
        },
       
        });