Let us first look at a typical XML file filled with data. The file has a list of Books, put together using XML attributes, tags and nested tags.
Note: The tags are case sensitive and you should use it carefully in your program.
The XML File
You can open library.xml file to view it. Copy the contents of the file and save it in your computer and name it as library.xml, because we are using the same file name in our example. You can change the name of the file according to your choice later.
Extract Data from XML
We want to display data in a tabular format with couple of columns. The columns will show the Bookname and Category respectively.
To show data in tabular formats (i.e. in two columns), we need to use two more DIV elements inside the main DIV, which serves as a container. We will use CSS to place both the DIV elements side-by-side.
Once the web page has loaded, it will make an XML request using https, which means it is asking for an XML file. We are using the XMLHttpRequest object and other members to make this request.
Sets or retrieves the event handler for asynchronous requests. onreadystatechange property was first introduced in IE 7.
This readyState property will define the current state of request operation or the request made by XMLHttpRequest object.
Values of readyState Property
Uninitialized. Not yet initialized, but an object is created.
The request has been setup. The object is created, send method not yet called.
We have sent a request.
The sent request is still in process.
The request is complete and ready to process further.
The open() Method
We must initialize the XMLHttpRequest object through the “open” method. This method takes five parameters. However, we have used three parameters in our example.
open ( Method, URL, Asynchronous, UserName, Password )
We suggest you read more about the open() method here.
The send() Method
Call this method to send an https request. The “send” method accepts only one parameter called the data, and we are not using it.
send ( data )
XMLHttpRequest object with AJAX has made web developing a boon for developers and at the same time benefited the users due to the Asynchronous processing capabilities of data, which is quick. Though the name suggests XML, we can use this object and its properties to extract data from other sources like HTML or plain text.