利用Jsonp跨域请求数据（原生和Jquery的ajax请求），简单易懂！ - 好文

<>前言：本文示例部署在XAMPP建站集成软件包上，在localhost环境下进行测试

<>1、什么是跨域

* 由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。存在跨域的情况 : <>
（1）网络协议不同，如http协议访问https协议。 <>（2）端口不同，如8080端口访问3000端口。 <>（3）域名不同，
如aaaa.com访问bbbb.com <http://xn--aaaa-f96g.xn--combbbb-816un48d.com>。 <>
（4）子域名不同，如java.ddd.com访问qianduan.ddd.com
<http://xn--java-f96g.ddd.xn--comqianduan-6g36al79f.ddd.com>。 <>
（5）域名和域名对应ip,如www.a.com访问20.205.28.90.
<>2、Jsonp方法

* 因为srript标签是不存在跨域的，所以利用
script标签，加载src路径，实现跨域加载js文件。该js文件中需要定义好一个方法，将该方法名传递给服务端，服务端根据该方法名，拼装一个方法调用语句，响应给浏览器。又浏览器来执行该语句调用方法。通过参数，将响应的数据取出即可。
<>（1）原生JS请求方式

* 前端代码： var script = document.createElement('script'); script.type =
'text/javascript'; script.src = './js/text.js';
document.head.appendChild(script); // 回调执行函数 function onBack(res) {
console.log(res) //{name:"小明"，age：24} }
* 后端代码： onBack({ name:"小明", age:24 })
* 这里需要注意的是，后端的数据形式必须作为函数的参数，且函数名要前后端保持一致。
<>（2）Jquery中的ajax请求方式

前端代码：
$.ajax({ url:"./js/text.js", type:"GET", dataType:"jsonp", // 定义返回方式为jsonp
jsonpCallback:"onBack", //定义回调函数名字，前后端保持一致 success:function(data){
console.log(data) //{name:"小明"，age：24} }, error:function(res){
console.log("请求失败！") } })
后端代码：
onBack({ name:"小明", age:24 })
* 缺点1：只能使用get请求。
* 缺点2：因为使用的是script标签，存在安全隐患。
* 优点1：支持老式浏览器，以及可以向不支持CORS的网站请求数据。

热门工具换一换