Get XML with AJAX

AJAX is a method for retrieving data from a server without refreshing the web page. Below, we have a simple Get example program to demonstrate how AJAX works. There are three files below which you can create with a text editor. These files are assumed to be in the same folder on the server.

IMPORTANT: These files must be accessed via a web server. That is, they must be on a server or served by a web server on a local machine. For example, if the files are local the program could be run by entering http://localhost:8080/XoaxGetAjax.html into the address bar of your browser, if the site is set up to run on port 8080. See our video on how to install and use IIS, if you do not know what a web server is.

ReadAndDisplayAnXmlFile.html

<!DOCTYPE html>
<html>
	<head>
		<title>XoaX.net's Javascript</title>
		<style>
			table,th,td {
				border : 1px solid black;
				border-collapse: collapse;
				padding: 5px;
				color:black;
			}
		</style>
		<script type="text/javascript" src="ReadAndDisplayAnXmlFile.js"></script>
	</head>
	<body onload="LoadXmlDoc()">
		<table id="idCurses"></table>
	</body>
</html>

ReadAndDisplayAnXmlFile.js

function LoadXmlDoc() {
	const qXmlHttpRequest = new XMLHttpRequest();
	qXmlHttpRequest.onload = function() {
		const qXmlDoc = qXmlHttpRequest.responseXML;
		FillTable(qXmlDoc);
	}
	qXmlHttpRequest.open("GET", "TwelveCurses.xml");
	qXmlHttpRequest.send();
}

function FillTable(qXmlDoc) {
	const qCurses = qXmlDoc.getElementsByTagName("CURSE");
	let sTable="<tr><th>Number</th><th>Curse</th></tr>";
	for (let i = 0; i < qCurses.length; i++) {
		sTable += "<tr><td>" +
		qCurses[i].getElementsByTagName("INDEX")[0].childNodes[0].nodeValue + "</td><td>" +
		qCurses[i].getElementsByTagName("TEXT")[0].childNodes[0].nodeValue + "</td></tr>";
	}
	document.getElementById("idCurses").innerHTML = sTable;
}

TwelveCurses.xml

<?xml version="1.0" encoding="UTF-8"?>
<CURSES>
	<CURSE>
		<INDEX>1</INDEX>
		<TEXT>Cursed be the man who makes a graven or molten image, an abomination to the Lord, a thing made by the hands of a craftsman, and sets it up in secret.</TEXT>
	</CURSE>
	<CURSE>
		<INDEX>2</INDEX>
		<TEXT>Cursed be he who dishonors his father or his mother.</TEXT>
	</CURSE>
	<CURSE>
		<INDEX>3</INDEX>
		<TEXT>Cursed be he who removes his neighbor’s landmark.</TEXT>
	</CURSE>
	<CURSE>
		<INDEX>4</INDEX>
		<TEXT>Cursed be he who misleads a blind man on the road.</TEXT>
	</CURSE>
	<CURSE>
		<INDEX>5</INDEX>
		<TEXT>Cursed be he who perverts the justice due to the sojourner, the fatherless, and the widow.</TEXT>
	</CURSE>
	<CURSE>
		<INDEX>6</INDEX>
		<TEXT>Cursed be he who lies with his father’s wife, because he has uncovered her who is his father’s.</TEXT>
	</CURSE>
	<CURSE>
		<INDEX>7</INDEX>
		<TEXT>Cursed be he who lies with any kind of beast.</TEXT>
	</CURSE>
	<CURSE>
		<INDEX>8</INDEX>
		<TEXT>Cursed be he who lies with his sister, whether the daughter of his father or the daughter of his mother.</TEXT>
	</CURSE>
	<CURSE>
		<INDEX>9</INDEX>
		<TEXT>Cursed be he who lies with his mother-in-law.</TEXT>
	</CURSE>
	<CURSE>
		<INDEX>10</INDEX>
		<TEXT>Cursed be he who slays his neighbor in secret.</TEXT>
	</CURSE>
	<CURSE>
		<INDEX>11</INDEX>
		<TEXT>Cursed be he who takes a bribe to slay an innocent person.</TEXT>
	</CURSE>
	<CURSE>
		<INDEX>12</INDEX>
		<TEXT>Cursed be he who does not confirm the words of this law by doing them.</TEXT>
	</CURSE>
</CURSES>

Core JavaScript

Get XML with AJAX

ReadAndDisplayAnXmlFile.html

ReadAndDisplayAnXmlFile.js

TwelveCurses.xml

Output