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();
?>
演示效果如下图所示。