jQuery AJAX samples?

JavaScript
1

Hi guys,

Can you provide complete codes/instructions for jQuery AJAX samples?

A link or url to a tutorial or samples regarding jQuery AJAX is much appreciated.

The jQuery site itself on the AJAX category, some samples codes are not really complete.
Sorry I’m noob to jQuery AJAX so I need your guidance.

Thanks in advanced.

2

Hi solidcodes,

First, a word about AJAX.

AJAX stands for Asynchronous JavaScript + XML.
It is not a technology in its own right, rather a term coined in 2005 by Jesse James Garrett, that describes a “new” approach to using a number of existing technologies together.
These technologies include: HTML or XHTML, CSS, JavaScript, The DOM, and most importantly the XMLHttpRequest object.

When these technologies are combined, web applications are able to make quick, incremental updates to the user interface without reloading the entire browser page. This makes web applications faster and more responsive to user actions.

Although the ‘X’ in AJAX stands for XML, JSON is used more than XML nowadays because of its many advantages such as being lighter and a part of JavaScript. However, both JSON and XML are still used for packaging information in AJAX model.

Source: https://developer.mozilla.org/en/docs/AJAX

So, what does an AJAX call look like?
Traditional Ajax calls usually take on the following form:

function httpRequest(id) {
  if (window.XMLHttpRequest) { // code for IE7+, FF, Chrome, Opera, Safari
    http=new XMLHttpRequest();
  }
  else { // code for IE6, IE5
    http=new ActiveXObject("Microsoft.XMLHTTP");
  }
  http.onreadystatechange=function() {
    if (http.readyState==4 && http.status==200) {
      response = http.responseText;
      // do something with response
    }
  }
  dest="servlet.php?id=" + id;
  http.open("GET", dest);
  http.send();
}

If your web application only uses one Ajax call, it’s not that big of a deal to implement. The problem occurs, however, when your web application leverages lots of Ajax calls and you try to break the code apart to make it reusable.

Compare this with an AJAX call in jQuery:

$.Ajax({
  type: "POST",
  url: "some.php",
  data: "name=John&location=Boston",
  success: function(msg){
    alert( "Data Saved: " + msg );
  }
});

jQuery has put all of the properties of Ajax into one simple API. You can control everything including the url, cache, success function, data type, and even synchronization, all from one neat declaration.

Source: http://sixrevisions.com/javascript/the-power-of-jquery-with-ajax/

As further reading I would recommend the following:

http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/
http://tutorialzine.com/2009/09/simple-ajax-website-jquery/
http://developers-blog.org/blog/de/2012/01/19/jQuery-Ajax
http://www.sitepoint.com/ajax-jquery/

I hope that helps.

3

@pullo

thanks dude.