topical media & game development
basic-ajax-10-ch10-examp1b.htm / htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Extracting XML</title>
<script language = "javascript">
var request = makeHTR();
function makeHTR()
{
var request;
if(window.XMLHttpRequest)
{
try
{
request = new XMLHttpRequest();
}
catch (e)
{
request = null;
}
}
else
{
try
{
request = new ActiveXObject("Microsoft.XMLHTTP");;
}
catch (e)
{
request = null;
}
}
// return the created object or display an error message
if (!request) {
alert("Error creating the XMLHttpRequest object.");
}
else
return request;
}
// make asynchronous HTTP request using the XMLHttpRequest object
function sendRequest()
{
// proceed only if the xmlHttp object isn't busy
if (request.readyState == 4 || request.readyState == 0) {
request.open("GET", "feed.xml", true);
// define the method to handle server responses
request.onreadystatechange = processResults;
// make the server request
request.send(null);
}
}
function processResults() {
// move forward only if the transaction has completed
if (request.readyState == 4)
{
// status of 200 indicates the transaction completed successfully
if (request.status == 200)
{
// extract the XML retrieved from the server
var xmlDocument = request.responseXML;
// obtain the document element (the root element) of the XML structure
var channelNodes = xmlDocument.documentElement.firstChild.childNodes;
var item = channelNodes[5].childNodes;
var title = item[0].firstChild.nodeValue;
// update the client display using the data received from the server
document.getElementById('title').innerHTML = title;
var link = item[1].firstChild.nodeValue;
var link2 = "<a href='" + link + "'>" + link + "</a>";
document.getElementById('link2').innerHTML = link2;
var description = item[2].firstChild.nodeValue;
document.getElementById('description').innerHTML = description;
}
// a HTTP status different than 200 signals an error
else
{
alert("There was a problem accessing the server: " + request.statusText);
}
}
}
</script>
</head>
<body>
<h1>Get Feed Results</h1>
<form>
<input type="button" id="feedR" value = "Extract">
</form>
<h4>Title: <span id="title"></span></h4>
<h4>Link: <span id="link2"></span></h4>
<h4>Description: <span id="description"></span></h4>
<script type="text/javascript">
var myDoc = document.getElementById('feedR');
myDoc.onclick = sendRequest;
</script>
</body>
</html>
(C) Æliens
20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.