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

Review: downloading a JavaScript library via the Google 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

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.



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