Using the jQuery Framework with Google`s Ajax Libraries API - Serving jQuery’s source file via Google's API (
Page 4 of 4 )
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!
/ 4 
