Review: downloading a JavaScript library via the Google API - AJAX

In this second installment of a four-part series, you will learn how to develop an AJAX-driven application that makes use of Google's Ajax Libraries API to work with the jQuery library. Using Google's API means taking advantage of Google's servers, which can be expected to react much more quickly than a single heavily-loaded server. Let's get started.

TABLE OF CONTENTS:

By: Alejandro Gervasio

Poor Best

Rating:

/ 4

January 12, 2009

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

A good prologue to our discussion of how to download and use the jQuery library via the Google API consists of reintroducing a hands-on example developed in the preceding article. This example demonstrated how to perform the same process by using the Prototype package.

In summary, the example in question looked like this:

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

Undeniably, it’s clear to see in the above example how simple it is to download a specified version of the Prototype library via the API provided by Google. In this case, the “google.load()” method obviously loads the library’s dependencies, which are used for building a simple Ajax program that fetches the contents of a text file from the web server.

In addition, you should notice how the additional “google.setOnLoadCallback()” method is employed at the end of the program to execute a specified callback function. Quite easy to grasp, isn’t it?

At this point you hopefully recalled how to use the Google API to download and work with the Prototype framework. So what's next? Well, as I explained in the introduction, this API also offer supports for other JavaScript packages, including the jQuery library.

So, in the following section I’ll be explaining in detail how to work this library by means of Google's API.

Click on the link that appears below and keep reading.

Next: Working with the jQuery library >>