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>
![同源策略与jsonp跨域[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)