- Basic jQuery Syntax Usage
- jQuery Core Capabilities
- Extending jQuery to Create Tabs
- Using Ajax to Fetch XML Data
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Using Ajax to Fetch XML Data
The final thing I wanted my application to do (for the sake of demonstrating jQuery) is to perform an Ajax request to fetch some XML data that will be used to populate an HTML table. The process starts in the setup function, when it calls the startAjax() function. That function is just this:
function startAjax() {
$.ajax({
type: 'get',
url: 'assets/data.xml',
dataType: 'xml',
success: populateTable
});
}
Here, jQuery's ajax() method is called without applying it specifically to any element. This method takes name-value pairs as its argument (there are more available than just those listed here). For this AIR application, the request is being made of an XML file found in the assets folder. The data type expected in return is XML. Upon successful completion of the Ajax request, the populateTable() function should be called (omit the parentheses when naming the function in the Ajax call parameters).
That's all there is to it! The jQuery framework will make the request at this point.
The populateTable() function is defined so that it takes two arguments: the returned XML data and a status message.
function populateTable(xml, status) {...
The XML data contains a number of records in this format:
<person>
<firstName>Jane</firstName>
<lastName>Doe</lastName>
</person>
To navigate through the XML, apply jQuery's find() method, looking for each person element:
$(xml).find('person').each(function(){...
For each found person, the following anonymous function will be executed. Within it, the first and last name values must be excised. This can also be done by applying the find() method to the current person, represented by $(this) within the anonymous function:
$(this).find('firstName')
That will return the element with a name of firstName. To find the value of that element, apply text():
var fn = $(this).find('firstName').text();
var ln = $(this).find('lastName').text();
These two lines also show how you can chain method calls together in jQuery. Each line does four things:
- References the current person element in $(this)
- Finds the element therein named firstName or lastName
- Returns the textual value of that element
- Assigns that value to the JavaScript variable
Now that the stored name values have been retrieved, they can be added to a table in the HTML page. That table is initially defined only as follows:
<table border="0" cellpadding="3" cellspacing="3" id="people" align="left">
<tr><td class="caption">First Name</td><td class="caption">Last Name</td></tr>
</table>
Since the table has an id value of people, it can be selected in jQuery using $('#people'). To add rows to the table, the append() method is called, which adds content within an element's tags. Provide to that method the HTML necessary to add a table row containing the names:
$('#people').append('<tr><td>' + fn + '</td><td>' + ln + '</td></tr>');
That's all there is to reading in XML via an Ajax request and then populating an HTML table. Once you have a table, you could use any of the several dozen table-related plug-ins to further customize its behavior.