Question

服务器：apache http server 2.2 问题：代码无法加载我的文本文件

你好。我目前正在尝试学习javascript并且正在学习几个教程。下面写的是w3schools的代码。它应该做的是在单击按钮时更改显示的文本。但是，这对我不起作用。保存下面代码的html文件和我试图打开的文本文件位于同一个文件夹中。我使用以下方法访问chrome的html文件：http://localhost/ajaxtutorial.html。虽然它确实正确显示了html文件，但在点击按钮时没有任何反应。香港专业教育学院尝试将文件更改为PHP并制作一个等效的PHP文件到所述文本文件但仍然没有任何反应。请帮忙。

<html>

<script type="text/javascript">

//comments are from http://www.tizag.com/ajaxTutorial/ajaxxmlhttprequest.php

    function loadXMLDoc(url , cfunc)
    {
        var xmlhttp;

        //XMLHttpRequest object is used to exchange data with a server behind the scenes
        //creates an xmlhttprequest object
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

        //The XMLHttpRequest object has a special property called onreadystatechange
        //onreadystatechange stores the function that will process the response from the server
        //every time the "ready state" changes, this function will be executed
        xmlhttp.onreadystatechange=cfunc;

        xmlhttp.open("GET",url,true);
        xmlhttp.send(null);

    }   

    function myFunction()
    {
        loadXMLDoc
        ("ajax_info.txt",           
          function()
          {
            //The XMLHttpRequest object has another property called readyState
            //This is where the status of our SERVER'S RESPONSE is stored
            //The SERVER RESPONSE can be processing, downloading or completed
            //When the property readyState is 4 that means the response is complete and we can get our data

            //Download worked as intended, data request successful if status property = 200

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

          }               
        );
    }

</script>

<div id="myDiv">
    <h2>Let AJAX change this text</h2>
</div>

<button type="button" onclick="myFunction()">Change Content</button>

Answer 1

在myFunction xmlhttp变量不在函数范围内。这应该会导致JavaScript错误，您可以通过转到菜单＆gt;在Chrome中查看。工具＆gt; JavaScript控制台。解决此问题的一种方法是将xmlhttp对象作为参数传递。

function loadXMLDoc(url , cfunc) {
    //some code...
    xmlhttp.onreadystatechange=function() {
        //pass xmlhttp as a parameter to this function and preserve the context
        //see https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call
        cfunc.call(this, xmlhttp);
    }
    //some more code...
}

function myFunction() {
    loadXMLDoc("ajax_info.txt", function(xmlhttp) {
        //xmlhttp is now in scope because we passed it as a parameter
    });
}

更新

我在http://jsfiddle.net/6rPgE/

创建了一个工作示例

至于你提出的有关修改的问题...... loadXMLDoc方法（cfunc）的第二个参数是一个函数。在这种情况下，将在myFunction内创建一个匿名函数，该函数将作为cfunc参数传递给loadXMLDoc。调用onreadystatechange回调时，将调用cfunc函数，并将xmlhttp作为第一个参数。此参数传递到myFunction中定义的匿名函数，并负责实际执行AJAX响应。在完全不同的说明中，我强烈建议使用调试器（Chrome has one built-in）和浏览器错误控制台提供的信息，以帮助您将来调试这些问题。学习如何使用调试器将为您节省无数个小时的撞击墙。

更新2

只是认为看看如何使用jQuery以及相当少的代码来完成这项工作会很好。 AJAX是一个使用抽象细节的库非常好的领域。

在http://jsfiddle.net/j9QvE/1/

使用jQuery的另一个例子

更新3

请注意，在我的代码中，我用路径specifically used for testing AJAX functionality in jsFiddle（/ echo / js /？js = Success！）替换了ajax_info.txt的路径。这是必要的，因为jsFiddle服务器上不存在ajax_info.txt，因此请求它会导致404错误。不要忘记将路径更改为指向您自己域中的适当资源。

初学者问题：使用open方法不加载我的文本文件

1 个答案:

更新

更新2

更新3