Blog

Ultimate Ajax Guide [jQuery]

Ahmed April 20, 2010 Tutorials 2 Comments

Ajax the most exciting part in jQuery, Ajax the little thing which allow you to request data without reloading the page.. In my opinion Ajax is the most powerful part in JavaScript…

Absolutely if you’re a big fan of web development you may know that Ajax was unknown until the official Gmail launch, When Google revealed the power of the internet.

And i admit jQuery made Ajax easier to use just little steps and you done the job, and you can’t be worry about the jQuery lib file it’s just 200 kb of data, you may have image in your web page larger then this.

$.Ajax

The main Ajax function which allow you to perform an asynchronous HTTP request, and here’s how it works:

$.ajax({

   type: "GET",
   url: "file.ext",
   data: "name=Ahmed",
   success: function(data){
            alert(data);}
 });

Okay now let me explain what i did up there:

Type = request type, POST or GET.

URL = Action file, ext = extension.

data = Data you want to send.

success = what you want to do if the request succeed. data inside the function is the return of the request and it’s text.

data could be represented as variables like this:

data: "name="+name+"&age="+age+"",

Now believe me this is the easy part we just send request but i know some of you want to do stuff while and after sending this request so let’s start do our stuff…

.ajaxStart();

This an event starts just when the ajax request starts and believe me it’s powerful if you want to do loading suff so let’s give a little example:

<div id="load">Loading...</div>
<script>
$("#load").ajaxStart(function(){

    $(this).show();

});
</script>

So what’s is happening up there is, like i said if the Ajax started show this div so this == what is between the brackets and in this case it equals to the “load div”.

but i really want to hide this when the Ajax request is done, and this is why they made the..

.ajaxStop();

Little thing this work if the request succeed or failed so be aware of what you doing. Example:

<div id="load">Loading...</div>
<script>
$("#load").ajaxStop(function(){

    $(this).hide();

});
</script>

Actually i did the same like what i did with the ajaxStart but instead of showing the div i’m hiding it right now.
Now we can do the same thing but just if the request succeed using…

.ajaxSuccess();

Will give you the same example as the ajaxStop:

<div id="load">Loading...</div>
<script>
$("#load").ajaxSuccess(function(){

    $(this).hide();

});
</script>

Now do you want to load page inside you’re page using Ajax? here’s how you can do it…

.load();

The load function mainly used to load external page inside a div or something and here’s a little example on how it work:

$('element').load('url', 'success [optional]');

As you can see you can load the URL and then do success action for example an alert…

<div id='content'></div>
$('#content').load('http://blog.ahmedgeek.com', function(){

    alert('Page loaded!');

});

And here we go i loaded my blog inside a div, this method is even efficteiv with GET requests so i can load php page like that:

$('#content').load('http://localhost/test.php?name=ahmed&age=16');

So as you can see it’s so easy to use. Now to our last method..

.serialize();

Say you want to post all form element how you can do it ?? This is how you can do it using the serialize method and here are some examples on how to use it:

<form id="form">
<input type="checkbox" name="check1" value="1" />
<input type="checkbox" name="check2" value="2" />
<input type="checkbox" name="check3" value="3" />
<input type="text"     name="text1"  value='1'/>
<input type="text"     name="text2"  value='2'/>
<input type="text"     name="text3"  value='3'/>
<input type='submit'   id='sub'      value='submit'/>
</form>

<script>
$("#sub").click(function(){
$.ajax({

   type: "POST",
   url: "file.ext",
   data: $('#form').serialize(),
   success: function(data){
            alert(data);}
 });

 });
</script>

This method is going to post all the form data to the requested page and you can even use it with type set to GET. it’s so simple and nothing that complicated…

So here we go this is the end of the Ultimate Ajax Guide…

I hope you like it, if you have any question you can post it as comment or email me on me@ahmedgeek.com

Regards