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

Working with the jQuery library - 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

If you grasped how to use Google's API for downloading the Prototype library directly from the search engine's servers, then it’s probable that you’ll find even simpler to utilize the API in question for working with the jQuery framework.

The reason for this is simple: regardless of the library being used, the procedure remains practically the same --- first, use the “google.load()” method for downloading a specific package, and then the “google.setOnLoadCallback()” method is responsible for calling a concrete JavaScript function after the complete web page has been loaded.

You will undoubtedly understand this process better if I provide you with a practical example that shows in detail how to use the API for working with the jQuery library. With that idea in mind, below I rebuilt the Ajax-driven application that you learned in the previous section by using the a local copy of jQuery.

Here’s the corresponding code sample:


<!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</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 language="javascript" src="jquery.js"></script>

<script>

$(document).ready(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</h1>

<p><input type="button" id="btn" value="Read File Now!" /></p>

<div id="filecontents"></div>

</body>

</html>


As I explained a few lines before, the above code sample illustrates how to use the jQuery library to recreate the same file reading Ajax application developed in the preceding section. In simple words, this program is responsible for fetching the contents of a text file, via an Ajax HTTP request, to be displayed later within a selected DIV of the web document.

The PHP script that reads this data from the targeted file is as follows:

<?php

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

trigger_error('Error reading file contents',E_USER_ERROR);

}

echo $contents;

?>


Now that I have listed the PHP scripts that fetch the contents from a text file, called “data.txt,” I will show you how this sample file looks:

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 hopefully understand how each module that comprises this Ajax program works, here’s an additional screen capture that shows the output generated by the application. Take a look, please:



That was pretty simple to accomplish, right? At this point, I have explained how to build, with the jQuery library, a primitive Ajax application that fetches the content from a selected text file, and then displays it on a screen. Of course, as you saw earlier, this particular example uses a local copy of the library, meaning that it’s time to see how the same program can be rebuilt, this time utilizing Google's API.

This process will be discussed in detail in the last section of this article. So please read the next segment.



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