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

跨源Ajax请求

2024-08-20 16:56:48   220人阅读

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


联系
我们