jQuery ajax method

The get, post, load methods discussed earlier are very easy to use and more than cover most of the needs of developers. However, sometimes it becomes necessary to have more control over execution. And so they turn to the method ajax, which allows you to make requests at a lower level. Other methods essentially use the ajax method.

For example, let’s use the ajax method to load html markup into an element on the page:

<button>Download</button>
<div id="result"></div>
<script type="text/javascript">
$(function(){
    $('button').click(function(){
        $.ajax('ajax.php', {success: function(data){
                $('#result').html(data);
            }
        });
    });
});
</script>

The ajax.php resource on the server side let it returns some HTML markup in response.

In this case, we specify two parameters: the address of the request and the parameter success, which accepts a function that processes the response from the server.

We could do the same thing with both the load method and the get method. But the variety of parameters of the ajax method allows you to customize the request in more detail.

At the output, the ajax method, like other methods, returns an object jqXHRassociated with the current request.

The method ajax can take the following forms: ajax(url, options) and ajax(options). The parameter options represent a javascript object in which we specify the query options we need in the form of key-value pairs. So, in the above example, we used the option success. The following are some of the options we can use in the ajax method:

• url: address of the resource to which the request is made. Data type: string
• async: Indicates if the request is asynchronous. Data type: boolean value. The default value is true. If the value is false, then the request is sent as synchronous
• dataType: The type of data received from the server. Data type: string.
• Can take the following values: html, xml, json, jsonp, text,script
• cache: Indicates whether the response will be cached by the web browser. Data type: boolean value. Default is true.

And false by default for requests that have a parameter dataTypevalue of ‘script’ or ‘jsonp’

• context: An element that represents the data context for callback functions. For example:

$.ajax({
url: "ajax.php",
context: document.body
});

• type: Indicates the type of request. Typically ‘GET’ or ‘POST’. Data type: string. Default ‘GET’
• data: Data sent along with the request to the server. Data type: string or javascript object
• timeout: time in milliseconds to wait for a response to a request
• global: Specifies whether global ajax events can be fired. Data type: boolean value. The default is true, i.e. calling global events is allowed.
• isModified: allows you to check the header of the response Last-Modified. Data type: boolean value. The default is false, meaning this header is not checked. If true, the header is checked. And the data is requested if it has changed since the last data request. If the data has not been changed, then in the success function handler the data parameter will have the value undefined
• password: The password required if the request requires authentication. Data type: string
• username: username or login required if the request requires authentication. Data type: string
• dataFilter: Raw data filtering function. It takes two parameters: function(data, type). The data parameter represents the data that came from the server, and type is the data type. At the output, the function should return the filtered data
• success: The function to be called if the request succeeds. It can take three parameters: function(data, textStatus, jqXHR). The data parameter represents the data that came from the server. The textStatus parameter passes the status code. The third parameter represents the jqXHR object associated with the request.
• error: The function to be called if the status code reports an error. It can take three parameters:function(jqXHR, textStatus, errorThrown)
• complete: a function that is called after the request is completed. It can take two parameters: function(jqXHR, textStatus). The textStatus parameter tells us whether the request was successful or failed.
• beforeSend: a function that fires before the request is sent. It takes two parameters: function(jqXHR, settings). The settings parameter contains an object that stores some additional query settings. If this function returns false, then the request is canceled
• xhr: function to create an object XMLHttpRequest

Of course, it is not necessary to use all the parameters, the main thing to keep in mind is that by combining sets of parameters, we can make the ajax request more suitable for our requirements.

Serializing form data and POST requests

We have already looked at sending GET requests above, now let’s see how we can send POST requests using the ajax method.

On the server side, let’s have the simplest processing of authorization data:

<?php
    $login=$_POST['login'];
    $pass=$_POST['password'];
    if($login=="1111" && $pass=="2222"){
        echo "Authorization was successful";
    }
    else{
        echo "Invalid username or password";
    }
?>

Let’s create a form on the web page and set the parameters for the ajax method:

<form action="ajax.php" id="loginForm">
    <input type="text" name="login" placeholder="Login" /><br><br>
    <input type="text" name="password" placeholder="Password" /><br><br>
    <input type="submit" value="Sign in" />
</form>
<div id="result"></div>
<script type="text/javascript">
$(function(){
    $("#loginForm").submit(function(event) {
        event.preventDefault();
        $.ajax({    
            url: $("#loginForm").attr('action'),
            data: $("#loginForm").serialize(),
            type: 'POST',
            success: function(data){
                    $('#result').html(data);
            }
        });
    });
});
</script>