RSS and AJAX: A Simple News Reader
by Paul Sobocinski
|
Pages: 1, 2, 3, 4, 5
Fetching the XML from the Server: The getRSS() Function
The getRSS() function is shown below:
function getRSS()
{
/*A*/
if (window.ActiveXObject) //IE
xhr = new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest) //other
xhr = new XMLHttpRequest();
else
alert("your browser does not support AJAX");
/*B*/
xhr.open("GET",document.rssform.rssurl.value,true);
/*C*/
xhr.setRequestHeader("Cache-Control", "no-cache");
xhr.setRequestHeader("Pragma", "no-cache");
/*D*/
xhr.onreadystatechange = function() {
if (xhr.readyState == 4)
{
if (xhr.status == 200)
{
/*F*/
if (xhr.responseText != null)
processRSS(xhr.responseXML);
else
{
alert("Failed to receive RSS file from the server - file not found.");
return false;
}
}
else
alert("Error code " + xhr.status + " received: " + xhr.statusText);
}
}
/*E*/
xhr.send(null);
}
Let's walk through this function step by step and figure out what it's doing. The labels in the code (e.g. /*A*/) refer to the corresponding explanations below.
A: In order to communicate with the server, we must first define an XMLHttpRequest object (XHR). This object is what allows us to connect to the server without refreshing the browser; it is the core of any Ajax application. As we'd expect, Internet Explorer defines the XHR object differently than other browsers, such as Firefox and Safari. We use object detection to determine what browser the JavaScript is running in, and thus define the XHR object appropriately.
B: We set up the XHR object by calling xhr.open(). This function takes three arguments: the first is the method we use to fetch the file from the server, the second is the name of the file we are fetching, and the third is set to true if we want the response to be received asynchronously. As we are not going to send any request data to the server, a GET request is sufficient. The name of the RSS XML file is taken directly from the HTML form. Lastly, we specify an asynchronous response so that we don't have to "wait" for the file to be received--we know when it is available by defining a function that is called when the receiving is complete (more on this later).
C: It is important to request a fresh (non-cached) copy from the server. Here, we set the request header to ensure that this will be the case (Pragma is included for backward compatibility).
D: As we have set up an asynchronous connection with the server, the XHR object needs to know what function to call when the server response becomes available. This is the purpose of the onreadystatechange property of the XHR object--we set it equal to the function that we want to run when the readyState property of the XHR object changes. For our purposes, we only need to be concerned with the readyState of 4, because this indicates that the response is available. We know that we received a successful response if xhr.status is equal to 200. Any other status code means that we didn't receive the response properly.
E: We have set up the XHR object for receiving a response from the server. Now, we call xhr.send() to run the server request/response process. As we don't have any data to send, we pass an argument of null.
F: If we have reached this point, we know that a response from the server was successfully received, and we're ready to process the XML file. We just do one last check to make sure we didn't get an empty response. We do so by inspecting the responseText property (this contains the received file in textual format). Now we're ready to call the processRSS() function.
