0

server: apache http server 2.2 problem: code does not load my text file

hello people. im currently trying to learn javascript and am following several tutorials. written below is a code off of w3schools. what its supposed to do is change the displayed text upon clicking the button. however, this does not work for me. the html file where the code below is save and the text file im trying to open are in the same folder. im accessing the html file off of chrome using this: http://localhost/ajaxtutorial.html. while it does display the html file correctly, upon clicking the button nothing happens. ive tried changing the file to php and making an equivalent php file to the said text file but still nothing happens. please help.

<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>

Chris Shouts
  • 5,377
  • 2
  • 29
  • 40
user571099
  • 1,491
  • 6
  • 24
  • 42

1 Answers1

1

In myFunction the xmlhttp variable is not in the scope of the function. This should be causing a JavaScript error, which you can view in Chrome by going to Menu > Tools > JavaScript console. One way to fix this would be to pass the xmlhttp object as a parameter.

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
    });
}

Update

I created a working example at http://jsfiddle.net/6rPgE/

As for your question about the modifications I suggested... The second parameter to the loadXMLDoc method (cfunc) is a function. In this case, an anonymous function is created inside myFunction which will be passed as the cfunc parameter to loadXMLDoc. When the onreadystatechange callback is invoked, the cfunc function is called with xmlhttp as the first parameter. This parameter is passed into the anonymous function defined inside myFunction, and is responsible for actually doing something with the AJAX response. On an entirely different note, I highly recommend using a debugger (Chrome has one built-in) and the information provided by the browser's error console to assist you in debugging these issues in the future. Learning how to use a debugger will save you countless hours of banging your head against the wall.

Update 2

Just thought it would be nice to look at how this can be done using jQuery with quite a bit less code. AJAX is one area where it can be really nice to use a library that abstracts away the details.

Another example that uses jQuery at http://jsfiddle.net/j9QvE/1/

Update 3

Note that in my code I replaced the path to ajax_info.txt with a path specifically used for testing AJAX functionality in jsFiddle (/echo/js/?js=Success!). This was necessary because ajax_info.txt does not exist on the jsFiddle servers, so requesting it would have resulted in a 404 error. Don't forget to change the path to point to an appropriate resource on your own domain.

Community
  • 1
  • 1
Chris Shouts
  • 5,377
  • 2
  • 29
  • 40
  • i edited the following lines: xmlhttp.onreadystatechange=cfunc; cfunc.call (this , xmlhttp); and made the function i am passing to loadxmldoc as function(xmlhttp)... however it still not working. one question sir, in myFunction's second parameter we are supposed to pass xmlhttp as parameter to loadXMLDOC function right? however the xmlhttp object is created in the loadXMLDoc function. in effect are we passing anything? im really confused – user571099 Feb 16 '11 at 16:51
  • sir its still not working. T_T. i checked your code and it is working beautifully. however, when i try to implement it for my program nothing happens. i checked chrome's javascript log and found that i get this error: "Failed to load resource: the server responded with a status of 404 (Not Found)" – user571099 Feb 17 '11 at 13:32
  • thank you very much for being patient with me. got it working finally – user571099 Feb 18 '11 at 23:53