Working with AJAX and the Prototype JavaScript Library - Dealing with formatted (X)HTML results
(Page 3 of 4 )
As I stated earlier, the Prototype library will let you deal easily with server results that are formatted as (X)HTML. This process can be quickly accomplished by using the handy "AJAX.Updater" class, which can be used in the following way:
<!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=iso-
8859-1" />
<title>Example Ajax.Updater class</title>
<script language="javascript" src="prototype-1.4.0.js"></script>
<script language="javascript">
// example using the Ajax.Updater class
function fetchHTML(){
var ajaxobj= new Ajax.Updater
('datacontainer','gethtmldata.php',{method: 'get', parameters:
'a=1&b=2',onFailure: displayError});
}
function displayError(requestObj){
$('datacontainer').innerHTML='Failed to receive server
response!';
}
window.onload=function(){
if(document.getElementById && document.createElement &&
document.getElementsByTagName){
var btn=$('fetch');
if(!btn){return};
btn.onclick=fetchHTML;
}
}
</script>
</head>
<body>
<form>
<input type="button" value="Fetch HTML" id="fetch" />
</form>
<div id="datacontainer"></div>
</body>
</html>
In this case, the "AJAX.Updater" object accepts, as the first parameter, the ID attribute that corresponds to the web page element where server results will be displayed as (X)HTML. Logically, if your web application expects a response served in this format, this object can be a real time saver.
Also, it's worthwhile to mention here that the "AJAX.Updater" object accepts the same arguments that were explained concerning the implementation of the "AJAX.Request" class, including the request method to be used, the set of variables sent to the server, and the respective callback functions that will be invoked during the different states of the request in question.
Okay, at this stage I have shown you how to take advantage of the functionality provided by AJAX when working with the Prototype library. Of course, this is only a simple introduction to the subject. If you want to dig deeper on this topic, please spend some time reading the official documentation.
Having covered basically the Prototype's AJAX module, in the following section I'll teach you how to use some additional features that are bundled with this library, including the new "Try.these()" function and the Ruby-styled "each" loop.
So, keep reading to learn more about these interesting topics.
Next: Using the Try.these() function and the each loop >>
More JavaScript Articles
More By Alejandro Gervasio
/ 3 
