Uncompressing Source Files with Google`s AJAX Libraries API

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.

Introduction

If you’re a web developer who builds JavaScript applications by using popular JavaScript libraries like Prototype, jQuery, Scriptaculous, and Dojo, then you’ll be pleased to know that Google has released a handy programming interface. Called Ajax Libraries API, this interface can be used for downloading the source files of these packages directly from Google’s servers.

To learn in depth how to get the most out of this interface, however, you may need an approachable guide that shows you how to work with the API’s most relevant methods through a hands-on approach. And that’s exactly where this group of articles comes in!

Now that you’re aware of the goal of this multi-part series, it’s time to briefly review the topics that were discussed in the last article. In that part, I explained how to use the Google API to develop a simple Ajax application whose functionality was based on reading the content from a text file, and then  displaying it on the browser.

In this situation, the implementation of the logic requires the performance of  Ajax-driven HTTP requests. This was accomplished with the assistance of the jQuery library, whose corresponding source file was delivered through the Google API.

Nonetheless, it’s necessary to stress that Google serves by default all of the supported JavaScript packages in a compressed way, in an attempt to decrease their downloading times. Thus, in this third article of the series, I’ll be discussing how to disable this feature within a sample web application, in case you don’t want to use it.

Now, with the preliminaries out of the way, it’s time to continue this educational journey of working with Google’s Ajax Libraries API. Let’s get going!


{mospagebreak title=Serving JavaScript files using compression}

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

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



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

{mospagebreak title=Serving JavaScript files without using compression}

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

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

<p><input type="button" id="btn" value="Read File Now!" /></p>

<div id="filecontents"></div>

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

{mospagebreak title=Assembling the modules of the Ajax application}

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

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

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

?>



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

[gp-comments width="770" linklove="off" ]

antalya escort bayan antalya escort bayan Antalya escort diyarbakir escort