Using Google`s Ajax Libraries API

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.

Introduction

Without a doubt, the Web is in constant evolution, and this concept isn’t a simple cliché. It’s a fact that brings new challenges to both users and developers. Of course, when it comes to talking about the big contenders of this fast-changing scenario, Google immediately comes to mind (for good or ill), since the search company continues to introduce additional services, particularly in the area of web development.

As you may have heard, in the last few months, Google has released a new client-side API. It permits users to download some popular JavaScript libraries directly from its servers, including Prototype, jQuery, Scriptaculous, MooTools, and Dojo. In addition, the API will serve the requested files compressed by default (even though this feature can be disabled via client-side scripting), in this manner decreasing their respective download times.

Naturally, many web developers may find it pretty appealing to use this API, since in theory it allows you to download a specific JavaScript package much faster. On the other hand, there’s the fact that Google might collect information each time a JavaScript library is downloaded from a particular location, something that might not be so appealing to a certain number of web developers.

Anyway, I don’t intend to discuss the pros and cons of using Google’s Ajax libraries API, since the subject is actually beyond the scope of this group of articles. Instead, I’d like to teach you how to use this API, just in case you want to decide to download your favorite JavaScript library straight from Google’s servers.

Thus, in this series of tutorials, I’ll be taking a close look at the methods offered by Google’s Ajax Libraries API, so you can quickly start using them when developing your own JavaScript applications.

Are you ready to tackle the first chapter of this educational journey? Then, let’s get started now!

{mospagebreak title=Building a simple Ajax application using a local copy of the Prototype JavaScript library}

Before I show you how to take advantage of Google’s API to work with a specific JavaScript library, I will build a simple Ajax program with the Prototype framework. I’m going to use a conventional approach, that is, I will build the program with a local copy of the framework.

Once you’ve grasped how this Ajax application works, I will demonstrate how to rebuild it by using Google’s API. In this way you’ll be able to spot the differences in both approaches.

Having clarified that point, it’s time to begin developing this sample Ajax program. In simple terms, the program will be tasked with reading the contents of a text file, naturally stored in the web server, which will be displayed on screen via the Ajax module that comes bundled with Prototype. Quite easy to grasp, right?

So, here’s the definition of a basic the text file, called “data.txt,” whose contents will be fetched with Ajax:

These are contents of sample file. These are contents of sample file. These are contents of sample file. These are contents of sample file. These are contents of sample file. These are contents of sample file. These are contents of sample file. These are contents of sample file. These are contents of sample file. These are contents of sample file. These are contents of sample file. These are contents of sample file. These are contents of sample file. These are contents of sample file. These are contents of sample file. These are contents of sample file. These are contents of sample file. These are contents of sample file. These are contents of sample file. These are contents of sample file. These are contents of sample file. These are contents of sample file. These are contents of sample file. These are contents of sample file. These are contents of sample file. These are contents of sample file.

Indeed, the above text file is extremely simple to read, meaning that it’s time to start building the Ajax application that will be charged with retrieving its contents. Below I included the complete source code of this application. Here it is:

(definition for ‘ajax_file_reader.htm’ file)


<!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</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 language="javascript" src="prototype-1.4.0.js"></script>

<script language="javascript">

// 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 handler to HTML button

Event.observe(‘btn’,’click’,readFileContents);

}

// attach handler to window object

Event.observe(window,’load’,initializeApplication,false);

</script>

</head>

<body>

<h1>Reading file contents with Prototype library</h1>

<p><input type="button" id="btn" value="Read File Now!" /></p>

<div id="filecontents"></div>

</body>

</html>



(definition for ‘read_file.php’ file)


<?php

if(!$contents=file_get_contents(‘data.txt’)){

trigger_error(‘Error reading file contents’,E_USER_ERROR);

}

echo $contents;

?>


Even if you’re not familiar with working with the Prototype JavaScript library, it’s pretty easy to see how the above Ajax application functions. It downloads a local copy of the library, and then fetches the content of the previous text file; finally, the application displays it on the browser via an Ajax-based HTTP request.

In addition, the script that actually reads the target file and sends the data back to the client is the one called “read_file.php,” whose signature is shown above as well.

To complement the previous explanation, here’s a screen shot that depicts quite clearly how this Ajax-driven programs works:



Well, at this point I’ve explained how to build a basic Ajax application by using a local copy of the Prototype framework. Next, I will reconstruct the application by means of the Google API.

To learn the full details of how this will be accomplished, please read the following section.

{mospagebreak title=Using Google’s JavaScript Libraries API}

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.

{mospagebreak title=Versioning with the Google API}

True to form, versioning with the Google API is as simple as specifying which version of a particular JavaScript library should be downloaded when calling the pertinent “load()” method that you saw before.

To help you understand more clearly how this process works, below I have rewritten the Ajax-driven program that was built in the prior section, which now utilizes the versioning feature, to work specifically with Prototype 1.6. Here’s the corresponding code sample:

<!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.6");

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


See how easy it is to work with a specific version of a JavaScript framework when using the Google API? As you can see, the only requirement of this process is to invoke the “load()” method by specifying the exact version of the library that must be served. That’s all.

With this concluding example I’ve finished this basic introduction to using Google’s JavaScript Libraries API. As usual, feel free to tweak all of the code samples developed in this article. This will give you a more intimate understanding of how to use this API when building your own client-side web applications.

Final thoughts

In this first chapter of the series, I explained how to use Google’s Ajax libraries API to download and work with the Prototype framework, instead of utilizing a local copy of it. It’s quite possible that the Google-based approach may appeal to you, particularly if your web hosting service has a heavy load, and you want to deliver your JavaScript files from Google’s servers.

In the next part of the series, I’ll be discussing how to employ Google’s API for working with the jQuery JavaScript library. This can be helpful if you’re currently using this package for developing your client-side applications.

Don’t miss the upcoming tutorial!

[gp-comments width="770" linklove="off" ]
antalya escort bayan antalya escort bayan