Home arrow AJAX & Prototype arrow Page 4 - Using the jQuery Framework with Google`s Ajax Libraries API

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:
  1. Using the jQuery Framework with Google`s Ajax Libraries API
  2. Review: downloading a JavaScript library via the Google API
  3. Working with the jQuery library
  4. Serving jQuery’s source file via Google's API
By: Alejandro Gervasio
Rating: starstarstarstarstar / 4
January 12, 2009

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

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!



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