6 Dec

Ajax the easy way with jQuery

Posted by daniel in Ajax | Tags :, , , , , , , , , , , , , , |

To start off, I’d highly recommend learning about Ajax using XMLHttpRequest objects here. To supplement that tutorial, I’ll talk about doing Ajax in a much easier, much shorter way using the jQuery JavaScript Library. Using jQuery for Ajax is much quicker, easier, and less time-consuming.

Like a normal Ajax setup, we’ll need 3 things:

  1. An HTML Page
  2. A JavaScript File
  3. A server side script (In this case, a PHP page again)

We can use the same HTML and PHP pages as in my last example. Those are explained here. In short, the HTML page just contains a link to generate a random number. The PHP page contains the code to provide a random number. What the JavaScript file will do is use Ajax to dynamically load the PHP page into the empty div tag we provide when the link is clicked without refreshing the page.
The code for the HTML page is exactly the same as a non-jQuery Ajax example, except that we also have to load the jQuery Library in our head tag.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

This also requires that jQuery is downloaded and put in the same directory as the HTML file (unless the src attribute is changed). jQuery may be downloaded here. Here’s the full HTML file for this example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
	<title>Ajax PHP</title>
	<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
	<a href="javascript:getRand()">Show Random Number</a>
	<div id="displayarea"></div>
</body>
</html>

And the PHP page(server.php):

<?php
	echo rand();
?>

Now, in my previous example, there was a good bit of JavaScript. With jQuery, we only need one line in the method for simple examples like this.

// When action is called, main logic
function getRand()
{
	$("#displayarea").load("server.php");
}

Now I’ll explain what the does. In jQuery, starting a line with a $ symbol basically tells jQuery that you’d like to use the library. The first part, $(”#displayarea”), selects our displayarea div tag. In jQuery that’s how you do the JavaScript method getElementById. The load method does all the Ajax for us by loading the page and inserting what it retrieves into the div tag we just selected.

By default, such as in the example, the load method will just use GET to load the page. If you supply additional parameters, such as this, a POST will be performed:

// When action is called, main logic
function getRand()
{
	myvar = "hello";
	$("#displayarea").load("server.php", attribute: myvar );
}

That attributes may be accessed in the PHP page via $_POST['attribute']. To supply more than one attribute, you can put the whole 2nd parameter in brackets and seperate each attribute by a comma like this:

// When action is called, main logic
function getRand()
{
	myvar1 = "hello";
	myvar2 = "world";
	$("#displayarea").load("server.php", { attribute1: myvar1, attribute2: myvar2 } );
}

Furthermore, if you’d like to specify if you want it to GET or POST, you may just replace load with the method get or post. Since the load method can take 1, 2, or 3 parameters. The 3rd one would be a callback function. This function would be called when the Ajax is complete whether or not it was successful.
Ajax has many more useful applications, and a listing of all the methods may be found here:
http://docs.jquery.com/Main_Page
This Ajax random number generator can easily be applied to other applications such as a navigation or login form. You may find a working example here and the source code to each file here.

More resources:
http://docs.jquery.com/Tutorials
http://www.ibm.com/developerworks/web/library/wa-jquery1/