Using the google.load() Method with Google`s Ajax Libraries API

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.

Introduction

Naturally, the major benefit in using this API is its capacity for delivering a specified JavaScript framework at a higher speed (source files are usually compressed by default). This can also improve the performance of a client-side application utilizing the interface.

However, it’s also fair to mention one possible down side of this approach. Each time a web application requests a particular JavaScript package by means of this API, Google tracks the event. Some web developers might find this undesirable.

Despite this potential issue, the Google API can be really useful for delivering JavaScript files very quickly, since it allows you to specify, via client-side scripting, whether a specific library must be downloaded compressed or uncompressed. This feature can be completely controlled via the “google.load()” method. Indeed, in the previous article, I explained how to serve the Prototype package from Google’s servers without using compression.

Nonetheless, as I said in the beginning, the Google API supports working with other JavaScript libraries, including jQuery, Dojo and MooTools. Therefore, in this final episode of the series, I’ll be demonstrating how to serve the jQuery framework via this API, this time without using HTTP compression.

Are you ready to tackle the final chapter of this educational journey? Then, start reading now!

{mospagebreak title=Review: delivering the Prototype JavaScript library without compressing its source files}

I will start my explanation of how to serve the jQuery package via the Google API without using compression by reintroducing a hands-on example created in the previous article. It showed the same process with the Prototype library.

The example in the last article illustrated how to build a basic Ajax application that was capable of reading the content of a text file in the server, and theny displaying it on the browser. As I said before, these tasks were performed by means of Prototype, whose source files were served uncompressed.

That being said, here’s how this Ajax application looked originally:


(definition for ‘ajax_file_reader.htm’ file)


<!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 (loads uncompressed source file)

google.load("prototype", "1.4",{uncompressed:true});

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



definition for ‘read_file.php’ file)


<?php

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

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

}

echo $contents;

?>



(definition for ‘data.txt’ 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. These are contents of sample file.


Certainly, I’m not going to spend additional time explaining how the previous Ajax program actually works, since this was covered in depth in preceding tutorials of the series. I would like to remind you, however, of the way the “google.load()” method was instructed to download the Prototype library without using compression.

You’ll understand this process better if you look at the following line of code:


google.load("prototype", "1.4",{uncompressed:true});


Now that you hopefully recalled how to use the Google API for delivering the Prototype package in an uncompressed manner, it’s time to see how this process can be recreated using the jQuery library.

To learn the full details of how this will be achieved, please click on the link below and keep reading. 

{mospagebreak title=Serving the jQuery library without using compression}

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.

{mospagebreak title=Source code for the sample Ajax application}

In the section that you just read, I explained how to develop a primitive Ajax application that uses the Goggle API to download the jQuery library without using compression. Nevertheless, this application would look rather incomplete if I didn’t list the signature of its remaining source files.

So, here they are:


(definition for ‘ajax_file_reader.htm’ file)


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



definition for ‘read_file.php’ file)


<?php

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

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

}

echo $contents;

?>



(definition for ‘data.txt’ 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. These are contents of sample file.


Now that you have at your disposal the entire source code of the above Ajax program, surely you’ll be able to test much more easily how long it takes to run when the jQuery library is delivered compressed and uncompressed from Google’s servers. Whether you decide to employ this Google API or not, one thing is certain: you’ll have fun playing around with it!

Final thoughts

After this long and hopefully instructive journey, we’ve come to the end of the series. As was demonstrated by the code samples included in the different tutorials, learning to use Google’s Ajax Libraries API is really very simple. The whole process is reduced to working with a couple of JavaScript methods and nothing else. Now, it’s up to you to decide whether or not to use this API when working with your preferred JavaScript package.

See you in the next tutorial!

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

chat sex hikayeleri Ensest hikaye