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:

By: Alejandro Gervasio

Poor Best

Rating:

/ 4

January 12, 2009

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

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

<head>

<title>Reading file contents with jQuery library</title>

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>

$(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>

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

Next: Serving jQuery’s source file via Google's API >>