Serving JavaScript files without 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

To demonstrate how to download, via the Google API, the source files of the Prototype library without using compression, I’m going to rebuild the Ajax-based application that you saw in the previous section. In this case, the pertinent “google.load()” method will take a third incoming parameter to specify that the library in question must be served in an uncompressed way.

That being said, here’s the modified version of the file that downloads the Prototype package in an uncompressed way:

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

As you can see above, the “google.load()” method has been invoked with a third parameter, whose value “uncompressed: true” indicates to the API that the Prototype package should be served without using compression.

Of course, in most cases it’s preferable to download the source files of a specified library using compression, but there may be some exceptional situations where you may want to choose the “uncompressed” option.

Well, at this point you have hopefully learned how to instruct the Google API to download the Prototype library without utilizing HTTP compression. Nonetheless, you may have noticed that the previous Ajax application in its current state is actually incomplete, since it’s necessary to include the remaining source files.

Taking into account this requirement, in the last section of this tutorial I’ll be listing the complete source code of this sample Ajax program, so you’ll be able to test it much more easily.

Please, jump ahead and read the new few lines. We’re almost done!

Next: Assembling the modules of the Ajax application >>