Ajax：未从XML文件检索数据

Question

I'm learning ajax and trying to display some data on a page:

This is my method that retrieves data from xml file:

function MakeXMLHTTPCall() {
    var xmlHttpObj;
    xmlHttpObj = CreateXmlHttpRequestObject();
    if (xmlHttpObj) {
        xmlHttpObj.open("GET", "http:// " + location.host + "/XmlHttpExample1/DataFile.xml", true);

        xmlHttpObj.onreadystatechange = function () {

            if (xmlHttpObj.readyState == READYSTATE_COMPLETE) {
                document.getElementById("divResults").innerHTML = xmlHttpObj.responseText;
            }
        }
        xmlHttpObj.send(null);
    }
}

This is an html fragment defining div element that will hold data:

<form id="form1" runat="server" method="post">
<div>
    <input type="button" onclick="MakeXMLHTTPCall();" value="Text XMLHTTP Call" />
    <br />
    <br />
    <div id="divResults">{no results}</div>
</div>
</form>

This is my CreateXmlHttpRequestObject() method:

function CreateXmlHttpRequestObject() {

    var xmlHttpObj;
    if (window.XMLHttpRequest){
            xmlHttpObj = new XMLHttpRequest();
    }
    else {
        try {
            xmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (e) {
            xmlHttpObj = new ActiveXObject("Msxml2.XMLHTTP");
        }
    }

    if (window.ActiveXObject) {
        try{
            xmlHttpObj = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(e){
            xmlHttpObj = new ActiveXObject("Msxml2.XMLHTTP");
        }
    }
    return xmlHttpObj;
}

var READYSTATE_UNINITILIZED = 0;
var READYSTATE_LOADING = 1;
var READYSTATE_LOADED = 2;
var READYSTATE_INTERACTIVE = 3;
var READYSTATE_COMPLETE = 4;

This is my xml file:

<?xml version="1.0" encoding="utf-8" ?>
<Customers>
  <Customer>
    <Firstname>John</Firstname>
    <Lastname>Doe</Lastname>
    <email>john.do@test.com</email>
  </Customer>
  <Customer>
    <Firstname>Alan</Firstname>
    <Lastname>Anonymous</Lastname>
    <email>anon@ymous.com</email>
  </Customer>
  <Customer>
    <Firstname>Marvin</Firstname>
    <Lastname>Martian</Lastname>
    <email>marvin@mars.com</email>
  </Customer>
</Customers>

I debugged the code. XMLHttpRequest object is created. The problem is, the data is not displayed.

What am I doing wrong? Any suggestions?

Answer 1

It sounds like you need to do a little debugging. There's multiple things, that can go wrong in this setup. So try to work through these steps, and determine how much of your code actually works. You will find the bug in step 3 :)

1. Check that the function MakeXMLHTTPCall() is actually called. place an alert(1); statement in the top of the function, and click the button. If you don't get a popup with the text '1', then this function isn't even called. This is most likely due to syntax errors somewhere in your javascript.
2. Now that you have determined, that MakeXMLHTTPCall() gets called, when you click the button, check your if-statement. Place alert(1); as the first thing in the if-statement. If this don't bring a popup, then your xmlHttpObj isn't created properly. So check your CreateXmlHttpRequestObject() to see that it's working correctly.
3. Check that the url you're fetching actually exists. And you will find, that you accidentally have a space misplaced. That is "http:// " should be "http://"

I hope you didn't mind I gave you the explanation of how I found the bug. It is very frustrating not to know how to debug the code.