• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

Loading XML using jQuery AJAX

March 11, 2013 //  by Ganesh Prakhya//  Leave a Comment

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:

  • jQuery Ajax Introduction
  • jQuery Global Ajax Event Handlers
  • Refreshing DIV Content with jQuery
<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.
load-xml

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:

  • jQuery Ajax Introduction
  • jQuery Global Ajax Event Handlers
  • Refreshing DIV Content with jQuery

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

Category: jQueryTag: jQuery

About Ganesh Prakhya

Previous Post: « Hibernate, Maven and HSQL – Example Project (XML Mapping)
Next Post: Hibernate, Maven and HSQL – Example Project (Using Annotations) »

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact