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

Building a simple Ajax application using a local copy of the Prototype JavaScript library - 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

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.



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