Läsa XML-fil med jQuery

by Jarsäter Joakim on april 11th, 2010

Att kunna läsa innehåll från en databas eller en XML-fil är otroligt användbart i många lägen när man skapar hemsidor. Javascript är ett språk många känner till. Ett enkelt sätt att använda Javascript är genom ramverket jQuery. Idag satt jag och funderade på hur man med hjälp av jQuery & AJAX på ett enkelt sätt kan läsa igenom en XML-fil och sen använda sig av informationen i den på sidan.

Vi får börja med att skapa en koppling till jQuery och läsa in ramverket på våran sida. Det kan vi göra på två olika sätt

Ladda ner ramverket och läsa in det lokalt
Ladda in det från Googles API

Under tiden jag kör mina script lokalt brukar jag använda mig av Googles API för att slippa ladda ner det till alla olika projekt. Men annars rekommenderar jag att man laddar ner det och läser in det lokalt för att spara bandbredd & tid.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

Script-taggen lägger vi som vanligt innanför <head>-taggarna i vårat dokument

<script type="text/javascript">
	$(document).ready(function() {

	});
</script>

$(document).ready(function) betyder egentligen bara att scriptet körs eller blir tillgängligt så fort som sidan laddats klart. Ibland vill man ha det så, ibland inte, det är beroende på scriptets funktion.

$.ajax({
	type: "GET",
	url: "jquery_xml.xml",
	dataType: "xml",
	success: function(xml) {

type: Vilken typ av method vi ska använda oss av. GET eller POST
url: Sökvägen till vårat XML-dokument
dataType: Den datatyp vi förväntar oss att servern skickar tillbaka till oss. I detta fall är det en XML-fil
success: Vad som ska hända när vi får ett positivt svar från servern

// Hittar person-noden i dokumentet & loopar igenom den
$(xml).find('person').each(function() {
	var id = $(this).find("id").text();
	var firstname = $(this).find("firstname").text();
	var lastname = $(this).find("lastname").text();

	// Skriver ut i dokumentet
	$('body').append("

(" + id + ") " + firstname + " " + lastname + "

");
	});
}

När vi får tillbaka ett positivt svar från servern så ska vi köra funktionen xml. I den funktionen navigerar vi oss med hjälp av jQuery till den repeterande noden <person>. För varje loop sätter vi ett par variabler som sen skrivs ut i dokumentet

Men vad händer då om man inte får ett positivt svar från server? Ja då finns det ett annat attribut som heter error. När det händer kan vi välja att göra något annat. I mitt fall väljer jag bara att skriva ut ett felmeddelande i consolen.

error: function() {
	console.log("De gick inte att hämta XML-filen");
}

Sen behöver vi självklart ett XML-dokument också. jag har skapat en dokument med några få noder som vi kan använda oss av i vårat lilla test

<?xml version="1.0" encoding="utf8"?>
<persons>
	<person>
		<id>1</id>
		<firstname>John</firstname>
		<lastname>Doe</lastname>
	</person>
	<person>
		<id>2</id>
		<firstname>Foo</firstname>
		<lastname>bar</lastname>
	</person>
	<person>
		<id>3</id>
		<firstname>Biz</firstname>
		<lastname>Baz</lastname>
	</person>
</persons>

Här har vi den fullständiga koden

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>

		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

		<title></title>

		<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
		<link rel="stylesheet" type="text/css" href=".css"/>

		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
		<script type="text/javascript">
		$(document).ready(function() {
			$.ajax({
				type: "GET",
				url: "jquery_xml.xml",
				dataType: "xml",
				success: function(xml) {
					$(xml).find('person').each(function() {
						var id = $(this).find("id").text();
						var firstname = $(this).find("firstname").text();
						var lastname = $(this).find("lastname").text();
						$('body').append("<p>(" + id + ") " + firstname + " " + lastname + "</p>");
					});
				},
				error: function() {
					console.log("Det gick inte att ladda XML-filen");
				}
			});
		});
		</script>
	</head>

	<body>

	</body>

</html>