How to Make an Ajax Call Using the jQuery Ajax Method?

Last updated on August 21, 2022

JavaScript’s popular library jQuery provides ajax() method which sends asynchronous requests. It is a very popular method and if we say that it has been used billions of times it wouldn’t be wrong. It has a few parameters, and some of them have a default value.

Ajax() Method Paramters:

The jQuery’s ajax() method has more than twenty parameters, some of them a default value. Let’s discuss its parameters name functions,

URL:

Ajax has the ability to send requests on a targeted page or URL. By default, it sends requests on the same page.

async:

By default ajax handles requests asynchronously. But it can be changed by adding false as a value. It accepts boolean values.

type:

It sets the request type. It accepts string values (GET or POST) in both upper and lower case.

data:

This is the parameter that provides data to the server through request.

contentType:

It sets the type of data that send to the server. Default value is “application/x-www-form-urlencoded”.

dataType:

This parameter sets the expected type of server response. By default, jQuery analyzes itself.

beforeSend(xhr):

ajax() method runs this function before sending a request to the server. Also, it allows doing something inside this function. If it has return false; it would cancel the ajax request.

success(result,status,xhr):

ajax() method runs success() function when all goes well. It stores the server’s response in the first parameter of this callback function. Also, it shows the status code of the request. Usually, inside this function, developers add different scripts based on the requirement.

error(xhr, status, error):

This is the opposite of the success() function. ajax() method runs it when the request fails. Similarly, it returns the server response through its first parameter and shows the status code of the request.

complete(xhr,status):

In the last, ajax() runs the callback function complete().

cache:

It allows the browser to cache the request. It accepts boolean and by default the value is true. It can prevent the browser to cache the request for HEAD and GET requests by adding false.

Get Started:

Jquery library needs to add into HTML for using the ajax() method. Jquery provides CDN (Content Delivery Network) URL that loads the jquery library fast. Below is the URL where you can find the jquery URL,

https://releases.jquery.com/

The best practice is to use minified jquery URL. Add below jquery minified URL in the HTML page before the body tag closes.

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

Then, open the script tag and add the below code,

<script>
    $(function(){
         // add here your code 
    });
</script>

It allows js code to execute once HTML is rendered. Also, it works the same as $(document).ready();. So add below ajax() method that would make an ajax call to https://reqres.in on page load event.

<script>
    $(function(){

        let JsonArray = {
            "email": "john@coderadvise.com",
            "password": "123456"
        };

        $.ajax({
            cache: false,
            type: "POST",
            data: JsonArray,
            url: "https://reqres.in/api/register",        
            success: function(serverResponse){
                console.log(serverResponse);
            }
        });
    });
</script>

In the above script, we have a JSON array that has an email and password assigned to the let keyword based variable JsonArray. It will be sent to the server by ajax call. In the success call-back function, the response would be displayed in the browser console.

Written by

Ayaz Ali Shah

I am a skilled full-stack developer with extensive experience in creating and deploying large and small-scale applications. My expertise spans front-end and back-end technologies, along with database management and server-side programming.

Share on: