JSONP跨域以及CORS跨域

最新推荐文章于 2021-10-10 21:31:00 发布

一位不透露姓名的先生

最新推荐文章于 2021-10-10 21:31:00 发布

阅读量229

点赞数

文章标签： jsonp

本文链接：https://blog.csdn.net/qq_48967079/article/details/108711608

版权

JSONP跨域以及CORS跨域

1.什么是跨域?

现代浏览器为了安全，做了一个同源限制，以防网络上的接口可以不受限制的被任意人调用，服务器是不管这些事情的。
跨域指的是A网站向B网站发a
当协议相同+域名相同+端口号相同浏览器认为是同一个网站，不收同于策略的影响，可以正常的发送AJAX请求。

2.JSONP跨域

    JSONP 跨域的原理，就是利用 某些标签，跨域请求时，不受同源策略的限制 比如 script img 
		JS原生方式的JSON跨域 
		JSONP 跨域 跟XMLHttpRequest 异步请求对象没关系
		JSONP：他只支持GET请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function getResult(res){
				alert(res.province)
			}
		</script>
		//使用JSONP获取手机号信息
		//callback后为回调函数名
		<script src="https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=13333333333&callback=getResult" type="text/javascript" charset="utf-8">
			
		</script>
	</head>
	<body>
	</body>
</html>

3.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">JQuery封装过后的JSONP</button>
	</body>
</html>
<script type="text/javascript">
	/* function getRes(res){
		alert(res.catName);
	} */
	$("button").click(function(){
		$.ajax({
				type:"GET",
				url:"https://tcc.taobao.com/cc/json/mobile_tel_segment.htm",
				data:{tel:"13259141515"},
				jsonp:"callback",//jsonp 请求 回调函数名Jqurey会自动生成 
				//jsonpCallback:  可指定回调函数名
				/* jsonpCallback:"getRes", */
				success:function(res){
					alert(res.catName);
				},
				dataType:"jsonp"
			});
	})
			
</script>

4.getJSON()方法简化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">按钮</button>
	</body>
</html>
<script type="text/javascript">
	$("button").click(function(){
		$.getJSON("https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=13259143333&callback=?",function(res){
						alert(res.catName);
					});
	})
	//callback=? 回调函数名给个？ 让Jquery随机生成一个回调函数名	
</script>

5.CORS跨域

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button" onclick="sendAjax()">发送Ajax请求</button>
	</body>
</html>
<script type="text/javascript">
	function sendAjax() {
		//创建Ajax请对象
		var xmlhttp = new XMLHttpRequest();
		//发送请求:post请求 他的请求参数,放在请求体里面来提交的，所以一般不在url后面拼接
		xmlhttp.open("POST", "http://localhost:8080/PostDemo_war_exploded/demo", true);
		//3.设置请求头信息
		xmlhttp.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
		xmlhttp.send("username=zhangsan&password=123456")
		//接收响应
		xmlhttp.onreadystatechange = function() {
			//判断readyState就绪状态是否为4，判断status响应状态码是否为200
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				//获取服务器的响应结果
				var responseText = xmlhttp.responseText;
				alert(responseText);
				var jsonObj=JSON.parse(responseText);
				//alert(jsonObj);
				alert(jsonObj.username);
			}
		}
	}
</script>