Help with parsing XML with javascript?_问答_开发者

I am trying to use Java-script as a client for java based restful web-service. The service is a survey maker. I am having trouble getting the function to work. The server side of the service is in Google App Engine. In the code below the function uses http get to get xml representing a list of surveynames, then gets the data from the xml and puts it in a html table. The code is not working, so it would be great if some one could check it to see if I am doing this correctly or I am doing something wrong. I have never programed in javascript so I would also like to know if I need to import a library to use AJAX or is it supported by the browser?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>View Surveys</title>
</head>
<SCRIPT>
function getSurveyNames(){

    var url = "http://survey-creator.appspot.com/rest/surveymakerpro/allsurveys";
    var xmlhttp;
    // AJAX code for Mozilla, Safari, Opera etc.
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = xmlhttpChange;
        xmlhttp.open("GET", url, true);
        xmlhttp.send(null);
    }
    // AJAX code for IE
    else 
        if (window.ActiveXObject) {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            if (xmlhttp) {
                xmlhttp.onreadystatechange = xmlhttpChange;
                xmlhttp.open("GET", url, true);
                xmlhttp.send(null);
            }
        }
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

        HTMLSurveyNames = "<table border='1'><tr>Survey Names<th></th></tr>";

        var surveyNames = xmlhttp.responseXML.documentElement.getElementsByTagName("surveys")[0];


        for(var i = 0; i < surveyNames.length ;i++){

            var surveyNameChildNode = surveyName[i].childNodes[0];
            var name = surveyNameChildNode.nodeValue;

            HTMLSurveyNames += "<tr><td>"+name+"</td></tr>";
        }
        //div tags
        document.getElementById('displayNames').innerHTML = HTMLSurveyNames;

    }
}
</SCRIPT>
<body>

<p>View Survey</p>
<form method="post">
    <input name="GetSurveys" style="width: 103px" type="button" value="View all surveys" onClick=getSurveyNames(); /></form>
<p>Here Goes a Table of Surveys</p>
<div id="displayNames">

    <p>En开发者_运维百科ter the survey you wish to take:</p>
    <form method="post">
        <input id="surveyName" name="SurveyName" style="width: 140px" type="text" value="Enter Survey Name...." /></form>
    <form method="post">
        <input name="Submit2" type="submit" value="Get Survey" /></form>
    <div id="displaySurvey"></div>

</div>
<p>
        <input id="sendtoserver" name="Submit3" type="submit" value="Submit TakenSurvey" /></p>

</body>

</html>

This is the xml I want to parse

<?xml version="1.0" encoding="UTF-8" standalone="yes"?><surveyNames><SurveyList><surveys>DragonBallZ</surveys><surveys>FootballSurvey</surveys><surveys>NewsSurvey</surveys><surveys>PennstateSurvey</surveys></SurveyList></surveyNames>

You're sending off an asynchronous request, but then attempting to immediately process the result before this request will have finished.
You should assign a handler to xmlhttp.onreadystatechange that will be executed as your request progresses. You currently assign xmlhttpChange to this property, but you don't show what xmlhttpChange is. You should be doing something like this:
```
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        // XML parsing code goes here
    }
}
```
You do not need to import any libraries to use Ajax
Be careful with lines like HTMLSurveyNames = "<table border='1'><tr>Survey Names<th></th></tr>"; You should always use the var keyword when declaring variables, to avoid creating/modifying globals implicitly.

"<table border='1'><tr>Survey Names<th></th></tr>"

should be

"<table border='1'><tr><th>Survey Names</th></tr>"

things will work a LOT better.

there is a cross-browser XML librari for javascript at http://www.softxml.com/softxmllib/softxmllib.htm I believe XMLHTTPRequest() is specific to IE. there are versions for other browsers. http://en.wikipedia.org/wiki/XMLHttpRequest