Ajax in Jquery – A Simple Tutorial

Ajax has been appearing all over the web just lately, but the question most people find themselves asking is – what is it?

Ajax stands for Asynchronous Javascript And Xml, sounds scary but its really not. The main concept behind ajax is to reduce the number of times you have to jump from one page to another in order to find information. so basically, if you are on a page and the information you need is on another, ajax allows you to call that information to you, all from the comfort of your current URL.

Now this is a pretty neat party tick, so its no wonder that everyone has begun adopting it. And don’t get me wrong, this is a very cool trick, and if you use it wisely it can vastly improve the usability of your site. Ajax becomes even cooler when you use it with the jquery framework, mainly because it is so simple. All you need is this;

  $.get("test.php", { name: "fred", date: "2pm" },
  function(data){
    alert("Data Loaded: " + data);
  }
);

Lets break it down,  First off this is a GET request hence the $.get() and all were doing here is giving $.get() 3 arguments. The first is the URL which you want the ajax to send your info to. The second is the url parameters you wish to send, so this would look like “http://www.test.php?name=fred&date=2pm”, which makes sense, given were using a GET request. Finally the third argument is the function which calls back the result of the page, (data) being the result and then we are simply echoing the result with a basic javascript alert funciton. To see a working example of this script in action, why not check out my contact page.

If your now itching to try it for yourself ajax dady offers some scripts to try out, or for a more indepth introductory tutorial why not check out Web Designer Wall and give it a go youreslf. However if your not familiar with jquery principles you should definatly take a look at 15 days of jquery. happy coding.