首页 > 编程笔记 > JavaScript笔记 > Ajax 阅读:16

AJAX跨域请求(案例实战)

AJAX 跨域通信的实现方法:在被请求域中提供一个用于响应请求的服务器端脚本文件,并在响应头部消息中添加 Access-Control-Allow-Origin 参数,将参数值指定为允许向该页面请求数据的域名+端口即可。

【示例】下面示例演示了如何实现跨域数据请求。在客户端页面中设计一个操作按钮,当单击该按钮时,向另一个域中的 test.php 脚本文件发送请求数据,该脚本文件返回一段简单的字符串,本页面收到该文字后将其显示在页面上。

前台页面

<script type="text/javascript">
    function ajaxRequest () {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://localhost/test.php', true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                document.getElementById("result").innerHTML = this.responseText;
            }
        };
        xhr.send(null);
    }
</script>
<input type="button" value="跨域请求" onclick=ajaxRequest()"></input><br>
响应数据:<output id="result">

跨域后台页面

<?php
    header('Access-Control-Allow-Origin:http://localhost/');
    header('Content-Type:text/plain;charset=UTF-8');
    echo '我是来自异域服务器的数据。';
    flush();
?>
演示效果如下图所示。

所有教程

优秀文章