（续二）Asynchronous JavaScript and XML (AJAX) with Java 2 Enterprise Edition

6. The XMLHttpRequest object calls the callback() function and processes the result.

The XMLHttpRequest object was configured to call the callback() function when there are changes to the readyState of the XMLHttpRequest object. Let us assume the call to the ValidationServlet was made and the readyState is "4" signifying the XMLHttpRequest call is complete. The HTTP status code of "200" signifies a successful HTTP interaction.

function callback() {
    if (req.readyState == 4) {
        if (req.status == 200) {
            // update the HTML DOM based on whether or not message is valid
        }
    }
}

Browsers maintain an object representation of the documents being displayed (referred to as the document object model (DOM)). JavaScript in an HTML page has access to the DOM and APIs are available that allow JavaScript to modify the DOM after the page has loaded.

Following a successful request, JavaScript code may modify the DOM of the HTML page. The object representation of the XML document that was retrieved from the ValidationServlet is available to JavaScript code using the req.responseXML where req is an XMLHttpRequest object. The DOM APIs provide a means for JavaScript to navigate the content from that document and use that content to modify the DOM of the HTML page. A string representation of the document that was retrieved by calling req.responseText. Now let us look at the how to use the DOM APIs in JavaScript by looking at the following XML document returned from the ValidateServlet.

 <message>
  valid
 </message>

The example above is a simple XML fragment that contains the sender of the message element which is simply the string "valid" or "invalid". A more advanced sample may contain more than one message and valid names that might be presented to the user.

function parseMessage() {
    var message = req.responseXML.getElementsByTagName("message")[0];
    setMessage(message.childNodes[0].nodeValue);
}

The parseMessages() function will process XML document retrieved from the ValidationServlet. This function will call the setMessage() with value of the message element to update the HTML DOM.

7. The HTML DOM is updated.

The XMLHttpRequest object was configured to call the callback() function when there are changes to the readyState of the XMLHttpRequest object. Let us assume the call to the ValidationServlet was made and the readyState is "4" signifying the XMLHttpRequest call is complete. The HTTP status code of "200" signifies a successful HTTP interaction.

function callback() {
    if (req.readyState == 4) {
        if (req.status == 200) {
            // update the HTML DOM based on whether or not message is valid
        }
    }
}

Browsers maintain an object representation of the documents being displayed (referred to as the document object model (DOM)). JavaScript in an HTML page has access to the DOM and APIs are available that allow JavaScript to modify the DOM after the page has loaded.

Following a successful request, JavaScript code may modify the DOM of the HTML page. The object representation of the XML document that was retrieved from the ValidationServlet is available to JavaScript code using the req.responseXML where req is an XMLHttpRequest object. The DOM APIs provide a means for JavaScript to navigate the content from that document and use that content to modify the DOM of the HTML page. A string representation of the document that was retrieved by calling req.responseText. Now let us look at the how to use the DOM APIs in JavaScript by looking at the following XML document returned from the ValidateServlet.

 <message>
  valid
 </message>

The example above is a simple XML fragment that contains the sender of the message element which is simply the string "valid" or "invalid". A more advanced sample may contain more than one message and valid names that might be presented to the user.

function parseMessage() {
    var message = req.responseXML.getElementsByTagName("message")[0];
    setMessage(message.childNodes[0].nodeValue);
}

The parseMessages() function will process XML document retrieved from the ValidationServlet. This function will call the setMessage() with value of the message element to update the HTML DOM.

7. The HTML DOM is updated.

JavaScript can gain a reference to any element in the HTML DOM using a number of APIs. The recommended way to gain a reference to a element is to call document.getElementById("userIdMessage") where "userIdMessage" is the id attribute of an element appearing in the HTML document. With a reference to the element JavaScript may now be used to may be modify attributes of the element, modify the style properties of element, or add or remove, modify child elements.

One common means to change the body content of an element is to set the innerHTML property on the element as can be seen in the following example.

<script type="text/javascript">
 function setMessage(message) {
     var userMessageElement = document.getElementById("userIdMessage");
     userMessageElement.innerHTML = "<font color=/"red/">" + message + " </font>";
 }
</script>
<body>
<div id="userIdMessage"></div>
</body>

The portions of the HTML page that were affected are re-rendered immediately following the setting of the innerHTML. If the innerHTML property contains elements such as <image> or <iframe> the content specificed by those elements is fetched and rendered as well.

The main drawback with this approach is that the HTML that is set as the body of the into the <div> element body will be hardcoded as string in the JavaScript including other markup like the <font> element. Intermixing presentation with JavaScript code as strings will make a page difficult read and edit.

Another means of modifying the HTML DOM is to dynamically create new elements and append them as children to a target element as can be seen in the following example.

<script type="text/javascript">
 function setMessage(message) {
     var userMessageElement = document.getElementById("userIdMessage");
     var userIdMessageFont = document.getElementById("userIdMessageFont");
     var messageElement = document.createTextNode(message);
     if (userMessageElement.childNodes[0]) {
         // update the elements
         userIdMessageFont.replaceChild(messageElement, userIdMessageFont.childNodes[0]);
     } else {
         // create the new elements
         var fontElement = document.createTextNode("font");
         fontElement.setAtribute("id", "userIdMessageFont");
         fontElement.setAtribute("color", "red");
         userMessageElement.appendChild(fontElement);
         fontElement.appendChild(messageElement);
     }
 }
</script>
<body>
 <div id="userIdMessage"></div>
</body>

The code sample above shows how JavaScript DOM APIs may be used to create an element or alter the element programatically. The JavaScript DOM APIs support in various browsers can differ so care needs to be taken when developing applications.