So AJAX AJAX and AJAX, that’s what we do extensively these days. It saves time, adds dynamics and gives you a feel of using an software application kind of feel. There’re many ways to use AJAX with many libraries. But as you can see this site is for jQuery, we’ll look at the basic or perhaps some advanced AJAX usages.
What do you we need ?
jQuery library (of course)
A tiny php script
Let’s began talking. In jQuery, there are basically 6 types of method to do AJAX operations. These are
- $.ajax(options)
- $.get(url, data, callback)
- $.getJSON(url, data, callback)
- $.getScript(url, callback)
- load(url, data, callback)
- $.post(url, data, callback,
Apart from number 1, all the other methods use $.ajax internally. So that means $.ajax() is our mother function for jQuery AJAX operations. Let’s look at how $.ajax() looks like
$.ajax({ type: "POST", url: "some.php", data: "name=Peter&location=NY", success: function(msg) { alert("Server Response " + msg); } });
That’s pretty it. The type parameter takes “GET” or “POST” which means you can send AJAX requestion as POST or GET (I’d prefer POST always). The rest of the parameters are pretty self explanatory if you take a look at the code again.
Now we’re going to make a small AJAX script that reads the link of hyperlink tags (<a>) and loads the request on some div elements in the document.
First we take a normal html of php document which will look like this
< !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" xml:lang="en-US" lang="en-US"> <head> <title>Ajax link test</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript" src="jquery-1.2.6.min.js"></script> </head> <body> </body></html>
Now let’s add some links to the document. For a better menu kind of look we’ll use a UL>LI and Link . That will look like this
<ul id="nav"> <li><a class="ajax_link" rel="div1" href="response.php?user=john">Load in Div 1</a></li> <li><a class="ajax_link" rel="div2" href="response.php?user=nash">Load in Div 2</a></li> <li><a class="ajax_link" rel="div3" href="response.php?user=stella">Load in Div 3</a></li> <li><a class="ajax_link" rel="div4" href="response.php?user=jason">Load in Div 4</a></li> </ul>
As you can see we have put links in list elements inside an unordered list object. Take a closer look at the <a> tag’s properties. We have href , class and rel attribute which looks nothing different than a normal link. If you see, we have given the rel attribute to some div names namely div1, div2 .. so on. This means we want the response of the href to be loaded into those divs. How to do that ? Let’s add those divs first
<span>DIV -1 </span> <div id="div1" class="content_loader"></div> <span>DIV -2 </span> <div id="div2" class="content_loader"></div> <span>DIV -3 </span> <div id="div3" class="content_loader"></div> <span>DIV -4 </span> <div id="div4" class="content_loader"></div>
And the real part now – we have given the links a class “ajax_link”. We’ll only dynamically add ajax actions only links having a class name called “ajax_link”. Hell, we don’t all the links of a page to have ajax actions, do we?
So, on document load we’d do this.
$(document).ready(function() { $("a.ajax_link").click(function() { $current_link = $(this); $.ajax({ type: "post", url: $current_link.attr("href"), success: function(e) { $("#" + $current_link.attr("rel")).html(e); } }); return false; }); });
Let me explain the script a bit. The document.ready event is a event which is triggered at page load. And then we’re assigning some sort of codes on the click event of the links who have a class “ajax_link”. Doing this $current_link=$(this); allows to have the current link object be available within the callback function. And we have
$(“#”+$current_link.attr(“rel”)).html(e)
which means $(“div_id”).html(server_response) and we have set the url param of the $.ajax function dynamically with url :$current_link.attr(“href”). So now all those means “All those links who have a class “ajax_link” – Add a click event handler — then execute and AJAX request taking the links href poperty and load the response into a div whose id matches the “rel” attribute of the link”. And the return false prevents the link work like normal link 
Wanna see it an action ? Here it goes.
And you can download the source as well.
In the next section of this little tutorial we’ll be using the same thing but with a little bit of comfort.
Applying easier method
Everything remains almost the same. We’ll just change the ajax method here . So instead of writing the whole $.ajax block we can achieve the same thing with the following.
$(document).ready(function(){ $("a.ajax_link").click(function(){ $("#"+$(this).attr("rel")).load($(this).attr("href")); return false; }); });
It’s lot less complicated now, right? The load method loads the ajax content within the element it’s attached to. If $(“#somediv_id”).load(“mypage.php”), it’ll try to load mypage.php ’s content in it. Pretty simple, huh? But i suggest you get used to the main method (shown in the first part).
In the zip file there’s another file called ajax2.php which demonstrates this methos which has the same result.
So, AJAX is not as hard as it sounds, right ? When you become very fluent with AJAX operations, you’ll create magics.
Thanks for reading btw.
Recent Comments