Using the jQuery Framework with Google`s Ajax Libraries API

In this second installment of a four-part series, you will learn how to develop an AJAX-driven application that makes use of Google’s Ajax Libraries API to work with the jQuery library. Using Google’s API means taking advantage of Google’s servers, which can be expected to react much more quickly than a single heavily-loaded server. Let’s get started.

Introduction

A few months ago, Google released a brand new programming interface known as “Ajax Libraries API,” which provides web developers with a number of intuitive methods that can be used for downloading some popular JavaScript libraries directly from Google’s servers.

The group of frameworks currently supported by this API include popular packages like Prototype, jQuery, Scriptaculous, MooTools, and Dojo. If you use some of these libraries frequently when building your client-side web applications, then it’s possible that you may want to take a closer look at the core methods that come included with this interface.

This group of articles will get you started using Google’s Ajax Libraries API through numerous code samples. Thus, if you’re a strong advocate of Prototype or jQuery and want to learn how to serve these libraries via Google’s servers, instead of using local copies, then go ahead and begin reading now!

And now that I’ve mentioned the Prototype JavaScript library, it’s time to review the topics discussed in the first installment of this series. In that tutorial I explained how to use the Google API to develop a basic Ajax application with Prototype.

In that case, I discussed the use of the “google.load()” and “google.setOnLoadCallback()” methods. These methods were used first for downloading a specified version of Prototype,and then for executing a concrete JavaScript function once the entire web document finished loading.

Indeed, working with a library like Prototype in conjunction with the Google API is a no-brainer process that only requires a minimal background in the aforementioned methods. However, as I said in the beginning, this API also supports using the jQuery framework in a truly painless fashion. Thus, this second chapter of the series will be focused on illustrating how to serve the jQuery dependencies via this handy API.

Now it’s time to get rid of the preliminaries and demonstrate how to work with this popular JavaScript package using Google’s Ajax Libraries API. Let’s jump in!

{mospagebreak title=Review: downloading a JavaScript library via the Google API}

A good prologue to our discussion of how to download and use the jQuery library via the Google API consists of reintroducing a hands-on example developed in the preceding article. This example demonstrated how to perform the same process by using the Prototype package.

In summary, the example in question looked like this:


<!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.4");

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


Undeniably, it’s clear to see in the above example how simple it is to download a specified version of the Prototype library via the API provided by Google. In this case, the “google.load()” method obviously loads the library’s dependencies, which are used for building a simple Ajax program that fetches the contents of a text file from the web server.

In addition, you should notice how the additional “google.setOnLoadCallback()” method is employed at the end of the program to execute a specified callback function. Quite easy to grasp, isn’t it?

At this point you hopefully recalled how to use the Google API to download and work with the Prototype framework. So what’s next? Well, as I explained in the introduction, this API also offer supports for other JavaScript packages, including the jQuery library.

So, in the following section I’ll be explaining in detail how to work this library by means of Google’s API.

Click on the link that appears below and keep reading.

{mospagebreak title=Working with the jQuery library}

If you grasped how to use Google’s API for downloading the Prototype library directly from the search engine’s servers, then it’s probable that you’ll find even simpler to utilize the API in question for working with the jQuery framework.

The reason for this is simple: regardless of the library being used, the procedure remains practically the same — first, use the “google.load()” method for downloading a specific package, and then the “google.setOnLoadCallback()” method is responsible for calling a concrete JavaScript function after the complete web page has been loaded.

You will undoubtedly understand this process better if I provide you with a practical example that shows in detail how to use the API for working with the jQuery library. With that idea in mind, below I rebuilt the Ajax-driven application that you learned in the previous section by using the a local copy of jQuery.

Here’s the corresponding code sample:


<!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</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 language="javascript" src="jquery.js"></script>

<script>

$(document).ready(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</h1>

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

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

</body>

</html>


As I explained a few lines before, the above code sample illustrates how to use the jQuery library to recreate the same file reading Ajax application developed in the preceding section. In simple words, this program is responsible for fetching the contents of a text file, via an Ajax HTTP request, to be displayed later within a selected DIV of the web document.

The PHP script that reads this data from the targeted file is as follows:

<?php

if(!$contents=file_get_contents(‘data.txt’)){

trigger_error(‘Error reading file contents’,E_USER_ERROR);

}

echo $contents;

?>


Now that I have listed the PHP scripts that fetch the contents from a text file, called “data.txt,” I will show you how this sample file looks:

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 hopefully understand how each module that comprises this Ajax program works, here’s an additional screen capture that shows the output generated by the application. Take a look, please:



That was pretty simple to accomplish, right? At this point, I have explained how to build, with the jQuery library, a primitive Ajax application that fetches the content from a selected text file, and then displays it on a screen. Of course, as you saw earlier, this particular example uses a local copy of the library, meaning that it’s time to see how the same program can be rebuilt, this time utilizing Google’s API.

This process will be discussed in detail in the last section of this article. So please read the next segment.

{mospagebreak title=Serving jQuery’s source file via Google’s API}

As you may have guessed, rebuilding the Ajax application developed in the prior section by using the Google API only requires a few minor changes that you’ll surely grasp in a snap. However, the best way to demonstrate that this is true is by means of functional code. Thus, here’s the modified version of the mentioned Ajax application, where jQuery’s source file is served via the Google API:

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

google.load("jquery", "1.2.3");

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>  


As shown above, this sample Ajax program now loads the jQuery package via the Google API. This  procedure should be quite familiar to you, since it looks very similar to the example developed in the first article, where the API was used to serve the Prototype library.

In this case, not only is the application initialized through the “google.setOnLoadCallback()” method, but it uses the versioning feature for specifying exactly which version of jQuery should be downloaded to the client.

So far, everything looks pretty good. At this point, you learned how to take advantage of the functionality of the Google API to work with the jQuery framework. Since all the JavaScript libraries currently supported by Google are served compressed by default, this should decrease their respective download times.

However, the best way to evaluate the pros and cons of delivering JavaScript packages via Google’s API is by practice. All of the code samples included in this tutorial should be pretty useful for that purpose.

Final thoughts

In this second chapter of the series, I went through the development of a sample Ajax-driven application that made use of Google’s Ajax Libraries API to work with the jQuery library.

However, as I explained before, each package served through this API is compressed before being sent to the browser. Thus, in the forthcoming article I’ll be discussing how to disable this feature when working with the Prototype framework.

Now that you’re aware of the topic that will be covered in the next part, you don’t have any excuses to miss it!

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

chat