如何在原生js和jquery中使用jsonp
一、什么是 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 请求中,是允许通过 script 标签的 src 跨域请求,可以在请求的结果中添加回调方法名,在请求页面中定义方法,既可获取到跨域请求的数据,通常用于解决 ajax 无法跨域请求的问题。
也许文字不太清楚我们看案例。
二、原生 js 中 jsonp 的使用
应用:做一个百度搜索的搜索提示
准备:拿百度搜索的接口,既然是百度的,那肯定是不同源了。
f12(审查元素)→Network→狂输内容(最好是辨识度高的)。
仔细看会看见请求的变化,这样就能拿到接口了,我拿到了一条:
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
那么到底是不是呢,我们丢浏览器验证一下:
拿到了这么多的数据,对比上一张图,可见没拿错,这个接口好像有点长,我们来剪短一点,去掉多余的(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
就可以了。
我们来做个简单的数据接收:
$.ajax({ type: "get", url: "http://接口/city.php?string", data: "data", dataType: "jsonp", //这里改为 jsonp 即可跨域使用 success: function(response) { console.log(response) } });
四、总结
以上这就是jsonp
在原生 js 中和 jq 中的使用了,非常简单。
假如你在团队中已经成为一名有一定话语权的前端了,我希望你永远不要去配置跨域,请让后端去做(4 行代码就能搞定的事)!这种事情不要去妥协!
码云笔记 » 如何在原生js和jquery中使用jsonp