为什么我的基本Ajax脚本不起作用？

Question

我一直在玩Javascript，现在我来到了Ajax。 我正在尝试编写一个非常简单的脚本来获取文件内容-使用id=test在div打印txt文件的内容。 这是脚本：

function loadXMLDoc(url)
{
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.open("GET" , url ,false);
    xmlhttp.send(null);
    document.getElementById('test').innerHTML = xmlhttp.responseText;  
}

当我在此网站上使用它时：

<div id="test"  name="test"> HELLo </div>
<button type="button" onclick="loadXMLDoc('test1.txt')">ClickMe1</button>

使用此脚本， HELLo不能替换为任何内容-该脚本将清空容器。

也许我缺少一些琐碎的东西，但是我需要安装PHP吗？ 我不这么认为，但是...我不确定这里发生了什么。 当我调试时， xmlhttp为空。 为什么呢

Answer 1

在替换文本之前，您需要检查readyState和HTTP响应状态。

if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("test").innerHTML=xmlhttp.responseText;
    }

http://www.w3schools.com/ajax/ajax_xmlhttprequest_onreadystatechange.asp上的示例

请让我知道它是否有效。

Answer 2

对于IE以外的浏览器

IE的活动X对象似乎不太关心就绪状态，其他浏览器在运行函数时可能没有足够快地加载文本（因此，为什么获取空白而不是文件内容）。 IE的活动X似乎会自动处理此问题，并且会忽略就绪状态，因此您必须按以下方式分解代码。 通常，在访问responseText之前，请检查请求的status以查看其是否已被完全读取。

添加onreadystatechange您将无法检查status属性，因为在文件系统请求上没有进行HTTP请求。 （对于未通过HTTP发出的请求，状态始终为0）我能提供的最好的方法是：

function loadXMLDoc(url)
{
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
        document.getElementById('test').innerHTML = xmlhttp.responseText;
        }
       xmlhttp.open( "GET", url );
       xmlhttp.send(null);

    }
    else
    {// code for IE6, IE5
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

       xmlhttp.open( "GET", url );
       xmlhttp.send(null);
       document.getElementById('test').innerHTML = xmlhttp.responseText;
    }

}

对于铬

如果您使用的是CHROME ，则必须使用--allow-file-access-from-files开关启动chrome。 否则，它将拒绝文件系统 ajax请求。 （即使使用诸如jQuery之类的“简易”库，也必须设置此值）。

一般在文件系统上运行AJAX应用

通常这不是一个好主意，对此路线有很多警告。 通常，本地开发是通过将Web服务器安装到开发计算机上的本地主机来完成的。

Answer 3

今天，它的旧风格像xmlhttp = new XMLHttpRequest（）一样调用ajax；

您还有很多其他选择。

• http://api.jquery.com/jQuery.ajax/

• http://www.w3schools.com/jquery/jquery_ref_ajax.asp

• http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/

Answer 4

首先，您必须与“ 同源政策”抗衡。

以下是用于同步请求的简单工作代码：

var req = new XMLHttpRequest();
req.onreadystatechange = function() {

if (req.status == 200 && req.readyState == 4) {
    ...
}

req.open('GET', url, true);
req.send(null);

请注意，这适用于Firefox / Opera / Chrome。 如果是IE，请使用：

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

Answer 5

尝试使用jQuery。 在此处下载最新版本并编写以下代码段：

function loadXMLDoc(url) {   
  $("#test").load(url);
}

它更简单，更不易出错

Answer 6

您需要一台服务器来侦听请求。 您的常规文件系统将无法响应AJAX请求。

您不需要PHP，但是需要apache或类似的Web服务器。