同源策略、跨域访问&JSONP

最新推荐文章于 2025-11-26 18:40:17 发布

原创最新推荐文章于 2025-11-26 18:40:17 发布 · 121 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#json #javascript #ViewUI

WEB 专栏收录该内容

3 篇文章

订阅专栏

本文详细解释了JSONP（JSON with Padding）的概念及其用途，如何使用JSONP获取跨域数据，并通过实例展示了如何在JavaScript中实现JSONP请求，包括jQuery和$.ajax方法的应用。

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

jsonp格式：

callback({"title":"content"})

使用方法：

<script type="text/javascript">
    function callback(result, methodName) {
        console.log(result);
    }
</script>
<script type="text/javascript" src="http://www.night.com/reverie?jsonp=callback"></script>

JQuery 的使用方法：

<script>
$(document).ready(function(){
    $.getJSON("http://night.com/reverie?callback=?",
        function(data){
            console.log(data);
    });
});
</script>

$.ajax 的使用方法：

<script>
    $.ajax({
        dataType:'jsonp',
        data:'',
        jsonp:'callback',
        url:'http://www.night.com/reverie',
        success:function(data){
    	    console.log(data);
        }
    });
</script>