前端
一点也不简单

jsonp的原生js使用和jquery的使用方法

一、什么是jsonp?

简单点,jsonp其实就是一个跨域解决方案。当然它和json没有半毛钱关系!

浏览器处于安全考虑,制定了同源策略,即同协议、同主机名、同端口。其中有任何一项不同即为不同源。

举几个栗子:

  • http://www.baidu.com和http://www.baidu.com:8080,端口不同
  • 10.0.13.1和10.0.13.2,主机名不同
  • http://~~和https://,协议不同

因为同源策略的存在,所以Js跨域请求数据是不可以的

但是:

可以把要请求的数据封装成一个js语句,做一个方法的调用。

跨域请求js脚本可以得到此脚本。得到js脚本之后会立即执行。

可以把数据做为参数传递到方法中。就可以获得数据。从而解决跨域问题。

jsonp的原生js使用和jquery的使用方法
图示

jsonp原理:

浏览器在js请求中,是允许通过script标签的src跨域请求,可以在请求的结果中添加回调方法名,在请求页面中定义方法,既可获取到跨域请求的数据,通常用于解决ajax无法跨域请求的问题。

也许文字不太清楚我们看案例:

二、原生js中jsonp的使用:

应用:做一个百度搜索的搜索提示

jsonp的用法

准备:拿百度搜索的接口,既然是百度的,那肯定是不同源了

f12(审查元素)→Network→狂输内容(最好是辨识度高的)

jsonp的原生js使用方法

仔细看会看见请求的变化,这样就能拿到接口了,我拿到了一条

https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=wise_web&sugsid=1421,21122,28767,28721,28558,28584,26350,28519,28625,28606&wd=111111111&req=2&bs=1111&pbs=1111&csor=9&pwd=11111111&cb=jQuery1102021011196630534612_1554366585119&_=1554366585135

那么到底是不是呢,我们验证一下

jsonp的原生js使用和jquery的使用方法
结果

拿到了一条这样的字符串,对比上一张图,可见没拿错,这个接口好像有点长,我们来剪短一点,去掉多余的(wd)

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=1111111&cb=

缩短成这样(主要两个东西wd(关键字),cb(回调函数))

再我们来使用,就不一步一步来了,直接上代码,代码上有步骤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // jsonp 和 json 没有半毛钱关系
        // jsonp 是一种非官方又广泛被使用的 跨域请求解决方案
        // 用于解决ajax无法实现跨域请求(同源策略的限制)的问题
        // src 属性 不受同源策略限制  script img iframe

        // jsonp如何实现跨域
        // 1. 动态的创建script元素
        // 2. 将访问接口写入script元素的src属性
        // 3. 设置参数和回调函数
        // 4. 将script元素加入页面
        // tips: jsonp 是 get 请求

        function abc(data) { //3.设置参数和回调函数
            var result = data.s;
            var list = document.querySelector('#list');
            list.innerHTML = ""; //清空ul内的元素
            result.forEach(function(elm, i) {
                var tempLi = document.createElement('li');
                tempLi.innerHTML = elm;
                tempLi.onclick = function() {
                    location.href = "https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&rsv_idx=1&tn=baidu&wd=" + this.innerHTML; //设置跳转
                }
                list.appendChild(tempLi); //动态添加元素
            });
        }
        window.onload = function() {
            var baidu = document.querySelector('#baidu');
            baidu.onkeyup = function() {
                var url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + this.value + "&cb=abc";
                var script = document.createElement('script'); //1.动态创建script标签
                script.src = url; //2.将访问接口写入script元素的src属性
                document.body.appendChild(script); //4.将script元素加入页面
            }
        }
    </script>
</head>
<body>
    <input type="text" id="baidu">
    <ul id="list"></ul>
</body>
</html>

原生js的jsonp大致就分为这几个步骤

三、jquery中jsonp的使用

在jquery中并没有单独提供jsonp的使用方法,只有ajax的使用,但是jquery非常友好的给我们开了个小灶,只要将datatype值改为jsonp就可以了

我们来做个简单的数据接收

<script>
        $.ajax({
            type: "get",
            url: "http://web-yyb.top/city.php?string", //城市接口
            data: "data",
            dataType: "jsonp", //这里改为jsonp即可跨域使用
            success: function(response) {
                console.log(response)
            }
        });
    </script>

打印结果如下

jsonp的jquery的使用方法
打印结果

这就是jsonp在原生js中和jq中的使用了,非常简单。

赞(1) 打赏
未经允许不得转载:专注前端开发和vps技术交流的博客-纸飞机 » jsonp的原生js使用和jquery的使用方法

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

微信扫一扫打赏