Using Google`s Ajax Libraries API - Using Google’s JavaScript Libraries API (
Page 3 of 4 )
In the previous section, you learned how to build a simple Ajax-based application which used a local copy of the Prototype library to implement the logic required for reading the content of a simple text file, and for displaying that content on the screen.
However, as I explained in the beginning, it’s also possible to use Google’s JavaScript Libraries API and rebuild the same Ajax application by downloading the Prototype framework directly from Google's servers.
To see how this can be done in a simple manner, below I included the complete source code of the aforementioned Ajax program, which now utilizes Google's API. Take a look at it, please:
<!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>Reading file contents with Prototype library (uses Google API)</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
font: bold 18pt Arial, Helvetica, sans-serif;
color: #000;
}
#filecontents{
width: 600px;
padding: 10px;
border: 1px solid #999;
font: normal 10pt Arial, Helvetica, sans-serif;
color: #000;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
// load Prototype library with Google API
google.load("prototype", "1.4");
// read file contents with Ajax
function readFileContents(){
// send http request
var ajaxobj=new Ajax.Request('read_file.php',{method: 'get',onComplete: displayFileContents,onFailure: displayError});
}
// display file contents
function displayFileContents(requestObj){
$('filecontents').innerHTML=requestObj.responseText;
}
// display error message
function displayError(requestObj){
$('filecontents').innerHTML='Error reading file contents!';
}
// initialize file reading application
function initializeApplication(){
// attach click handler to HTML button
Event.observe('btn','click',readFileContents);
}
google.setOnLoadCallback(initializeApplication);
</script>
</head>
<body>
<h1>Reading File Contents with Prototype library (uses Google API)</h1>
<p><input type="button" id="btn" value="Read File Now!" /></p>
<div id="filecontents"></div>
</body>
</html>
Indeed, the above example is very simple to grasp. In this case, there are two things worth noticing: first that the Prototype library is served from the “http://www.google.com/jsapi" URL, and second, that the library in question is loaded via the “google.load()” method, naturally included with the Google API.
Finally, a brand new method, named “setOnLoadCallback(),” is utilized to call the first function of the Ajax program, once the entire web document has been loaded. This is not too hard to grasp, right?
At this point, hopefully you realize how easy it is to serve a specific JavaScript library by means of the API provided by Google. Of course, if you’re like me, then you may wonder what the real benefit is in using this approach. Well, since the source files of the specified framework are downloaded from Google’s servers, they will be “eventually” delivered more quickly than they would be using a single, heavily-loaded machine.
Regardless of the pros and cons in utilizing the Google’s JavaScript Libraries API, the truth is that the interface is quite simple to work with. However, as you may have noticed before, the previous example utilized specifically version 1.4 of the Prototype library. This is a feature called “versioning” within the context of the Google API that permits you to specify, not surprisingly, which version of a particular library must be served. Therefore, in the final section of this tutorial I’ll explain how to take advantage of this handy characteristic to use a different version of Prototype.
To learn how this will be accomplished, go ahead and read the new few lines.
