跨域问题汇总
2018-03-19 本文已影响0人
阿金的故事
由例子引入：
先列下html结构
<body>
<div id="mydiv">
<button id="btn">点击</button>
</div>
</body>
一、异步请求ajax（因浏览器同源策略不能跨域）
<script type="text/javascript">
window.onload=function(){
var btn=document.getElementById("btn");
btn.onclick=function(){
var xhr=new XMLHttpRequest();//创建一个XMLHttpRequest对象
xhr.onreadystatechange=function(){//readyState每变化一次，就执行一次这个事件
if(xhr.readyState==4 && xhr.status=200){//请求已完成，响应已就绪
alert(xhr.responseText);
}
};
xhr.open("get","https://api.douban.com/v2/book/search?q=javascript&count=1",true);
xhr.send();
}
}
二、JSONP（JSON with Padding 填充式JSON或参数式JSON）==》解决不能跨域的问题的方法之一
原理：动态创建<script>标签，利用<script>的src不受同源策略约束来跨域获取数据。
在body后加<script>
<script type="text/javascript">
function handleResponse(response){
console.log(response);
}
</script>
<script type="text/javascript">
window.onload=function(){
var btn=document.getElementById("btn");
btn.onclick=function(){
var script=document.createElement("script");
script.src="https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
document.body.insertBefore(script,document.body.firstChild);
};
};
</script>
三、跨域在jQuery中的实现
$(document).ready(function(){//或简写$(function(){})
$("#btn").click(function(){
$.ajax({
async:true,
url:"https://api.douban.com/v2/book/search",
type:"GET",
dataType:"jsonp",
jsonp:"callback",
jsonpCallback:"handleResponse",
data:{
q:"javascript",
count:1,
},
success:function(response,status,xhr){
console.log("状态为："+status+"状态是："+xhr.statusText);
console.log(response);
}
});
});
});
实现结果：
结果.png
