Dirk Harriman Banner Image

 

Notes Javascript - AJAX & XML Samples


 

 

In this example the XML is rather simple. It only has one phone number per entry and none of the elements have any attributes.

XML

<?xml version="1.0" encoding="utf-8"?> <PhoneBook> <PhoneEntry> <Name>Gurn Blanston</Name> <Number>(808) 555-2343</Number> </PhoneEntry> <PhoneEntry> <Name>Herman Eddie</Name> <Number>(949) 555-4445</Number> </PhoneEntry> <PhoneEntry> <Name>Anne Umelmahay</Name> <Number>(949) 555-5544</Number> </PhoneEntry> <PhoneEntry> <Name>Biggus Diggus</Name> <Number>(415) 555-6576</Number> </PhoneEntry> <PhoneEntry> <Name>Fred Garvin</Name> <Number>(650) 555-7878</Number> </PhoneEntry> </PhoneBook>

jQuery

function getXmlPhone1() { $.ajax({ method: "GET", url: "phone_book.xml", dataType: "xml" , }) .done(function(msg){ ProcessResponse1(msg); }) } function ProcessResponse1(respText) { var divResult = document.getElementById("results1"); var resultText = ""; $(respText).find('PhoneEntry').each(function() { resultText += "<br/>"+ $(this).find('Name').text(); resultText += " - "+ $(this).find('Number').text(); }); divResult.innerHTML = resultText; }

Simple Phone List XML
 

Response


 

In this example the XML is a bit more complex. It has multiple phone numbers per entry and each number has a number-type attribute.

XML

<?xml version="1.0" encoding="utf-8"?> <PhoneBook> <PhoneEntry> <Name>Gurn Blanston</Name> <Number number-type="Cell">(808) 555-2343</Number> <Number number-type="Home">(808) 555-2266</Number> <Number number-type="Work">(808) 555-0956</Number> </PhoneEntry> <PhoneEntry> <Name>Herman Eddie</Name> <Number number-type="Cell">(949) 555-4445</Number> </PhoneEntry> <PhoneEntry> <Name>Anne Umelmahay</Name> <Number number-type="Cell">(949) 555-5544</Number> <Number number-type="Home">(949) 555-8230</Number> <Number number-type="Work">(949) 555-6453</Number> </PhoneEntry> <PhoneEntry> <Name>Biggus Diggus</Name> <Number number-type="Home">(415) 555-6576</Number> <Number number-type="Work">(415) 555-5207</Number> </PhoneEntry> <PhoneEntry> <Name>Fred Garvin</Name> <Number number-type="Cell">(650) 555-7878</Number> <Number number-type="Work">(650) 555-8563</Number> </PhoneEntry> </PhoneBook>

jQuery

function getXmlPhone2() { $.ajax({ method: "GET", url: "phone_book_2.xml", dataType: "xml" , }) .done(function(msg){ ProcessResponse2(msg); }) } function ProcessResponse2(respText) { var divResult = document.getElementById("results2"); var resultText = ""; $(respText).find('PhoneEntry').each(function() { resultText += "<br/>"+ $(this).find('Name').text() +"<br/>"; $(this).find('Number').each(function(){ resultText += $(this).attr('number-type') +" - "+ $(this).text() +"<br/>"; }); }); divResult.innerHTML = resultText; }

Multi-Number Phone List XML
 

Response


 

XML

<?xml version="1.0" standalone="yes"?> <SongTabs> <SongTab> <SongTitle>So. Central Rain</SongTitle> <SongArtist>R.E.M.</SongArtist> <SongAuthor>R.E.M.</SongAuthor> <DataMask>4</DataMask> <SongYear>1984</SongYear> <SongKey>6</SongKey> <SongCapo>0</SongCapo> <SongData><![CDATA[ SONG TEXT HERE ]]></SongData> </SongTab> ... </SongTabs>

jQuery

function getXmlMusicTabs1() { $.ajax({ method: "GET", url: "music_tabs.xml", dataType: "xml" , }) .done(function(msg){ ProcessResponse3(msg); }) } function ProcessResponse3(respText) { var divResult = document.getElementById("results3"); var resultText = ""; $(respText).find('SongTab').each(function() { resultText += "<br/>"+ $(this).find('SongTitle').text() +" - "+ $(this).find('SongArtist').text() +"<br/>"; resultText += "<div class='song-text'>"+ $(this).find('SongData').text() +"</div>"; }); divResult.innerHTML = resultText; }

AJAX XML Music Tabs
 

Response