Learn JQuery Step By Step Part 5: AJAX

Now that you’ve played with events, effects and attributes it won’t take you long to learn AJAX, am going to show you how to use the three JQuery AJAX functions I use the most.

Load HTML from a remote file and inject it into the DOM:

load( url, [data], [callback] )

This function comes in handy for when you want to load a page inside another page. I’ve used this for terms of service and frequently asked questions pages. In short, when the user clicks the TOS link or one of the FAQ’s I load the content using this function rather than take the user to another page.

The following code will load a file called "terms-of-service.html" into a <div id="content"> tag when the user clicks a <a id="tos"> tag.

$("a#tos").click(function(){
    $("div#content").load("terms-of-service.html");
});

You can also load a server file whose content depends on the data you send, but I’ll cover sending data to server side scripts in the next functions since they work the same way and have the same syntax.

Load a remote page using an HTTP GET request.:

jQuery.get( url, [data], [callback], [type] )

With get you can retrieve a server script’s output and manipulate it using the call back function on top, the content of the script you get can also depend on the [data] you send. The type refers to the type of output: xml, json or html are just a few examples you can use.

Here is a script that alerts the response of “profile.php” when you send it two parameters, a username and password.

$.get("profile.php",{username:"robert",password:"123456"},function(response){
  alert(response);
});

Notice that the syntax for [data] is

{arraykey: arrayValue, arraykey2: arrayValue2}

This is the PHP file that would take care of handling this data

$username=$_GET['username'];
$password=$_GET['password'];

// imaginary function check() that returns a boolean
if(check())
{
 echo "Welcome ".$username;
}else{
 echo "invalid login";
}

Load a remote page using an HTTP POST request:

jQuery.post( url, [data], [callback], [type] )

The difference between JQuery.post and JQuery.get is that post is faster when you are sending data to the server, I use this function for contact forms for example and the speed between post and get is actually pretty noticeable.

Let’s make a quick subscription form.

We are going to need a textfield with id “email” and a button

<input type="text" id="email" />
<button>Subscribe</button>

When the users clicks the button we will send the data to a PHP file, check that the email is a valid one and respond with an alert.

var useremail;
$("button").click(function(){
  useremail=$("#email").val();
  $.post('subscribe.php',{email:useremail},function(response){
      alert(response);
  });
});

Here’s the PHP script.

<php

$email=$_POST['email'];

// imaginary function isValid that returns a boolean
if(isValid($email)){
 echo "Thanks for subscribing to our newsletter!";
}else{
echo 'invalid email!';
};

JQuery has a more powerful and little more complex AJAX function called “ajax“, check out this function and the full list.