跨域请求

最新推荐文章于 2024-11-12 11:19:19 发布

秃头少年打代码

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量89

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_51717449/article/details/115011348

版权

JSONP跨域请求

	现代浏览器为了安全，做了一个同源限制；本质上，其实是不存在所谓的跨域不跨域的；把浏览器想象成一个发送
网络请求的软件，按道理来说，请求都是可以发送出去的，但是在web端，浏览器里，这么做就不合适。如果网络上的接
口可以不受限制的被任何人调用，那将是一个非常混乱的场景。所以，为了现代浏览器做了同源策略来防止这种情况发送。

同源策略

	同源策略就是: 协议相同+域名相同+端口号相同
	浏览器才认为是同一个网站，才不受同源策略的影响，才可以正常的发送AJAX请求，其他情况下，发送AJAX请求，
都属于跨域。
	请注意: 这里说的是 XMLHttpRequest 下的 AJAX 请求

JSONP跨域

jsonp:jsonp解决跨域问题是利用某些HTML标签不受浏览器同源策略的限制来发送请求。
总结:
	  1.利用script标签异步加载，而非传统的ajax
	  2.异步script加载不受浏览器同源策略
	  3.给script.src=callback=fn来告知请求后台前端提供的fn是什么
	  4.基本就是前端提供方法，后端提供数据并调用前端这个方法
	  5.jsonp只支持GET请求

JSONP跨域代码

//用手机归属地的接口来测试JSONP的跨域请求 
//https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=    tel后面填写你的手机号
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
	</body>
</html>
<script type="text/javascript">
	//获取后台响应数据的回调函数名
	function getJsonData(res) {
		alert(res.catName);
	}
</script>
<script src="https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=&callback=getJsonData"></script>
//注意：回调函数的script标签定义在 请求接口的script标签的前面,我这里没有填写手机号;
//callback=getJsonData 指定请求成功，回调函数名getJsonData  注意这个键是大家约定好的一般叫callback
//后台会通过这个callback这个值getJsonData
// 然后把后台返回的json数据 拼接成一个回调函数返回

JQuery封装的JSONP请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<button type="button">发送jsonp</button>
	</body>
</html>
<script type="text/javascript">
	function getData(obj){
		alert(obj.catName);
	}
	$('button').click(function(){
		$.ajax({
			type:"GET",
			url:"https://tcc.taobao.com/cc/json/mobile_tel_segment.htm",
			data:{
				tel:""
			},
			jsonp:"callback",   //jsonp 请求 回调函数名jquery会自动随机生成
            //jsonpCallback:'getData' //指定jsonp请求成功后的回调函数名
			success:function(obj){
				alert(obj.catName);
			},
			dataType:"jsonp"    //注意你要是发送jsonp 请求，注意后台返回的数据形式也要声明为jsonp
		})
	})	
</script>