首页 > 代码库 > 跨源Ajax请求

跨源Ajax请求

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请求