Powered by md-Blog  文 - 篇  访客 -

JSONP的跨域请求原理分析及例子


  分类:大前端  / 
更新:2020-11-01 17:25:19  /  创建:2020-04-18 20:37:38
不要删除

JSONP为什么不是真正的ajax

JSONP是一种非正式传输协议,该协议的一个要点就是允许用户传递一个 callback参数 给服务端,然后服务端返回数据时会将这个 callback参数 作为函数名来 包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

原理

JSONP实现跨域请求的原理简单的说,就是动态创建 <script> 标签,然后利用 <script>src 不受同源策略约束来跨域获取数据。

getJson 的使用方法和普通的 $.get 方法基本一致,不同的地方在于 getJson 需要在 url 后面的参数部分加上 callback=? 这一固定部分,jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。然后在回调函数中操作从异域返回的 json 对象,回调函数 callback 的参数即为该 json 对象。

例子

一个jQuery的jsonp请求例子
$(document).ready(function(){
    $.getJSON("http://192.168.0.X/jsonp_test.php?callback=?", function(data) {
        console.log(data)
    });
    // 或者
    $.ajax({
        url: 'http://192.168.0.X/jsonp_test.php',
        dataType: "jsonp",
        type: "get",
        jsonp: "jsonpcallback",
        success:function(data){
            console.log(data)
        }
    });
});

不要删除

小站不易,感谢支持!