Description
The AJAX has the advantage to collaborate with XML. The
XML is a markup dialect that characterizes an arrangement of standards for encoding archives in an organization that is both comprehensible and machine-coherent. The W3C's XML 1.0 Specification and a few other related determinations are free open principles—characterize XML.
The objectives of XML underline ease of use over the Internet. It is a printed information organize with solid support by means of Unicode for various human dialects. In spite of the fact that the structure of XML spotlights on records, the dialect is broadly utilized for the representation of subjective information structures, for example, those utilized as a part of web services. Example
Before going to see an example it's better to know about the XMLHttpRequest. The 
XMLHttpRequest is an API whose techniques exchange information between a web program and a web server. The object is given by the program’s JavaScript surroundings. Especially, recovery of information from XHR with the end goal of consistently adjusting a stacked site page is the basic idea of Ajax outline. Regardless of the name, XHR can be utilized with conventions other than HTTP and information can be as not just XML, but likewise JSON, HTML or plain content. The following is the XML file which gonna used in the example.
splessons_catalog.xml
[xml]
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Greatest Hits</TITLE>
<ARTIST>Dolly Parton</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>RCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1982</YEAR>
</CD>
<CD>
<TITLE>Still got the blues</TITLE>
<ARTIST>Gary Moore</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Virgin records</COMPANY>
<PRICE>10.20</PRICE>
<YEAR>1990</YEAR>
</CD>
</CATALOG>
[/xml]
The following is an actual AJAX file.
[html]
<!DOCTYPE html>
<html>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
}
</style>
<body bgcolor="skyblue">
<h1>Welcome To Splessons</h1>
<button type="button" onclick="loadDoc()">Get Splessons info</button>
<br>
<br>
<table id="splessons2"></table>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "cd_catalog.xml", true);
xhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table = "<tr><th>Artist</th><th>Title</th></tr>";
var x = xmlDoc.getElementsByTagName("CD");
for (i = 0; i < x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
</script>
</body>
</html>
[/html]
The loadDoc() sets an object for XMLHttpRequest, blends the capacity that to be executed when the server response is arranged and sends the demand to the server. Right when the server response is readied, an HTML table is created, centers are removed from the XML archive, and it finally upgrades the part demo with the HTML table stacked with XML data.
The readystate essentially implies that the demand has got done with preparing. 200 is the HTTP status for OK.
The getElementById() strategy gives back the component that has the ID quality with the predetermined esteem. This strategy is a standout amongst the most widely recognized strategies in the HTML DOM and is utilized practically every time user need to control, or get information from, a component on the archive.
Output: Now aggregate the code result will be as per the following.
Key Points
- The XML stands for
Extensible Markup Language. - The XML document will consist of string of characters
- The XMLHttpRequest object will be creatd by
loadDoc()function.