How to use AJAX with jQuery ?

AJAX (Asynchronous JavaScript and XML) is about loading data in the background and display it on the webpage, without reloading the whole page.

Examples of applications using AJAX : Gmail, Google Maps, Youtube, and Facebook tabs.

jQuery provides several methods for AJAX functionality.

With the jQuery AJAX methods, you can request text, HTML, XML, or JSON from a remote server using both HTTP Get and HTTP Post - And you can load the external data directly into the selected HTML elements of your web page.

AJAX load()

Loads data from a server and puts the returned data into the selected element.

Syntax

$(selector).load(URL,data,callback);

data - A set of query string key/value pairs to send along with the request.

callback - Name of a function to be executed after the load() method is completed.

Example file : demo.txt

<h2>jQuery and AJAX is FUN!!!</h2>

<p id="p1">This is some text in a paragraph.</p>

Loads the content of the file "demo.txt" into a specific <div> element.

Example

$("#div1").load("demo.txt");

Also, possible to add a jQuery selector to the URL parameter.

Example 

Loads the content of the element with id="p1", inside the file "demo.txt", into a specific div element

$("#div1").load("demo.txt #p1");

callback - A callback function to run when the load() method is completed.

The callback function can have different parameters :

responseTxt - contains the resulting content if the call succeed

statusTxt - contains the status of the call

xhr - contains the XMLHttpRequest object

Example

Displays an alert box after the load() method completes. If the load() method has succeed, it displays "External content loaded successfully!", and if it fails it displays an error message

$("button").click(function() {

  $("#div1").load("demo.txt", function(responseTxt, statusTxt, xhr) {

    if(statusTxt=="success")

      alert("External content loaded successfully!");

    if(statusTxt=="error")

      alert("Error: " + xhr.status + ": " + xhr.statusText);

  });

});

$.get()

Requests data from the server with an HTTP GET request.

Syntax

$.get(URL,callback);

callback - Name of a function to be executed if the request succeeds.

Example  Retrieve data from a file on the server

$("button").click(function() {

  $.get("demo.asp", function(data,status) {

    alert("Data: " + data + "\nStatus: " + status);

  });

});

The first callback parameter holds the content of the page requested, and the second callback parameter holds the status of the request.

$.post()

Requests data from the server using an HTTP POST request.

Syntax

$.post(URL,data,callback);

data - specifies some data to send along with the request.

callback - Name of a function to be executed if the request succeeds.

Example  Send some data along with the request

$("button").click(function() {

  $.post("demo_post.asp",

  {

    name:"Shaan",

    city:"New Delhi"

  },

  function(data,status) {

    alert("Data: " + data + "\nStatus: " + status);

  });

});

We pass in some data to send along with the request (name and city)

The ASP script in "demo_post.asp" reads the parameters, process them, and return a result.

The third parameter is a callback function. The first callback parameter holds the content of the page requested, and the second callback parameter holds the status of the request.