Home arrow AJAX & Prototype arrow Page 2 - Using the google.load() Method with Google`s Ajax Libraries API

Review: delivering the Prototype JavaScript library without compressing its source files - AJAX

Google's Ajax Libraries API is a programming interface that permits web developers to download popular JavaScript packages, such as Prototype, jQuery and Scriptaculous, directly from Google’s servers instead of using local copies of these libraries. In this fourth part of a four-part series on using the API, you'll learn how to serve the jQuery framework without compression.

TABLE OF CONTENTS:
  1. Using the google.load() Method with Google`s Ajax Libraries API
  2. Review: delivering the Prototype JavaScript library without compressing its source files
  3. Serving the jQuery library without using compression
  4. Source code for the sample Ajax application
By: Alejandro Gervasio
Rating: starstarstarstarstar / 5
January 26, 2009

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

I will start my explanation of how to serve the jQuery package via the Google API without using compression by reintroducing a hands-on example created in the previous article. It showed the same process with the Prototype library.

The example in the last article illustrated how to build a basic Ajax application that was capable of reading the content of a text file in the server, and theny displaying it on the browser. As I said before, these tasks were performed by means of Prototype, whose source files were served uncompressed.

That being said, here’s how this Ajax application looked originally:


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


Certainly, I’m not going to spend additional time explaining how the previous Ajax program actually works, since this was covered in depth in preceding tutorials of the series. I would like to remind you, however, of the way the “google.load()” method was instructed to download the Prototype library without using compression.

You'll understand this process better if you look at the following line of code:


google.load("prototype", "1.4",{uncompressed:true});


Now that you hopefully recalled how to use the Google API for delivering the Prototype package in an uncompressed manner, it’s time to see how this process can be recreated using the jQuery library.

To learn the full details of how this will be achieved, please click on the link 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: