Introduction
Ah, AJAX. Tool for the best, buzzword for the rest.
Most web developers know the word but only some know what it stands for (Asynchronous Javascript And XML); others know the cleaning detergent and use it often. The rest of us simply run through our daily lives knowing something updated the stock ticker but not caring much about what it was. AJAX is a powerful tool, but frankly, it’s a pain to write the code it requires. Different browsers require different code; even different VERSIONS of browsers require different code. That’s why I’ll be introducing you today to two ways to AJAX-ify any site through the copious use of either jQuery or Mootools. Both libraries offer shortcuts to integrate the asynchronous loading of pages into your website without sacrificing usability or your sanity.
For today’s purposes, we’ll be covering jQuery.
jQuery
I’ll be showing you both a simple GET command and a simple POST command (the latter with parameters).
GET
Suppose we have a hello.php. This file simply echos the text “Hello world!”:
<?php echo 'Hello World!'; ?>
This is the page we will be loading remotely. The user, however, will visit index.html:
<html><body><input type="button" value="Click to Say Hello" onclick="hello()" /><input type="text" value="" id="update" /></body></html>
As you can see, we have two input elements: one a button, the other a text. When the button is pressed, the javascript function hello() is called. We’ll do this function next.
Here’s the entire code, to be broken up below:
<script type="text/javascript">function hello() {$.get("hello.php",function(response) {$("#update").val(response);}});</script>
This tutorial will proceed as if you have at least a beginner’s knowledge of javascript. ;P
First of all, we initialize the function. Nothing much to see here; it’s hello(), which is called by the button.
Next, we initiate a GET request to hello.php:
$.get("hello.php",
And then define the function that will receive hello.php’s data:
$.get("hello.php",function(response) {
The variable response will contain hello.php’s data. Now, within the created function, we set the value of the second input (the text box) to the data received from hello.php:
$("#update").val(response);
And we’re done! After clicking the button, wait a second or two and the text box should be populated by the words “Hello World!”.
As you can see, response is a string, and it can be manipulated as such. For example:
$.get("hello.php",function(response) {
response=response.split("Hello ")[1];
$("#update").val(response);
});
The text box will now be populated with “World!” instead of “Hello World!”. On to the post!
POST
You know the drill. Our PHP file, post.php, will look like this:
<?php$fname = $_POST['fname'];$lname = $_POST['lname'];echo "Your full name is $fname $lname. Welcome to the site!";?>
And our index.html file looks like this:
<html><body>First Name: <input type="text" name="fname" id="fname" />Last Name: <input type="text" name="lname" id="lname" /> <input type="button" onclick="post()" value="Send Info" /> <div id="update"></div></body></html>
So now we have 3 input elements and a div element: first name, last name, submit and update div, respectively.
Now we need some JS to control it!
Hopefully you played around with the GET example, so you’ll know most of this, but here we go:
<script type="text/javascript">function post() {$.post("post.php",{ fname:$("#fname").val() , lname:$("#lname").val() },function(response) {$("#update").html(response);}});</script>
Let’s break that up!
$.post("post.php",
Initialize POST…
{ fname: $("#fname").val() , lname:$("#lname").val() },
Important! These are the parameters. You are now sending to the PHP the fact that fname is equal to the value of the first input and lname is equal to the value of the second input in object/JSON format. That’s where the magic happens.
,function(response) {
You know what this does! It initializes the function.
$("#update").html(response);
And then it sets the HTML of the update div to the response.
So if I enter “Choco” as the first name and “Late” as the second name and submit, #update should contain:
Your full name is Choco Late. Welcome to the site!
Congratulations! A working POST.
Conclusion
Obviously, this is not the only thing jQuery can do asynchronously. Not to mention the hundreds of AJAX-based plugins available, from an automatic AJAX form submitter to, well, a bunch of other crap that you could use on your website eventually. And $.get and $.post are simply the tip of the iceburg; there are plenty more functions available!
Enjoy AJAX. It’s quite useful.