Sunday, June 19, 2011

Reading REST from DOM

In our server REST web services return XML (eXtensible Markup Language). XML Maybe it is a little hard to understand, but XML does not DO anything. XML was created to structure, store, and transport information. So Here we also getting XML from our web services.

Here is example that I am getting when I request my inbox from  our REST ful web services

image

The XMLHttpRequest object is used to exchange data with a server (REST web services) behind the scenes.

The XMLHttpRequest object can:

  • Update a web page without reloading the page (getting new data to user site no reloading)
  • Request data from a server after the page has loaded (asking new emails from REST web services)
  • Receive data from a server after the page has loaded (User is in box new email receiving, no reloading )
  • Send data to a server in the background (boosting all our web features)

So it leads me to used XMLHttpRequest to my module also.

The XML DOM defines a standard way for accessing and manipulating XML documents.The XML DOM views an XML document as a tree-structure.All elements can be accessed through the DOM tree. XML DOM content (text and attributes) can be modified or deleted, and new elements can be created. The elements, their text, and their attributes are all known as nodes.Here are some common XMLHttpRequest Object Methods

Method    Description

abort()   

Stops the current request

getAllResponseHeaders() Returns complete set of headers (labels and values) as a string
getResponseHeader("headerLabel") Returns the string value of a single header label
open("method", "URL"[, asyncFlag[, "userName"[, "password"]]]) Assigns destination URL, method, and other optional attributes of a pending request
send(content) Transmits the request, optionally with postable string or DOM object data
setRequestHeader("label", "value") Assigns a label/value pair to the header to be sent with a request

All modern browsers have a built-in XML parser.An XML parser converts an XML document into an XML DOM object - which can then be manipulated with a JavaScript.The following code fragment parses an REST web services resturn my recently recive email in my Inbox (XML document) into an XML DOM object:

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST","http:localhost:8081/DBmail/Madhuka/INBOX1.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

XMLHttpRequest Object Properties

Once a request has been sent, scripts can look to several properties that all implementations have in common, shown in below Table and all properties are read-only.

image

because I did call the my above method in Java script so in browser console we will call the JS method and try  some XML http Request object properties

readyState :   Object status integer:
0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete

image

status is 4 it means complete

 

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

responseText    String version of data returned from server process

image


responseXML    DOM-compatible document object of data returned from server process

image


status    Numeric code returned by server, such as 404 for "Not Found" or 200 for "OK"


statusText    String message accompanying the status code

image

Now I think we have good idea on XMLHttpRequest object to get Inbox email list xml to local storage in HTML5.