Using Google’s JavaScript Libraries API - AJAX

Google's new client-side API lets you download some of the most popular JavaScript libraries directly from its servers. If you're interested in dabbling with AJAX, there is no faster way to get your packages and get started. This four-part article series, of which this is the first part, will help get you on your way.

TABLE OF CONTENTS:

By: Alejandro Gervasio

Poor Best

Rating:

/ 5

January 05, 2009

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

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">

<head>

<title>Reading file contents with Prototype library (uses Google API)</title>

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>

// 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>

</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.

Next: Versioning with the Google API >>