ajax请求数据成功,页面的数据没有加载出来

w3c的ajax的例子,点击按钮,(ajax请求读取一个本地ajax.txt文件)页面展示其内容,
在chrome中打开页面,点击按钮请求成功,但是页面没有显示ajax.txt的内容,这是为什么呢?
代码和chrome截图如下

<html>
    <head>
        <script type="text/javascript">
            function loadXMLDoc () {
                var xmlhttp;
                if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                }
                else {// code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function () {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
                    }
                }
                xmlhttp.open("GET", "ajax.txt", true);
                xmlhttp.send();
            }
        </script>
    </head>
    <body>
        <h2>AJAX点击下方按钮,从后端获取数据</h2>
        <button type="button" onclick="loadXMLDoc()">请求数据</button>
        <div id="myDiv"></div>
    </body>
</html>

图片描述

阅读 9.3k
4 个回答

开启本地服务器环境。

你把JavaScript的代码放到</body></html>之间

是不是执行顺序写反了,回调方法放到send之后调试下

今天看到《javascript权威指南》chapter18的一段话,
XMLHttpRequest和本地文件
XMLHttpRequest用于HTTP和HTTPS协议一起工作,但比如像请求方法和响应状态码等部分APi是HTTP特有的。如果从本地文件中加载页面,那么该页面中的脚本将无法通过相对URL使用XMLHTTPRequest,因为这些URL将相对于file://URL而不是http://URL.而同源策略通常会阻止使用绝对http://URL。结果是当使用XMLHTTPRequest时,为了测试它们通常必须把文件上传到web服务器(或运行一个本地服务器)。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题