How to do exception handling in Ajax ?

27 Oct, 2021
The purpose of this article is to demonstrate how do we handle the exception in the jQuery AJAX request. A basic understanding of HTML, CSS,  and jQuery is required. This can be done by an AJAX fail() method. We discuss 3 AJAX methods to better understand what’s going on when making any ajax() request from our web browser to a particular server.
AJAX: AJAX is an acronym for “Asynchronous JavaScript and XML”. The Ajax component exploits this ability of JavaScript to send asynchronous HTTP requests, receive the XML response (as well as other formats), and update part of a website (using JavaScript) without reloading or refreshing the entire site.
The three methods that we need to know to make AJAX requests are as follows.
This method is called when an HTTP request is successful.
$.ajax(options).done(callback)
This method is called when an HTTP request fails.
$.ajax(options).fail(callback)
This method is called always, be the HTTP request fails or is successful.
$.ajax(options).always(callback)
Example: We are going to see how to use AJAX fail() methods to handle the error in the HTTP requests. The fail() callback takes 3 parameters where the first parameter is a JSON error object, the second parameter is given a reason in text format and the last parameter is for the error thrown by the HTTP request. The whole object with values of the different parameters is shown in the text area. The output is shown in JSON format to show you the value and type of the value that is received as a  parameter when an HTTP request fails.
The format of the output is as follows.
"firstparam": {
    value: -> the value of the first parameter
    type:  -> the type of the first parameter
},
"secondparam": {
    value: -> value of second parameter
    type:  -> the type of the second parameter
},
" thirdparam": {
    value: -> value of third parameter
    type:  -> the type of the third parameter
}
Example:
HTML
<!DOCTYPE html><html>  <head>    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">    </script>          <style>        .container {            display: flex;            justify-content: center;        }          h1 {            color: green;        }          textarea {            margin-top: 10px;            width: 300px;            height: 300px;        }    </style>          <script type="text/javascript">        $(document).ready(function () {              var obj = "";            $.ajax("gfg.txt").done(function () {                alert("success");            }).fail(function (errorobj, textstatus, error) {                obj = JSON.stringify({                    firstparam: {                        value: errorobj,                        type: typeof (errorobj)                    },                    secondparam: {                        value: textstatus,                        type: typeof (textstatus)                    },                    thirdparam: {                        value: error,                        type: typeof (error)                    }                }, undefined, 1);            }).always(function () {                $('textarea').val(obj);            });        });    </script></head>  <body>    <h1 class="container">        GeeksforGeeks    </h1>    <div class="container">        <textarea></textarea>    </div></body>  </html>
Output:
CSS-Properties
HTML-Questions
jQuery-Questions
Picked
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.