XML is a huge part of AJAX, considering that AJAX is an acronym for Asynchronous JavaScript and XML. jQuery is no doubt one of the most powerful and popular JavaScript libraries out there. jQuery has made parsing XML a lot easier, faster, and cleaner.

The XML

The XML that I’m going to parse is a small phonebook with three people in it. Each person has a name, email, phone number, and an address. We are going to read in the information of each person and display them. To find out more about XML syntax see W3School’s XML Syntax.

<?xml version="1.0"?>

<phonebook>

	<person>
		<name>Joe A. Doyle</name>
		<email>joe@example.com</email>
		<phone_number>901-795-3338</phone_number>
		<address>3102 Burton Avenue Memphis, TN 38118</address>
	</person>

	<person>
		<name>Michael D. Montgomery</name>
		<email>MichaelDMontgomery@example.com</email>
		<phone_number>907-793-5822</phone_number>
		<address>3295 Kidd Avenue Anchorage, AK 99501</address>
	</person>

	<person>
		<name>Linda D. Serrano</name>
		<email>LindaDSerrano@example.com</email>
		<phone_number>978-793-2440</phone_number>
		<address> 3725 Christie Way Westborough, MA 01581</address>
	</person>

</phonebook>

Getting Start with jQuery

Let’s start off by including jQuery into our page.

Before we have jQuery parse the XML we need to make sure the DOM (Document Object Model) is loaded. We do this by simply adding the following code.

$(document).ready(function(){
	//Everything will go inside here…
});

Let The Parsing Begin

Inside the function above we start off with an AJAX request to read the XML file. The AJAX call will take 3 parameters: url, dataType, and success. Below is what the AJAX request should look like. The first parameter, url, points to where the XML that you want to parse is located (this may be different for you). After that we have the dataType parameter, here you put the type of data that you’re expecting back from the server in this case, XML. Coming to the third and final parameter is the success parameter, here when the AJAX request is successful it will run a function.

$.ajax({
	url: "phonebook.xml",
	dataType: "xml",
	success: function(xml){
	}
});

Inside the success function we start reading the XML in. Frist we add the following…

$(xml).find("person").each(function(){

});

Above we are looping through every ‘person’ node in the XML file. To actually get and print the information from inside each node of every ‘person’, we do the following…

var name = $(this).find("name").text();
var email = $(this).find("email").text();
var phone_number = $(this).find("phone_number").text();
var address = $(this).find("address").text();

document.write("Name: "+name+"
");
document.write("Email: "+email+"
");
document.write("Phone Number: "+phone_number+"
");
document.write("Address: "+address+"

");

The final code should look like this:

$(document).ready(function(){
	$.ajax({
		type: "GET",
		url: "phonebook.xml",
		dataType: "xml",
		success: function(xml){
			$(xml).find("person").each(function(){
				var name = $(this).find("name").text();
				var email = $(this).find("email").text();
				var phone_number = $(this).find("phone_number").text();
				var address = $(this).find("address").text();

				document.write("Name: "+name+"
");
				document.write("Email: "+email+"
");
				document.write("Phone Number: "+phone_number+"
");
				document.write("Address: "+address+"

");
			})
		}
	});
});

No Responses, Be The First