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

Serving the jQuery library without using compression - 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

By using a similar approach to the example created in the previous section, it’s also feasible to serve, via the Google API, several JavaScript libraries without using compression. Of course, if you already grasped how to do this when using Prototype, then surely you won’t have major problems understanding how the same process can be performed with the jQuery package.

So it's time to move past theory and demonstrate with a functional code sample how to accomplish the aforementioned task. Thus, below I have rewritten the client-side part of the Ajax application built in the prior section, which this time uses the jQuery library. Here it is:


<!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 jQuery 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 jQuery library with Google API (loads uncompressed source file)

google.load("jquery","1.2",{uncompressed:true});

google.setOnLoadCallback(function(){

$("#btn").click(function(){

$.get("read_file.php",function(fileContents){$("#filecontents").html(fileContents);});

});

});

</script>

</head>

<body>

<h1 id="header">Reading file contents with jQuery library (uses Google API)</h1>

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

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

</body>

</html>


That was pretty simple to read and grasp, wasn’t it? As shown above, now this sample Ajax application utilizes the jQuery library to fetch the contents of a text file in the web server. The most relevant thing to stress here is that this JavaScript package is downloaded in a completely uncompressed form, because it was specified in that way when calling the “google.load()” method.

Definitely, understanding how to serve the different libraries via the Google API without using compression is a no-brainer process that doesn’t require any further explanations. Therefore, in the final part of this tutorial I’ll be listing for you the complete source code corresponding to the Ajax program built earlier, so you can tweak and test it more easily.

Click on the following link and proceed to read the final section, please.



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