Home arrow AJAX & Prototype arrow Page 2 - Uncompressing Source Files with Google`s AJAX Libraries API

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:
  1. Uncompressing Source Files with Google`s AJAX Libraries API
  2. Serving JavaScript files using compression
  3. Serving JavaScript files without using compression
  4. Assembling the modules of the Ajax application
By: Alejandro Gervasio
Rating: starstarstarstarstar / 12
January 20, 2009

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

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.



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