elvis2121的博客

    if (req.readyState == 4) { // Complete

      if (req.status == 200) { // OK response

        // We're going to get a list of all tags in the returned XML with the

        // names title, link and description.  Everything else is ignored.

        // For each that we find, we'll constuct a simple bit of HTML for

        // it and build up the HTML to display.  When we hit a title,

        // link or description element that isn't there, we're done.

        xml = req.responseXML;

        i = 0;

        html = "";

        while (i >= 0) {

          t = xml.getElementsByTagName("title")[i];

          l = xml.getElementsByTagName("link")[i];

          d = xml.getElementsByTagName("description")[i];

          if (t != null && l != null && d != null) {

            t = t.firstChild.data;

            l = l.firstChild.data;

            d = d.firstChild.data;

            html += "<a href=\"" + l + "\">" + t + "</a><br>" + d + "<br><br>";

            i++;

          } else {

            i = -1;

          }

        }

        document.getElementById("rssData").innerHTML = html;

      } else {

        alert("Problem: " + req.statusText);

      }

    }

  }

You will of course want to perform some branching logic in your code.  There are a couple of ways to do it, but I prefer a simple approach, which to me is just an object existence check:

var req;

if (window.XMLHttpRequest) { // Non-IE browsers

  req = new XMLHttpRequest();

} else if (window.ActiveXObject) { // IE

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

}

However you choose to do it, after this code executes you will find that the variable req is now a reference to an XMLHttpRequest object.  This object has a number of properties and methods, which are summarized below:

Property                                  Description

onreadystatechange                  Event handler for an event that fires at every state change

readyState                                Status:

0 = uninitialized

1 = loading

2 = loaded

3 = interactive

4 = complete

responseText                            Data returned from server in string form

responseXML                          DOM-compatible document object of data returned

status                                        HTTP status code (i.e., 200, 404, 500, etc.)

statusText                                 String message associated with the status code

Method                                   Description

abort()                                      Stops the current request

getAllResponseHeaders()         Returns all headers (name and value) as a string

getResponseHeader(                Returns the value of the specified header

"<headerName>")

open("", "URL"[,       Opens a connection and retrieves response from the specified URL.

asyncFlag[, ""[,      Can also specify optional values method (GET/POST), username and

"<password>"]]])                     password for secured sites

 send(content)                           Transmits request (can include postable string or DOM object data)

setRequestHeader                    Assigns values to the specifed header

("<name>", "")

Before we go any further I highly suggest checking out the webapp referenced at the end of this article.  If you haven’t already done so, download the sample webapp at the URL referenced at the end of this article.  Install it into your servlet container of choice.  It is supplied in exploded format, so just copying the directory created when unzipping it should work.  For instance, if you are using Tomcat, simply copy the xhrstruts directory into \webapps.  That should be all you need to do.  Start up your app server and give it a shot!

Access the application using http://localhost:8080/xhrstruts (replacing 8080 with whatever port your app server is listening on).  This sample shows a number of different usage situations including a sortable table, a dropdown changing the contents of another as described above, and an RSS feed parser.  This example is Struts-based, as the title of this article implies!  Although Ajax can be used completely independent of Struts, or any other back-end technology, I generally work in Java, and with Struts, hence my choice.

All of the examples in the webapp work with a chunk of script in the of the document.  Although each version has some minor differences, the all come from the same basic code.  Here it is:

  var req;

  var which;

  function retrieveURL(url) {

    if (window.XMLHttpRequest) { // Non-IE browsers

      req = new XMLHttpRequest();

      req.onreadystatechange = processStateChange;

      try {

        req.open("GET", url, true);

      } catch (e) {

        alert(e);

      }

      req.send(null);

    } else if (window.ActiveXObject) { // IE

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

      if (req) {

        req.onreadystatechange = processStateChange;

//This line of code is setting up an event handler.  When the state of

//the request changes, the processStateChange() function will be called. 

        req.open("GET", url, true);

        req.send();

      }

    }

  }

  function processStateChange() {

    if (req.readyState == 4) { // Complete

      if (req.status == 200) { // OK response

        document.getElementById("urlContent").innerHTML = req.responseText;

      } else {

        alert("Problem: " + req.statusText);

      }

    }

  }