Using the jQuery Framework with Google`s Ajax Libraries API - Working with the jQuery library (
Page 3 of 4 )
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.
/ 4 
