Loading XML using jQuery AJAX

In our previous articles, we discussed about how jQuery AJAX works and also various jQuery global AJAX event handlers available in jQuery. In this article, we’ll focus on accessing an XML document residing at the server, reading and displaying content of the XML using jQuery AJAX. In the following code example, we send an AJAX request to read the XML document we needed and we process the response from the AJAX request to display the results. We’ll also see how we can detect any errors occurred during AJAX request.

also read:

<html>
<head>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#loadBtn").click(function() {
		$.ajax({
			type: "GET",
			url: "products.xml",
			datatype: "xml",
			error: function(jqXHR, textStatus, errorThrown) {
				console.log('Error: ' + errorThrown);
			},
			success: function(xml) {
				console.log('AJAX Request is succeded.');

				var productsTable = '';
				productsTable += '<table id="productsTable"
                       cellspacing="0" cellpadding="2" border="1">' ;

				productsTable += '<thead><td>Id</td>
                       <td>Name</td><td>Price</td><td>Discount</td></thead>';

				$(xml).find('product').each(function(){
					productsTable += '<tr>';
					productsTable += '<td>';
					productsTable += $(this).find('id').text();
					productsTable += '</td>';

					productsTable += '<td>';
					productsTable += $(this).find('name').text();
					productsTable += '</td>';

					productsTable += '<td>';
					productsTable += $(this).find('price').text();
					productsTable += '</td>';

					productsTable += '<td>';
					productsTable += $(this).find('discount').text();
					productsTable += '</td>';

					productsTable += '</tr>';
				});
				productsTable += '</table>';
				$("#products").append(productsTable);
			}
		});
	});
});
</script>
</head>
<body>

Please click to load the products from server:
<input type="button" id="loadBtn" value="Load XML"/>
<br/><br/>
<div id=products></div>
</body>
</html>

In the above code example, we sent an AJAX request to the XML document ‘products.xml‘ which is at the same server location as the executing HTML file. However, we can also use relative paths to access various server resources.

Note that we specified various parameters while sending the AJAX request. For example, we configured the request ‘type’ as ‘GET’, ‘url’ to ‘products.xml’ and ‘datatype’ as ‘xml’. The ‘datatype’ parameter indicates the type of the response we’re expecting from the server.

The following is the XML we used in this example in the products.xml.

<?xml version="1.0" encoding="UTF-8"?>
<products>
	<product>
		<id>P-22345</id>
		<name>LCD Television</name>
		<price>$500</price>
		<discount>5%</discount>
	</product>
	<product>
		<id>P-13245</id>
		<name>Mac Mini</name>
		<price>$700</price>
		<discount>2%</discount>
	</product>
	<product>
		<id>P-52346</id>
		<name>Home Theatre</name>
		<price>$500</price>
		<discount>1%</discount>
	</product>
	<product>
		<id>P-78385</id>
		<name>Laptop Computer</name>
		<price>$1500</price>
		<discount>5%</discount>
	</product>
	<product>
		<id>P-78385</id>
		<name>Desktop Computer</name>
		<price>$1000</price>
		<discount>7%</discount>
	</product>
</products>

When we click on the button ‘Load XML’, the XML content is loaded from the server and displayed in a tabular format as shown in the below screen capture.

We can specify a number of parameters in the AJAX request as key/value pairs. All parameters are optional. In this code example we’re using ‘type’, ‘url’, ‘datatype’, ‘error’, and ‘success’ parameters. The ‘type’ parameter specifies the request type (GET or POST), ‘url’ specifies the URL of the resource in the server to access, ‘datatype’ is to indicate what kind of content to expect as part of the response (other possible value is JSON to handle JSON response, html for HTML response, text for pure text response, script to evaluate the response as JavaScript and returns it as plain text). We have ‘error’ and ‘success’ callback methods to handle any errors in the AJAX request or to display the data upon successful request respectively.

also read:

If you have any questions, please post it in the comments section. If you are interested in receiving the future articles on jQuery and Java topics, please subscribe here

About Ganesh Prakhya