Uncompressing Source Files with Google`s AJAX Libraries API - Serving JavaScript files using compression (
Page 2 of 4 )
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.
/ 12 
