欢迎来到知了汇智!
联系电话:知了汇智-电话号码 028-62016472 / 13228113191

利用Jsonp跨域请求数据(原生和Jquery的ajax请求)-知了汇智

利用Jsonp跨域请求数据(原生和Jquery的ajax请求)

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

  1、什么是跨域

  由于浏览器同源策略,凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。存在跨域的情况 :

  (1)网络协议不同,如http协议访问https协议。

  (2)端口不同,如8080端口访问3000端口。

  (3)域名不同,如aaaa.com访问bbbb.com。

  (4)子域名不同,如java.ddd.com访问qianduan.ddd.com。

  (5)域名和域名对应ip,如www.a.com访问20.205.28.90.

利用Jsonp跨域请求数据(原生和Jquery的ajax请求)

 

  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的网站请求数据。
 

  版权声明:本文来源于网络,由知了堂搜集整理,仅供大家学习Java时使用

项目教学·项目驱动

132 2811 3191
预约免费试学
点击咨询
预约试学