In listing 6 status property XMLHttpRequest is used to see, whether the search successfully has ended. status contains a HTTP-code of the status in the answer of the server. When performance simple GET is required and POST-methods, you can assume, that any code which is distinct from 200 (OK), - a mistake. If the server sends the redirected search (for example, 301 or 302), the browser is naturally reoriented and will find a source in a new place, XMLHttpRequest does not see the redirected code of the status. Also browsers automatically add Cache-Control: no-cache heading to all XMLHttpRequest, therefore the code of the client never has affairs and with 304 (unmodified) answer of the server.
ABOUT getReadyStateHandler ()
getReadyStateHandler () - rather complex{difficult} piece of a code, it is especial if you did not know JavaScript earlier. But on the other hand advantage that with the help of inclusion of this function in your library JavaScript you can easy process Ajax-searches of the server without job with data XMLHttpRequest. It is important also, that you understand how to use getReadyStateHandler () in your own code.
In listing 3 you saw getReadyStateHandler (), called so: handlerFunction = getReadyStateHandler (req, updateCart). The function returned with the help getReadyStateHandler (), in this case will check up, whether is executed XMLHttpRequest in a variable req and then will call the function which is were called updateCart, with the help of search in format XML.
The given baskets
Listing 7 - actually @ code updateCart (). Function requests the XML-document of a basket of the buyer, using DOM-calls and updating Web-page (see listing 1) to show new elements of contents of a new basket. Pay here attention to the calls, used to get the data from XML DOM. The attribute generated an element cart, created when Cart was serializovan in format XML, is checked to make sure, that newer given baskets are not rewritten by older data. Ajax-searches are inherently asynchronous, therefore this check protects against answers of the server which arrive in the disorder.
Listing 7. Updating of page with display XML of the document of a basket
function updateCart (cartXML) {
// To receive root *quot; cart*quot; an element from the document
var cart = cartXML.getElementsByTagName ("cart") [0];
// We shall check up, that earlier document of a basket has not been processed still
var generated = cart.getAttribute ("generated");
if (generated> lastCartUpdate) {
lastCartUpdate = generated;
// We shall clear list HTML necessary for display of contents of a basket
var contents = document.getElementById ("cart-contents");
contents.innerHTML = " ";
// We connect products in a basket
var items = cart.getElementsByTagName ("item");
for (var I = 0; I <items.length; I ++) {
var item = items [I];
// We get key concepts from a name and elements of quantity{amount}
var name = item.getElementsByTagName ("name") [0]
.firstChild.nodeValue;
var quantity = item.getElementsByTagName ("quantity") [0]
.firstChild.nodeValue;
// We create and add the list of products, HTML an element for this product
var li = document.createElement ("li");
li.appendChild (document.createTextNode (name + "x" +quantity));
contents.appendChild (Li);
}
}
// We update total in a basket, using value from the document of a basket
document.getElementById ("total") .innerHTML =
cart.getAttribute ("total");
}
After that we have done, travel in Ajax is finished, though you could want to receive Web-applications and to see them in operation (look section Loading). The example is very simple, many lines in him still can be improved. For example, I have switched on a code of the server to clean{remove} products from a basket, but have not made access to them of the interface. For you good exercise will try to construct in the application of an existing JavaScript-code the given functionality.
|