Serving jQuery’s source file via Google's API - AJAX

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.

TABLE OF CONTENTS:

By: Alejandro Gervasio

Poor Best

Rating:

/ 4

January 12, 2009

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

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

<head>

<title>Reading file contents with jQuery library (uses Google API)</title>

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>

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

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