The jQuery library has a robust set of capabilities when it comes to accessing documents and data through HTTP. One of the simplest scenarios for accessing XML data is from a static, or unchanging URL. For example, if a NIEM XML code list is stored at a fixed location it may be useful to access it directly from a web-page and display the results in a choice box or list for users to select from. This allows for content to be dynamic without directly editing or updating the web page each time a list of codes is changed. This is the scenario the remainder of this guide will focus on.
Step 1: Include jQuery Library
The first step in leveraging jQuery is actually including the appropriate library on your web-page. There are both compressed and uncompressed versions of this library available on jquery.com and in many cases you can simply link to a hosted copy of the library on the web. For this exercise, let's assume we have a copy of the library hosted on the same server (and in the same directory) as the html page we're writing. In this case, we will include the script by using the following:
<!-- jQuery Include (change to match the file name and location where you have the jQuery library stored) --> <script src="jquery-1.10.2.js"></script>
Step 2: ‘Get’ XML from the URL - As Text (Optional)
jQuery provides a very powerful and flexible .ajax command to allow developers to make HTTP GET and HTTP POST calls with support for both success and error conditions. In reality, jQuery is merely masking a series of JavaScript calls that would be required to support doing these same functions (thereby shrinking the footprint of our code and increasing its readability significantly).
For the purposes of learning, we will first bring back the XML found in a URL location as text and display it in a text field on the screen. This is a good first step to ensure we have the proper URL and the XML stored there appears to be correct. Often you will use this for debugging or logging purposes only though. The following snippet allows us to access the URL passed into a function.
function getXmlFromUrl(sUrl) { //Retrieve the XML simply for display using dataType:'text' $.ajax({ type: "GET", url: sUrl, dataType: "text", error: function(err){ alert("Error accessing TEXT file |" + sUrl + "|"); }, success: function (text) { textField.value = text; } }); }
In the above, when a URL is successfully accessed, the “success:” function is called, and in this case, the text stored in the URL is placed into a Text Area (with an ID of ‘textField’ in this example) on the screen.
Step 3: ‘Get’ XML from the URL - As XML
The same .ajax command used in the above text example is also used to obtain XML with a few minor modifications. To get an XML object back from the URL instead of raw text, the dataType: is changed to ‘xml’ and the success: function must handle and process the return results very differently. The differences are shown in the following snippet:
$.ajax({ type: "GET", url: sUrl, dataType: "xml", error: function (err) { alert("Error accessing XML file |" + sUrl + "|"); }, success: function (xml) { //find all simpleType nodes in the document $(xml).find("xsd\\:simpleType, simpleType").each(function () { //only looking for the EYECodeSimpleType for now if ($(this).attr("name") == "EYECodeSimpleType") { //loop through each enumeration $(this).find("xsd\\:enumeration, enumeration").each(function () { //add to dropdown HTML <select> object $("#selectBox").append("<option value='" + $(this).attr("value") + "'>" + $(this).find("xsd\\:documentation, documentation").text() + "</option>"); }); } }); } });
jQuery (and it’s cousin JavaScript) is not known for handling of XPath, and to that end, it leverages CSS selectors instead of XPath statements commonly used in compiled languages and XSLT. Knowing that, further inspection of the success: function is probably required.
In order to find the enumerations of eye color, we use the .find() function in the following format:
$(xml).find(“namespacePrefix\\:elementName, elementName) //The \\: is an escape sequenced colon.
As discussed in the jQuery Parse XML guide, two different strings are listed as find criteria, one with the namespace prefix (required by Microsoft Internet Explorer) and one omitting the prefix (as required by Web-Kit-Based browsers). This brings back a series of nodes, which are then looped through using the each() function in the following format:
nodeListResults.each(function(){ //do something here with each node });
In order to know we have the right node selected, a second nested .find() function is called on each node within the each “loop”. In this case, we’re only looking for the element named “EYECodeSimpleType” and skip any other simpleType node that is not named this. We use the .attr() function to return the “name” attribute of each node using the following:
if ($(this).attr(“name”) == “EYECodeSimpleType”) { //do something with EYECodeSimpleType node }
Finally, all the “enumeration” elements of the matching simple data type are compiled and we use a nested each() “loop” to add an option to a select box on the page.
Final: Full Example
The following is a full HTML and jQuery listing of the source used in this guide.
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery HTTP Get Example</title> <!-- jQuery Include (change to match the file name and location where you have the jQuery library stored) --> <script src="jquery-1.10.2.js"></script> <!-- On Page JavaScript --> <script> function getXmlFromUrl(sUrl) { //Retrieve the XML simply for display using dataType:'text' $.ajax({ type: "GET", url: sUrl, dataType: "text", error: function (err) { alert("Error accessing TEXT file |" + sUrl + "|"); }, success: function (text) { textField.value = text; } }); //Retrieve the XML for code list enforcement using dataType:'xml' $.ajax({ type: "GET", url: sUrl, dataType: "xml", error: function (err) { alert("Error accessing XML file |" + sUrl + "|"); }, success: function (xml) { //find all simpleType nodes in the document $(xml).find("xsd\\:simpleType, simpleType").each(function () { //only looking for the EYECodeSimpleType for now if ($(this).attr("name") == "EYECodeSimpleType") { //loop through each enumeration $(this).find("xsd\\:enumeration, enumeration").each(function () { //add to dropdown HTML <select> object $("#selectBox").append("<option value='" + $(this).attr("value") + "'>" + $(this).find("xsd\\:documentation, documentation").text() + "</option>"); }); } }); } }); } function selectedValue() { //post the selected value in an alert box alert($("#selectBox :selected").attr("value")); } </script> </head> <body> <p style="font-family:'Segoe UI'"> Click on the "Get XML" button to retrieve text from the file "fbi.xsd" </p> <textarea id="textField" style="width:100%;height:100px"></textarea> <select id="selectBox" onchange="selectedValue()"> <option value="None">None</option> </select> <p><button id="go" onclick="getXmlFromUrl('./Subset/niem/fbi/2.0/fbi.xsd')">Get XML</button></p> </body> </html> function selectedValue() { //post the selected value in an alert box alert($("#selectBox :selected").attr("value")); } </script> </head> <body> <p style="font-family:'Segoe UI'"> Click on the "Get XML" button to retrieve text from the file "./example.xml" </p> <textarea id="textField" style="width:100%;height:100px"></textarea> <select id="selectBox" onchange="selectedValue()"> <option value="None">None</option> </select> <p><button id="go" onclick="getXmlFromUrl('./Subset/niem/fbi/2.0/fbi.xsd')">Get XML</button></p> </body> </html>
Extra: Live Demo
A working example of the above example can be found here.