先看本地的test.html:
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp = new XMLHttpRequest(); // chrome
xmlhttp.open("GET", "http://localhost/index.php", true);
xmlhttp.send();
xmlhttp.onreadystatechange = function() // 当服务器响应已做好被处理的准备时所执行的任务
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
}
}
</script>
</head>
<body>
<button type="button" οnclick="loadXMLDoc()">请求数据</button>
<div id="myDiv">hehe</div>
</body>
</html>
再看apache/php的index.php:
<?php
echo "I love you";
?>
结果, 用alert调试发现, xmlhttp.status总是为0, 什么原因呢? 跨域呗! 怎么解决, 改index.php为:
<?php
header("Access-Control-Allow-Origin:*");
echo "I love you";
?>
重启apache, 然后就OK了, 如下:
后面我们会继续介绍浏览器的同源策略和跨域问题。