跨源Ajax請求

來源:互聯網
上載者:User

標籤:後台   .com   支援   規範   跨站指令碼攻擊   document   char   互動式   共用   

1.Ajax介紹

   Ajax是現代互動式網頁應用的網頁開發技術,通過在後台與伺服器進行少量資料交換,AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下,對網頁的某部分進行更新,AJAX 的核心是 JavaScript 對象 XMLHttpRequest。該對象在 Internet Explorer 5 中首次引入,它是一種支援非同步請求的技術。簡而言之,XMLHttpRequest使您可以使用 JavaScript 向伺服器提出請求並處理響應,而不阻塞使用者。

預設情況下瀏覽器限制指令碼只能在它們所屬文檔的來源內產生Ajax請求,來源由URL中的協議、主機名稱和連接埠號碼組成,這就意味著當我從http://wsx載入一個文檔後,文檔內含的指令碼通常無法產生對http://wsx:8080的請求,因為第二個URL的連接埠號碼是不同的,所以處於文檔來源之外。從一個來源到另一個來源的Ajax請求被稱為跨源請求(這一策略的目的是降低跨站指令碼攻擊的風險);跨源資源共用(Cross-Origin Resource Sharing,CORS)規範提供了一直合法的方式來產生跨源請求。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<button>Apples</button>
<button>Cherries</button>
<button>Bananas</button>
</div>
<div id="target">press a button</div>
<script>
var buttons =document.getElementsByTagName("button");
for(var i=0;i<buttons.length;i++){
buttons[i].onclick=handleButtonPress
}
var httpRequest;
function handleButtonPress(e){
httpRequest=new XMLHttpRequest();
httpRequest.onreadystatechange=handleResponse();
httpRequest.open("GET","http://wsx:8080/"+ e.target.innerHTML);
httpRequest.send();
}
function handleResponse(){
if(httpRequest.readyState==4&&httpRequest.status==200){
document.getElementById("target").innerHTML=httpRequest.responseText;
}
}
</script>
</body>
</html>
這個例子中的指令碼擴充了使用者所按按鈕的內容,把它附加到http://wsx:8080上,然後嘗試生產一個Ajax請求這就意味著指令碼正在試圖生產一個跨源請求

跨源Ajax請求

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.