Using the jQuery Framework with Google`s Ajax Libraries API - Review: downloading a JavaScript library via the Google API (
Page 2 of 4 )
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.
/ 4 
