jQuery AJAX

1. Introduction

To be precise, with AJAX we can load the server data in the background without complete reloading the web page. AJAX stands for Asynchronous JavaScript and XML.

jQuery simplifies the native AJAX call and helps fetching remote server data in the background in the form of HTML, XML or more popularly JSON. AJAX uses HTTP GET and POST methods to fetch the server data. The data that is fetched, can be directly replaced into the existing HTML markup or can be processed accordingly.

2. GET vs POST

  • GET Method
    • To request data from a specified resource.
    • cached data can be returned.
    • Request data is sent in the URI, which is limited to a certain extent.
    • Less secure
  • POST Method
    • To request data from a specified resource.
    • No cached data is returned.
    • Data can be sent in the request body.
    • More secure

In this tutorial, we will be learning about how we can use jQuery AJAX to fetch the remote server data and replace the existing HTML element data with the one that gets returned by AJAX.

3. Sample Demo

We will be testing both success and the failure scenario. For success scenario, we will be hitting the URI (https://fiddle.jshell.net/echo/js/?js=hello%20world!) which returns a valid response. For failure scenario, we will be hitting the URI (https://fiddle.jshell.net/abc.php) which is invalid/does not exist.


We can accordingly use complete() function instead of success()complete() function is called when the request finishes (after success and error callbacks are executed).

4. Success vs Complete method

success() function gets passed with three arguments –

  • responseTxt – contains the resulting content if the call succeeds
  • statusTxt – contains the status of the call
  • xhr – contains the XMLHttpRequest object

complete() function gets passed with two arguments –

  • xhr – contains the XMLHttpRequest object
  • statusTxt – contains the status of the call

statusTxt value can be “success”, “notmodified”, “nocontent”, “error”, “timeout”, “abort”, or “parsererror”

Receive our updates to your inbox

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.