Assembling the modules of the Ajax application - AJAX

Welcome to the third part of the series titled “Using Google's Ajax Libraries API.” Made up of four approachable tutorials, this series teaches you how to download and use your favorite JavaScript library by means of this client-side API. It complements the corresponding theory with a large variety of code samples.

TABLE OF CONTENTS:

By: Alejandro Gervasio

Poor Best

Rating:

/ 12

January 20, 2009

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

In case you wish to test how the previous Ajax application works, now that it downloads the Prototype dependencies without using compression, below I listed its entire source code, including the PHP file that fetches the contents from a text file and sends them back to the client:

(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">

<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 (loads uncompressed source file)

google.load("prototype", "1.4",{uncompressed:true});

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

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;

(definition for 'data.txt' 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. These are contents of sample file.

Now that you have at your disposal the complete source code of this sample Ajax application, feel free to play a bit with the “google.load()” method. Try running the program by using the compressed and uncompressed options, so you can evaluate more accurately how these options affect its overall performance.

Final thoughts

In this third chapter of the series, I explained how to serve, via the Google API, a specified JavaScript library without using compression. Indeed, this was not a difficult process at all, which implies that you shouldn’t have major problems grasping how it works.

In the final part, I’ll be discussing how to use Google's Ajax Libraries API to serve the jQuery library without compressing its source file. Therefore, now that you’ve been warned about the subject of the last installment of the series, you can’t miss it!