Mar 26, 2012

JQuery with Ajax for beginners

So, in the post before we could see some of the features of JQuery, today we will show you how to use JQuery for doing Ajax (Asynchronous) calls. Ajax it's not some language or technology, it's a mashup of different things, one of them is the XMLHttpRequest Object, in JQuery we can have this in the easy way.

JQuery give you many functions for making this calls.

JQuery : ajax function

The first one it's using ajax function.
The simplest way to use it it's just $.ajax().
All the code bellow has to be into your <script> </script> tags

Examples :

//Call some content from another page
$.ajax({
  url: "mycontent.html"
}).done(function( html ) {
  $("#target").html(html);
});
 
Explanation:
With $ character we invoke the object JQuery, which give us the methods like ajax(), the parameters or settings are established inside {} characters, in this case we set the url property, which define the content we want to get.
Finally, its the done event, which is triggered when our content its completely loaded, in this case, we use the method html so all the content loaded is writed inside the target element.

This function has more settings and features, if you want to know more you could go to http://api.jquery.com/jQuery.ajax/

JQuery : load function

The firts one it's using ajax function.
The simplest way to use it it's just $.ajax().
All the code bellow has to be into your <script> </script> tags

Examples :

//Call some content from another page
$("#target").load("mycontent.html");

Explanation:
The load function it's similar as before, but reduce the code to write, now we
first choose the element and set the url as a parameter in the function.

This two function, it's just the basic, there's more that i will show you later.

No comments:

Post a Comment