3.04.02jsonp

最新推荐文章于 2024-06-22 15:10:18 发布

以哲_ok

最新推荐文章于 2024-06-22 15:10:18 发布

阅读量67

点赞数

文章标签：前端 javascript json

本文链接：https://blog.csdn.net/m0_59593735/article/details/125231793

版权

3.04.02jsonp

1.概念

同源策略：数据地址与页面地址的协议、IP和端口都相一致的情况下，可以直接用ajax等技术进行数据交互，这是同源策略的表现方式
跨域：数据地址与页面地址的协议、IP和端口中其一个或着多个不一致的情况下，就属于跨域
- 想要进行跨域访问：需要后端开发者设置允许跨域，前端开发者进行跨域操作
- 往往网页ip地址与服务器ip地址不一样却能用ajax的数据进行交互，因为后端开发者设置了跨域操作，这种情况也是跨域的一种
jsonp：(JSON with Padding)解决跨域问题的一种方法,JSON是一种数据的格式

2.使用jsonp进行跨域访问

1.用法

XMLHttpRequest这个对象是不支持跨域的，但是script标签的src属性是可以跨域读取脚本的，我们可以巧妙地借助script标签的src属性进行跨域访问
jsonp仅仅支持get方式，因为参数是拼接在url后面的
前端用法：

    <script>
        // 使用jsonp
        // 代码：
        // 1、动态创建script标签（因为后台响应的内容是一段脚本，函数的调用）
        // 所以利用script标签的src属性 就可以读取这段脚本
        var script = document.createElement("script");

        // 定义变量 记录接口
        var url = "http://47.93.52.8:8002/search?keyword=大壮&callback=jsonp";

        // 2、设置script标签的src属性
        script.setAttribute("src",url);

        // 3、把script标签添加到head标签里面
        document.querySelector("head").appendChild(script);

        // 4、定义foo函数
        function jsonp(res){
            // res 就是藏在脚本中的数据
            console.log(res);
        }

        // 另一种写法
        // window['jsonp'] = function(res){
            // console.log(res);
        // }

        // 备注：
            // jsonp仅仅支持get方式，因为参数是拼接在url后面的
    </script>

这里浏览器打印的内容(console.log(res)打印的内容)：

    [
        {
            "userName":"尼古拉斯.大壮","userAccount":"18316486768","createTime":"2021-10-09T12:47:40.000Z","code":200,"message":"查询成功！"
        },
        {
            "userName":"爱新觉罗.大壮","userAccount":"18316486162","createTime":"2021-10-09T12:47:40.000Z","code":200,"message":"查询成功！"
        }
    ]

http://47.93.52.8:8002/search?keyword=大壮&callback=jsonp里面的内容（按住ctrl+单击鼠标访问里面的内容）：

    jsonp([{"userName":"尼古拉斯.大壮","userAccount":"18316486768","createTime":"2021-10-09T12:47:40.000Z","code":200,"message":"查询成功！"},{"userName":"爱新觉罗.大壮","userAccount":"18316486162","createTime":"2021-10-09T12:47:40.000Z","code":200,"message":"查询成功！"}])

在服务器端，需要对script的src进行url解析，将data作为参数放入回调函数中，最后通过res.end(callback(data))中将要执行的函数放入客户端的script中，在客户端对该函数进行执行。所以callback函数得是个全局变量，方便另一个script标签里面的代码去调用callback函数
后台程序员给前端开发者提供一段脚本，数据就在这个脚本中，以实参的形式传递给callback函数呈现出来。

2.简单例子

再来一个简单例子，看看服务器端的代码，让你明白jsonp方式进行数据交互的详情
后端（nodejs为例）

app.get('/jsonp_data_get', function (req, res) {
   res ={
 
       name:'aaa',
 
       nickname:'bbb'
 
   };
 
   res.end(req.query.callback+'('+JSON.stringify(res)+')');//jsonp格式

前端:

    let script = document.creatElement('script');

    function getData(data){
        console.log(data)
    }
    
    script.src = 'http://localhost:8080/jsonp_data_get?callback=getData';
    
    document.body.appendChild(script)

最终的结果相当于添加了这样的script标签（直接调用了传入了数据了getData函数）

<script>
    getData(response)
</script>

3.jq里的jsonp

用法：

    //执行ajax函数中的jsonp逻辑(因为jquery作者把jsonp的逻辑封装在ajax函数中)

    $.ajax({
        url: "url地址",
        type: "get ",
        dataType: "jsonp",//必选参数
        success: function (res) {
            console.log(res);
        },
        error:function(err) {
            console.log(err);
        }
    })