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

Versioning with the Google 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

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!



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