跨源Ajax请求
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了跨源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请求的主要内容，如果未能解决你的问题，请参考以下文章
使用 AJAX、JQuery、Apache 和基本身份验证的跨源请求
如何使用 Ajax Api 在 Google Distance Matrix API 中修复“跨源请求被阻止”[重复]