2020-4-16 前端達(dá)人
自己寫了段jquery的ajax請(qǐng)求，并輸出到頁(yè)面的表格中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery實(shí)現(xiàn)JSONP</title>
</head>
<body>
<div id="mydiv">
<button id="btn">點(diǎn)擊</button>
<div id="container">
<!--每個(gè)條目-->
<div class="item">
<div class="item-title">作業(yè)名字</div>
<div>
<span class="item-content">創(chuàng)建時(shí)間</span>
<span class="item-content">發(fā)布老師</span>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$.ajax({
async : true,
url : "xxxxxxxxxxx",
type : "GET",
dataType : "json", // 返回的數(shù)據(jù)類型，設(shè)置為JSONP方式
jsonp : 'callback', //指定一個(gè)查詢參數(shù)名稱來(lái)覆蓋默認(rèn)的 jsonp 回調(diào)參數(shù)名 callback
jsonpCallback: 'handleResponse', //設(shè)置回調(diào)函數(shù)名
data : {
q : "javascript",
count : 1,
city:'北京'
},
success: function(response, status, xhr){
// console.log('狀態(tài)為：' + status + ',狀態(tài)是：' + xhr.statusText);
// console.log(response);
var group = response.hourly_forecast;
console.log(group,111111111)
console.log(group.length,222222222222)
//拼接字符串
var str = '';
//對(duì)數(shù)據(jù)做遍歷，拼接到頁(yè)面顯示
for(var i=0;i<group.length;i++){
str += '<div class="item">'+
'<div class="item-title">'+ group[i].date +'</div>'+
'<div>'+
'<span class="item-content">'+ group[i].hum +'</span>'+
'<span class="item-content">'+ group[i].pop +'</span>'+
'</div>'+
'</div>';
}
//放入頁(yè)面的容器顯示
$('#container').html(str);
}
});
});
});
function handleResponse(response){
// 對(duì)response數(shù)據(jù)進(jìn)行操作代碼
alert("jsonp success!");
}
</script>
</html>
一、處理跨域的方式：
1.代理
2.XHR2
HTML5中提供的XMLHTTPREQUEST Level2（及XHR2）已經(jīng)實(shí)現(xiàn)了跨域訪問(wèn)。但ie10以下不支持
只需要在服務(wù)端填上響應(yīng)頭：
header("Access-Control-Allow-Origin:*");
/*星號(hào)表示所有的域都可以接受，*/
header("Access-Control-Allow-Methods:GET,POST");
3.jsonP
原理：
ajax本身是不可以跨域的，
通過(guò)產(chǎn)生一個(gè)script標(biāo)簽來(lái)實(shí)現(xiàn)跨域。因?yàn)閟cript標(biāo)簽的src屬性是沒(méi)有跨域的限制的。
其實(shí)設(shè)置了dataType: 'jsonp'后，$.ajax方法就和ajax XmlHttpRequest沒(méi)什么關(guān)系了，取而代之的則是JSONP協(xié)議。JSONP是一個(gè)非官方的協(xié)議，它允許在服務(wù)器端集成Script tags返回至客戶端，通過(guò)javascript callback的形式實(shí)現(xiàn)跨域訪問(wèn)。
ajax的跨域?qū)懛ǎ?
（其余寫法和不跨域的一樣）：
比如
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com