Serving JavaScript files using compression - 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

Before I start explaining how uncompressed JavaScript files can be delivered via the Google API, I’d like to build a primitive Ajax program that utilizes a compressed version of the Prototype library.

To do that, I’m going to reuse the practical example developed in the first article of the series, since it’s pretty demonstrative and easy to follow. Thus, the set of source files that comprise the example in question looks like this:

(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

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>

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

Definitely, I’m not going to spend a long time explaining how the previous Ajax program works, since I already did this in a previous tutorial. However, it’s worth noticing that this sample application serves a compressed version of the Prototype package.

If you’re wondering where that feature has been enabled within this sample web application, the answer is simply…nowhere. Actually, each time the “google.load()” method is called without specifying a third argument, it’ll deliver the requested library in a compressed way.

However, it’s possible to disable this compression process by passing an additional parameter to that method. In he upcoming section, I’ll discuss in more detail how to deliver uncompressed JavaScript files with the Google API.

So, if you’re interested in learning how this will be achieved, please click on the link that appears below and keep reading.

Next: Serving JavaScript files without using compression >>