jQuery - AJAX method

In this tutorial we will learn about AJAX with jQuery.

AJAX

AJAX or Asynchronous JavaScript and XML allows us to send and receive data to and from a server asynchronously.

X in AJAX

The letter X stands for XML or Extensible Markup Language. But these days developers are using JSON or JavaScript Object Notation to send and receive data.

Most of the APIs that we see online are in JSON format.
At the time of writing this tutorial.

ajax() method

In jQuery we get the ajax() method to make asynchronous calls to the server.

url

The url is the link where we want to send the ajax request.

Example: If we want to send a request to GitHub API to fetch users then we will use the following URL

https://api.github.com/users

Common Methods

Following are the commonly used methods for making AJAX requests.

• GET - fetch data
• POST - create data
• PUT - update data
• DELETE - delete data

To use the methods we set the type or method property.

In the following example we are sending a GET request to an imaginary URL "http://www.example.com/some/example/api".

$.ajax({
  url : "http://www.example.com/some/example/api",
  method : "GET"
});

data

If we want to send some data with the request then we will set the data property.

In the following example we are sending a GET request to an imaginary URL "http://www.example.com/some/example/api" and we are passing a data property with the request.

We are requesting for page number 1 and limiting the number of results per page to 10.

$.ajax({
  url : "http://www.example.com/some/example/api",
  method : "GET"
  data : {
    page : 1,
    pagelimit : 10
  }
});

dataType

This property is used to tell the type of data we are expecting from the server.

In the following example we are expecting a json result from the server.

$.ajax({
  url : "http://www.example.com/some/example/api",
  method : "GET"
  data : {
    page : 1,
    pagelimit : 10
  },
  dataType : "json"
});

Common data types are xml, html, script, json, jsonp, text.

On success

If the request is valid then the server will send a success response. To handle the success response we use the success property. Success property is a function shown below.

In the following example we are making GET request to an imaginary URL "http://www.example.com/some/example/api" and passing some data. On success we are going to handle the result in the success function.

$.ajax({
  url : "http://www.example.com/some/example/api",
  method : "GET"
  data : {
    page : 1,
    pagelimit : 10
  },
  dataType : "json",
  success : function (data) {
    console.log(data);
  }
});

On error

If the request failed then the server will send an error response. To handle the error we use the error property. Error property is a function shown below.

In the following example we are making GET request to an imaginary URL "http://www.example.com/some/example/api" and passing some data. Assuming that an error occured we are going to handle the error in the error function.

$.ajax({
  url : "http://www.example.com/some/example/api",
  method : "GET"
  data : {
    page : 1,
    pagelimit : 10
  },
  dataType : "json",
  success : function (data) {
    console.log(data);
  },
  error : function (jqXHR, textStatus, errorThrown) {
    console.log(jqXHR);
    console.log(textStatus);
    console.log(errorThrown);
  }
});

The jqXHR describes the error type.

The textStatus contains the errors status text like "Timeout".

The errorThrown receives the textual portion of the HTTP error status like "Internal Server Error".