This is a prototype of a project done on a client website.
Our client often organized events and wanted an easy way to update the speaker list so that it can be displayed on the homepage. We decided to have the list of speakers in an XML file.
Using Ajax, I parsed the XML and displayed the list of speakers onto the HTML page as an unordered list.
The page DOM was created from the XML using javascript.
About AJAX
- AJAX stands for Asynchronous Javascript and XML.
- This means the client can request new pieces of information from the server any time without loading the entire page. The new request can be triggered by an event on the browser such as clicking on a button, hovering on an image, etc.
- Javascript handles the events, creating new requests, etc. and also takes care of updating the part of the document that needs to be changed.
- Javascript talks to the server using APIs called XHR-XML HTTP Request.
- Data transferred from the server to the client using XHR can be a text file, HTML file, or JSON object.
A sample of the XML file with the speaker list.
<speakers>
<speaker>
<name>Barot Bellingham</name>
<shortname>Barot_Bellingham</shortname>
<reknown>Royal Academy of Painting and Sculpture</reknown>
<bio>Barot has just finished his final year at The Royal Academy of Painting and Sculpture, where he excelled in glass etching paintings and portraiture. Hailed as one of the most diverse artists of his generation, Barot is equally as skilled with watercolors as he is with oils, and is just as well-balanced in different subject areas. Barot's collection entitled \"The Un-Collection\" will adorn the walls of Gilbert Hall, depicting his range of skills and sensibilities - all of them, uniquely Barot, yet undeniably different</bio>
</speaker>
<speaker>
<name>Jonathan G. Ferrar II</name>
<shortname>Jonathan_Ferrar</shortname>
<reknown>Artist to Watch in 2012</reknown>
<bio>The Artist to Watch in 2012 by the London Review, Johnathan has already sold one of the highest priced-commissions paid to an art student, ever on record. The piece, entitled Gratitude Resort, a work in oil and mixed media, was sold for $750,000 and Jonathan donated all the proceeds to Art for Peace, an organization that provides college art scholarships for creative children in developing nations</bio>
</speaker>
</speakers>The html on the page
<div id="update"></div>javascript code snippet to parse the xml and build the web page
/* Supporting Older IE Browsers */
var request;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}
else {
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.open('GET', 'data.xml');
request.onreadystatechange = function(){
if((request.readyState === 4) && (request.status === 200)){
var items = request.responseXML.getElementsByTagName('name');
var output = "<ul>";
for (i=0; i&=> items.length ; i++){
output += "<li>" + items[i].firstChild.nodeValue + "</li>";
}
output += "</ul>";
document.getElementById("update").innerHTML = output;
}
};
request.send();I hope you found this article useful and interesting.