由例子引入：
先列下html結(jié)構(gòu)
<body>
<div id="mydiv">
<button id="btn">點(diǎn)擊</button>
</div>
</body>
一、異步請(qǐng)求ajax（因?yàn)g覽器同源策略不能跨域）
<script type="text/javascript">
window.onload=function(){
var btn=document.getElementById("btn");
btn.onclick=function(){
var xhr=new XMLHttpRequest();//創(chuàng)建一個(gè)XMLHttpRequest對(duì)象
xhr.onreadystatechange=function(){//readyState每變化一次，就執(zhí)行一次這個(gè)事件
if(xhr.readyState==4 && xhr.status=200){//請(qǐng)求已完成，響應(yīng)已就緒
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或參數(shù)式JSON）==》解決不能跨域的問(wèn)題的方法之一
原理：動(dòng)態(tài)創(chuàng)建<script>標(biāo)簽，利用<script>的src不受同源策略約束來(lái)跨域獲取數(shù)據(jù)。
在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中的實(shí)現(xiàn)
$(document).ready(function(){//或簡(jiǎn)寫$(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("狀態(tài)為："+status+"狀態(tài)是："+xhr.statusText);
console.log(response);
}
});
});
});
實(shí)現(xiàn)結(jié)果：
結(jié)果.png
