June 2010 Edition
Computer Science Department, University of Cape Town
| MSc-IT Study Material June 2010 Edition Computer Science Department, University of Cape Town |
The previous example is quite trivial, since the AJAX call takes place while the page is being loaded. This example will go a step further: the AJAX request will occur after the page has completely loaded, and the page will be dynamically updated. This will be done by showing a button to the user. Pressing the button will make an AJAX request to read a file, the contents of which it will be printed on the page. While this could be done without AJAX, AJAX will allow us to do this without reloading the page.
First, create two files, one called text.txt and another called div-update.html. Text.txt should contain a small message, just as it previously did. Div-update.html should contain the following:
<html>
<head>
<title>This is a title</title>
</head>
<body>
<script type="text/javascript">
function create_request() {
var httpRequest;
if (window.XMLHttpRequest) {
httpRequest = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
document.write("Unable to create XMLHttpRequest object.");
}
return httpRequest;
}
function get_data_synchronously_from(file_name)
{
var httpRequest = create_request();
httpRequest.open("GET", file_name, false);
httpRequest.send(null);
if (httpRequest.status != 0) // For non http requests.
{
alert("There has been an error reading the file.");
return null;
}
else
{
return httpRequest.responseText
}
}
function button_press()
{
document.getElementById("display-div").innerHTML= get_data_synchronously_from(document.getElementsByName("file-name")[0].value);
}
</script>
<p>
Click on the button below to load data from the file in the text box.
</p>
<form>
<input type="text" name="file-name" value="file:///home/rudy/Desktop/web/text.txt" />
<input type="button" value="Print the file" onclick="button_press();"/>
</form>
<p> <b>The file currently contains: </b></p>
<div id="display-div">
<p>The file has not yet been loaded.</p>
</div>
</body>
</html>
The example is similar to the previous one in how it handles the AJAX requests. Notice that we've encapsulated the request in the get_data_synchronously_from() function, which takes a file name and now returns the contents of the file. The HTML page contains a DIV with the ID “display-div”. It is the DIV which we will use to display the contents of the file. The page also contains a form with two elements, a text box, which we have named “file-name”, to contain the name of a file which the user wants to view, and a button. The button calls the button_press() function when it is clicked. This function does all of the interesting work of this example: it uses getElementsByName() to access the text box (notice that getElementsByName() returns an array of elements with the given name – in this case there is only one element, which is why we take the first), whose value is used as the argument to get_data_synchronously_from(). getElementById() is then used to access the DIV, and we set its contents using its innerHTML() attribute to the contents in the file.
The user can enter the name of any text file in the text box. The file should be in the same directory as the HTML file, otherwise some browsers will report a security error. Also, the file should have its full path specified, otherwise, again, many browsers will report a security error. When the user presses the button, the HTML page is dynamically modified (modified without reloading the page) to contain the contents of the file. Notice that the file can contain HTML code as well, and this will be displayed.