XML and AJAX Lecture 28 Robb T. Koether Hampden-Sydney College Wed, Mar 28, 2012 Robb T. Koether (Hampden-Sydney College) XML and AJAXLecture 28 Wed, Mar 28, 2012 1 / 29
1 Navigating the XML Tree 2 The getelementsbytagname() Method 3 Creating an HTML Page 4 A Photo Album Robb T. Koether (Hampden-Sydney College) XML and AJAXLecture 28 Wed, Mar 28, 2012 2 / 29
Outline 1 Navigating the XML Tree 2 The getelementsbytagname() Method 3 Creating an HTML Page 4 A Photo Album Robb T. Koether (Hampden-Sydney College) XML and AJAXLecture 28 Wed, Mar 28, 2012 3 / 29
The XML Tree Structure Recall from AJAX that an XMLHttpRequest object has a data member responsexml. This data member represents the contents of the XML file, stored as a tree structure. Using various member functions and data members, we are able to navigate that tree. Robb T. Koether (Hampden-Sydney College) XML and AJAXLecture 28 Wed, Mar 28, 2012 4 / 29
The XML Document The XML Document xml_doc = xmlhttp.responsexml; alert(xml_doc); We begin with the XML document itself. Robb T. Koether (Hampden-Sydney College) XML and AJAXLecture 28 Wed, Mar 28, 2012 5 / 29
The XML Document The XML Document root_elem = xml_doc.documentelement. alert(root_elem); alert(root_elem.nodename); Then we navigate to the document (root) element. It is a library node. Robb T. Koether (Hampden-Sydney College) XML and AJAXLecture 28 Wed, Mar 28, 2012 6 / 29
The XML Document Child Nodes root_child = root_elem.childnodes; alert(root_child); The root element has several children. root_child is a list of nodes. Robb T. Koether (Hampden-Sydney College) XML and AJAXLecture 28 Wed, Mar 28, 2012 7 / 29
The XML Document Child Nodes alert(root_child[0]); alert(root_child[1]); alert(root_child[2]); alert(root_child[3]); The node list is indexed. Each list element is a child of the node. XML allows that there may be text between any two elements. This is unfortunate. Robb T. Koether (Hampden-Sydney College) XML and AJAXLecture 28 Wed, Mar 28, 2012 8 / 29
The XML Document Navigating the XML Tree books_elem = root_child[1]; alert(books_elem); alert(books_elem.nodename); Let us navigate the books element. Robb T. Koether (Hampden-Sydney College) XML and AJAXLecture 28 Wed, Mar 28, 2012 9 / 29
The XML Document Navigating the XML Tree books_child = books_elem.childnodes; alert(books_child); alert(books_child[0]); alert(books_child[1]); alert(books_child[2]); alert(books_child[3]); The books element has several children. Again, we will ignore the text (null strings) in between the XML elements. Robb T. Koether (Hampden-Sydney College) XML and AJAXLecture 28 Wed, Mar 28, 2012 10 / 29
The XML Document Navigating the XML Tree book_elem = books_elem[1]; alert(book_elem); alert(book_elem.nodename); Let us navigate the book element. Robb T. Koether (Hampden-Sydney College) XML and AJAXLecture 28 Wed, Mar 28, 2012 11 / 29
The XML Document Navigating the XML Tree title_elem = book_elem.childnodes[1]; title = title_elem.childnodes[0]; alert("title = " + title.nodevalue); By now we get the pattern. Each element has children. Odd-numbered are the child elements. Even-numbered children are the text (if any) between the elements. Robb T. Koether (Hampden-Sydney College) XML and AJAXLecture 28 Wed, Mar 28, 2012 12 / 29
Outline 1 Navigating the XML Tree 2 The getelementsbytagname() Method 3 Creating an HTML Page 4 A Photo Album Robb T. Koether (Hampden-Sydney College) XML and AJAXLecture 28 Wed, Mar 28, 2012 13 / 29
The getelementsbytagname() Method The getelementsbytagname() Method getelementsbytagname(tag_name); getelementsbytagname() - Returns an indexed list of subtrees, the roots of which are the elements of the specified tag name. Robb T. Koether (Hampden-Sydney College) XML and AJAXLecture 28 Wed, Mar 28, 2012 14 / 29
The getelementsbytagname() Method Find the Book Titles var xml_doc = xmlhttp.responsexml; var title_list = xml_doc.getelementsbytagname("title"); for (var i = 1; i < title_list.length; i++) alert("title = " + title_list.childnodes[0].nodevalue); For example, consider an XML file shown above. Robb T. Koether (Hampden-Sydney College) XML and AJAXLecture 28 Wed, Mar 28, 2012 15 / 29
The getelementsbytagname() Member Function Accessing the Tree xmldoc = xmlhttp.responsexml; author_list = xmlhttp.getelementsbytagname("authors"); The code above will return the entire tree structure It is structured as a single (root) node <authors> with various children. Robb T. Koether (Hampden-Sydney College) XML and AJAXLecture 28 Wed, Mar 28, 2012 16 / 29
Photo Album Example We may use an XML file and Javascript to create an HTML photo album where we can navigate forwards and backwards through the photos. Information about the photos will be stored in an XML file. The Javascript will use AJAX to read that information and then create the HTML needed to present the photo. Robb T. Koether (Hampden-Sydney College) XML and AJAXLecture 28 Wed, Mar 28, 2012 17 / 29
Outline 1 Navigating the XML Tree 2 The getelementsbytagname() Method 3 Creating an HTML Page 4 A Photo Album Robb T. Koether (Hampden-Sydney College) XML and AJAXLecture 28 Wed, Mar 28, 2012 18 / 29
Creating an HTML Page We may read the data from the library XML file and create an HTML table of titles and authors. Robb T. Koether (Hampden-Sydney College) XML and AJAXLecture 28 Wed, Mar 28, 2012 19 / 29
Creating an HTML Page The table Element var table = "<table border= 1 cellpadding= 5 >" + "<tr><th>title</th><th>author(s)</th></tr>"; Create a (string) variable table to store the HTML code. Initialize it to the HTML code that begins the table. Robb T. Koether (Hampden-Sydney College) XML and AJAXLecture 28 Wed, Mar 28, 2012 20 / 29
Creating an HTML Page The List of Books var xml_doc = xmlhttp.responsexml; var book_list = xml_doc.getelementsbytagname("book"); Get the XML structure. Select the book elements. Robb T. Koether (Hampden-Sydney College) XML and AJAXLecture 28 Wed, Mar 28, 2012 21 / 29
Creating an HTML Page The Book Titles for (var i = 0; i < book_list.length; i++) { var title = book_list[i].getelementsbytagname("title")[0].childnodes[0].nodevalue; table += "<tr><td>" + title + "</td>"; : } Process each book element. Get the book s title and add it as a table data (td) element. Robb T. Koether (Hampden-Sydney College) XML and AJAXLecture 28 Wed, Mar 28, 2012 22 / 29
Creating an HTML Page The List of Authors var author_list = book_list[i].getelementsbytagname("author"); var name = "<td>"; for (var j = 0; j < author_list.length; j++) { : } table += name + "</td></tr>"; Get the list of author elements for the i-th book. Add a table data element for each author. Create a (string) variable name to hold the author(s) name(s). Robb T. Koether (Hampden-Sydney College) XML and AJAXLecture 28 Wed, Mar 28, 2012 23 / 29
Creating an HTML Page The Author s First Name var fname_elem = author_list[j].getelementsbytagname("fname")[0]; if (fname_elem!= null) { fname = fname_elem.childnodes[0].nodevalue; name += fname + " "; } Get the author s first name, if he has one, and add it to name. Robb T. Koether (Hampden-Sydney College) XML and AJAXLecture 28 Wed, Mar 28, 2012 24 / 29
Creating an HTML Page The Author s Middle and Last Names var mname_elem = author_list[j].getelementsbytagname("mname")[0]; if (mname_elem!= null) { mname = mname_elem.childnodes[0].nodevalue; name += mname + " "; } var lname_elem = author_list[j].getelementsbytagname("lname")[0]; lname = lname_elem.childnodes[0].nodevalue; name += lname + "<br/>"; In the same way, add the middle name, if there is one, and add the last name. Finish with a line break in case there are more authors. Robb T. Koether (Hampden-Sydney College) XML and AJAXLecture 28 Wed, Mar 28, 2012 25 / 29
Creating an HTML Page Insert the Table into the Web Page table += "</table>"; $("table").innerhtml = table; Complete the table element. Insert it into the web page. Robb T. Koether (Hampden-Sydney College) XML and AJAXLecture 28 Wed, Mar 28, 2012 26 / 29
Outline 1 Navigating the XML Tree 2 The getelementsbytagname() Method 3 Creating an HTML Page 4 A Photo Album Robb T. Koether (Hampden-Sydney College) XML and AJAXLecture 28 Wed, Mar 28, 2012 27 / 29
Photo Album Example The Structure of album.xml <album> <title>title</title> <bgcolor>background_color</bgcolor> <textcolor>text_color</textcolor> <folder>path_to_photos</folder> <photos> <photo> <file>file_name</file> <width>width</width> <height>height</height> <caption>caption</caption> </photo>. </photos> </album> Robb T. Koether (Hampden-Sydney College) XML and AJAXLecture 28 Wed, Mar 28, 2012 28 / 29
Photo Album Example Use HTML, Javascript, and AJAX to create a web page of the photos. Robb T. Koether (Hampden-Sydney College) XML and AJAXLecture 28 Wed, Mar 28, 2012 29 / 29