如何在Ajax中做异常处理

这篇文章的目的是演示我们如何处理jQuery AJAX请求中的异常。需要对HTML、CSS和jQuery有一个基本的了解。这可以通过AJAX fail()方法来完成。我们讨论了3种AJAX方法，以便更好地理解当从我们的网络浏览器向特定的服务器发出任何ajax()请求时发生了什么。

AJAX：AJAX是 “Asynchronous JavaScript and XML “的首字母缩写。Ajax组件利用JavaScript的这种能力来发送异步HTTP请求，接收XML响应（以及其他格式），并更新网站的一部分（使用JavaScript），而无需重新加载或刷新整个网站。

我们需要知道的进行AJAX请求的三种方法如下。

当一个HTTP请求成功时，这个方法被调用。

$.ajax(options).done(callback)

当一个HTTP请求失败时，这个方法被调用。

$.ajax(options).fail(callback)

无论HTTP请求是失败还是成功，这个方法都会被调用。

$.ajax(options).always(callback)

例子：我们将看到如何使用AJAX fail()方法来处理HTTP请求中的错误。fail()回调需要3个参数，第一个参数是一个JSON错误对象，第二个参数是以文本格式给出的原因，最后一个参数是HTTP请求抛出的错误。带有不同参数值的整个对象被显示在文本区。输出以JSON格式显示，以显示HTTP请求失败时作为参数收到的值和类型。

输出的格式如下。

"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
}

示例:

<!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>