Home arrow AJAX & Prototype arrow Page 3 - Using Google`s Ajax Libraries API

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:
  1. Using Google`s Ajax Libraries API
  2. Building a simple Ajax application using a local copy of the Prototype JavaScript library
  3. Using Google’s JavaScript Libraries API
  4. Versioning with the Google API
By: Alejandro Gervasio
Rating: starstarstarstarstar / 5
January 05, 2009

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

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.



 
 
>>> More AJAX & Prototype Articles          >>> More By Alejandro Gervasio
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

AJAX & PROTOTYPE ARTICLES

- Best AJAX Tutorials for Forms
- The Best AJAX Tutorials
- 8 Great Ajax Tutorials
- Using Ajax and jQuery
- Using Ajax and jQuery with HTML Forms
- Ajax.org Offers Cloud9 IDE for JavaScript
- Java Technologies Provider ICEsoft Releases ...
- Using Recaptcha in AJAX Prototype Framework ...
- Google's Closure Compiler Service API: Addit...
- Installing Google Web Toolkit: Introducing t...
- Google's Closure Compiler Service API: Displ...
- Google's Closure Compiler Service API: Deliv...
- Google's Closure Compiler Service API: the A...
- Google's Closure Compiler Service API: the S...
- Google's Closure Compiler Service API: Optim...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: