Under some conditions, some browsers cache the results of multiple XMLHttpRequest requests to the same URL. This can cause undesirable results if the response could be different for each request. Appending the current timestamp to the end of the URL ensures the uniqueness of the URL and thus prevents browsers from caching the results.
Sending Request Parameters As XML
Compatibility of JavaScript amongst today’s modern browsers is light years ahead of where it was even a few years ago. Combined with the increasing sophistication of JavaScript develop- ment tools and techniques, you may decide to begin using the Web browser as a development platform. Instead of merely relying on the browser to serve as the View in the Model-View- Controller pattern, you may decide to implement part of the business model in JavaScript. You can use Ajax techniques to persist changes in the model to the backend server. If the model is kept on the browser, then changes to the model can be communicated to the server en masse, reducing the number of remote calls made to the server and possibly increasing performance.
A simple query string consisting of name/value pairs is probably not robust enough to communicate a large number of possibly complex model changes to the server. A better solu- tion might be to send changes to the model as XML to the server. How can you send XML to the server?
You can send XML to the server as part of the request body, much like the query string is sent as part of the request body during a POSTrequest. The server can read XML from the request body and work with it from there.
The following example demonstrates how you can send XML to the server during an Ajax request. Figure 3-5 shows the page, which is a simple select box in which the user selects the types of pets the user has. It’s a simplistic example, but it shows how you can send XML to the server.
Listing 3-9 shows postingXML.html.
Listing 3-9.postingXML.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sending an XML Request</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest() { if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest();
} }
function createXML() { var xml = "<pets>";
Figure 3-5.The items selected in the select box are sent to the server as XML.
var options = document.getElementById("petTypes").childNodes;
var option = null;
for(var i = 0; i < options.length; i++) { option = options[i];
if(option.selected) {
xml = xml + "<type>" + option.value + "<\/type>";
} }
xml = xml + "<\/pets>";
return xml;
}
function sendPetTypes() { createXMLHttpRequest();
var xml = createXML();
var url = "PostingXMLExample?timeStamp=" + new Date().getTime();
xmlHttp.open("POST", url, true);
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
xmlHttp.send(xml);
}
function handleStateChange() { if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) { parseResults();
} } }
function parseResults() {
var responseDiv = document.getElementById("serverResponse");
if(responseDiv.hasChildNodes()) {
responseDiv.removeChild(responseDiv.childNodes[0]);
}
var responseText = document.createTextNode(xmlHttp.responseText);
responseDiv.appendChild(responseText);
}
</script>
</head>
<body>
<h1>Select the types of pets in your home:</h1>
<form action="#">
<select id="petTypes" size="6" multiple="true">
<option value="cats">Cats</option>
<option value="dogs">Dogs</option>
<option value="fish">Fish</option>
<option value="birds">Birds</option>
<option value="hamsters">Hamsters</option>
<option value="rabbits">Rabbits</option>
</select>
<br/><br/>
<input type="button" value="Submit Pets" onclick="sendPetTypes();"/>
</form>
<h2>Server Response:</h2>
<div id="serverResponse"></div>
</body>
</html>
This example works much the same as the earlier POSTexample. The difference is that instead of a query string composed of name/value pairs being sent, an XML string is sent to the server.
Clicking the Submit Pets button on the form invokes the sendPetTypesfunction. Like pre- vious examples, this function first creates an instance of the XMLHttpRequest object. It then calls a helper function named createXMLthat builds the XML string of the selected pet types.
The function createXMLretrieves a reference to the selectelement using the
document.getElementbyIdmethod. It then iterates over all its child optionelements and for each selected option creates the XML tag for the selected pet type and appends it to the rest of the XML. At the end of the iteration, the closing petstag is appended to the XML string before it’s returned to the calling function.
Once it has obtained the XML string, the sendPetTypesfunction continues by preparing XMLHttpObject for the request and then sends the XML to the server by specifying the XML string as the parameter to the send()method.