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();
?>

演示效果如下图所示。