Before Ajax, the user experience flow when using an application was the following:

Ajax is a combination of technologies that enables the web developer to make asynchronous calls to the server:

Using Ajax, you provide end-users a user experience that feels more like using a desktop application.

For example, with the URL: http://www.company.com/page.html

Browsers check access against the same origin policy when we, for instance:

The .load() method allows you to load returned HTML content from the server into a specified part of the page.

	Note
	You can directly load a static HTML file or a dynamic page that returns HTML content

For example, let us say that you want to load the content of the first <div class="article"> element from an external HTML static file:

$('div.article').eq(0).load('article_content.html'); // 

In the case that the user has disabled JavaScript, or it is not present (as is the case with text-based browsers), we need to provide progressive enhancement using Ajax. We are going to use a technique called Hijax here:

Say we have a main page with a few hyperlinks in the footer pointing to an about page and a contact page:

<div id="footer">
  <ul>
    <li><a href="about.html">About</a></li> 
    <li><a href="contact.html">Contact</a></li> 
  </ul>
</div>

Then let us do some hijax with jQuery:

$(document).ready(function() {
  $('#footer a').click(function(e) {
    var url=$(this).attr('href'); // 
    $('#section').load(url); // 
    e.preventDefault(); // 
  });
});

Using the same .load() method, there is a way to specify which part of the page you want to load using selectors:

$(document).ready(function() {
  $('#footer a[href="about.html"]').click(function(e) {
    var url=$(this).attr('href');
    $('#section').load(url) + " #about"; // 
    e.preventDefault();
  });
  $('#footer a[href="contact.html"]').click(function(e) {
    var url=$(this).attr('href') + " #contact"; // 
    $('#section').load(url);
    e.preventDefault();
  });
});

The syntax to provide here is a combination of the file to load plus the selector to specify which part of the page to load Note You might think that this reduces the bandwidth since we are precise about which part of the page to load using a selector. But this is not the case. The entire page is still loaded and then the selector is run against it.

In a real web application, the data you need to load is generated by server-side scripts operating on a database.

The .load() method accepts a second parameter allowing you to specify query data either as a query string or a JavaScript property object.

Main alternative to XML ⇒ JSON

Using JSONP (JSON with Padding), you can take advantage of the <script> element by specifying the source of the server-side script you want to use.

Let us take the case of the twitter API, which provides support for JSONP. The URL to call would look like this:

http://search.twitter.com/search.json?callback=processTweet&q=food 

jQuery provides a shorthand method that allows you to perform Ajax calls using the JSON format: jQuery.getJSON().

Let us look an example of that:

// Get the term to search
var searchRecipe=$('#txt_recipe_name').val();
// Clean the div tweetsresult
$('#tweetsresult').children().remove();

$.getJSON( "http://search.twitter.com/search.json?callback=?",
    {q: searchRecipe},
    function(data) {
    $.each(data.results, function() {
      $('<div></div>')
        .hide()
        .append('<img src="' + this.profile_image_url + '" />' )
        .append('<span><a href="http://www.twitter.com/'
          + this.from_user + '">' + this.from_user
          + '</a>' + this.text + '</span>')
        .appendTo('#tweetsresult')
        .fadeIn();
    });
});

In case you need more control over your Ajax call, the jQuery.ajax() method is the one to use. It allows you to use:

Below are some of the configuration options that you can use (For more details, visit http://api.jquery.com/jQuery.ajax/):

However, putting those same settings in every Ajax call you make is not convenient.

jQuery comes with the jQuery.ajaxSetup() method that allows you to specify global settings so you do not have to include them explicitly in every jQuery.ajax() call you make.

	Note
	You can override these global settings in any jQuery.ajax() call you make.

These global events are attached to a DOM element where you would show an error message to the user.

$('#ajax_error').ajaxError(function(event,request,settings){
  $(this).html("<b>Error when requesting " + settings.url + "</b>");
});

	Note
	There are also global versions for the success and complete events using .ajaxSuccess() and .ajaxComplete() methods