AJAX准备状态的不同阶段和过程是什么

在这篇文章中，我们将看到AJAX-ready状态所涉及的不同阶段和过程，以及通过插图了解其重要性和基本用法。异步JavaScript和XML(AJAX)可用于与服务器通信，而无需重新加载网页，因此它有助于获得更好的用户体验。为了与服务器互动，可以使用_XMLHTTPRequest对象来执行所需的AJAX操作，这些是浏览器级别的API。服务器和客户端的请求是由Javascript来处理的。

ready是一个XMLHTTPRequest属性，它持有或可以返回当前存在于其中的XMLHTTPRequest客户端的状态。简单地说，一个请求将使用XMLHttpRequest对象向服务器发出，它经历了一个变化周期&反过来，返回响应。XMLHttpRequest只在readyState的帮助下跟踪所发出的请求，它定义了相应的XMLHttpRequest对象的当前状态。”onreadystatechange” 属性有助于触发 readyState 的变化。在处理请求时，有4种不同的准备状态是可能的。

不同的AJAX readyStates：

当一个请求被发送时，在到达服务器时，有很多可能性请求会被中断。如果它没有被破坏，并且连接成功，意味着状态将变成1。
当服务器收到请求时，读取状态变为2。
在处理该请求的同时，状态被改为3。
当请求完成后，状态被改为4。

AJAX就绪状态下的不同阶段和过程：

States	readyState Values	Explanation
UNSENT	0	该请求还没有被初始化。所以最初的readyState是0。
OPENED	1	当一个open()方法被调用时，连接正在建立，因此状态变为1。
HEADERS_RECEIVED	2	当send()方法被调用时，请求被接收，因此状态变为2，头文件和状态将相应地被提供。
LOADING	3	在处理请求的过程中，将进行下载，响应文本携带部分数据，状态将变为3。
DONE	4	当请求处理完毕，即将交付响应时，则状态变为4。

在读取状态4期间，我们需要检查请求对象的状态，即当状态代码为200时，我们将得到一个成功的响应。

不同的StatusCode描述（一旦准备状态来到4）：

Status	解释
200	好的。响应的可用性将是完美的，我们可以通过使用responseText接收整个输出。
201	请求成功，一个新的资源被创建。
202-298	对于每一个状态代码，都有一些行为的变化，如无内容、部分内容等。

我们将通过实例了解所有这些概念。

例子1：在这个例子中，我们假设要检索一个服务器上的文件，它可能是一个图像或任何文本文件，但只在同一个服务器上可用。如果该文件意外地被放错地方或损坏，那么我们将得到一个不同的读取状态，我们也不会得到一个响应。

在这里，我们将尝试打开”readyStatedetails.jsp“文件，该文件将在”readyStateExample.html“所在的同一位置。如果这个文件被误放或意外损坏，在这种情况下，它在服务器上是不可用的。

readyState示例.html:

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Different stages & processes
        in AJAX readyStates
    </title>
</head>
 
<body style="text-align: center;">
    <div id="gfgdemo">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
         
        <h3>onreadystatechange Example Demo</h3>
         
        <button type="button" onclick="loadDoc()">
            Retrieve a document
        </button>
    </div>
 
    <script>
        function loadDoc() {
            const xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function () {
                switch (this.readyState) {
                    case 1:
                        alert(
                            "After establishing connection,"
                            + "readyState has changed to = "
                            + this.readyState);
                        break;
                    case 2:
                        // If send method is not called,
                        //readyState cannot become 2
                        alert("send method is called," +
                            "readyState has changed to = "
                            + this.readyState);
                        break;
                    case 3:
                        // If send method is there, from readyState 2,
                        // It will get changed to 3
                        alert(
                            "Processing the request,"
                            + " readyState has changed to = "
                            + this.readyState);
                    case 4:
                        // Only when readyState = 4,
                        // we will check for status
                        alert("Request has finished processing,"
                            + "readyState has changed to= "
                            + this.readyState
                            + " and let us check for responses");
                        alert("As readyState is reached 4,"
                            + " current status is "
                            + this.status);
                        switch (this.status) {
                            case 200:
                                document.getElementById("gfgdemo")
                                    .innerHTML = this.responseText;
                                break;
                            case 404:
                                alert("Requested readyStatedetails.jsp"
                                    + " file is not available in the server");
                                document.getElementById("gfgdemo").innerHTML =
                                    "Requested readyStatedetails.jsp file is" +
                                    "not available in the server";
                                break;
                            default:
                                // In case of different status, if the
                                // expected resource is not available
                                // in the server/IO issues etc.,
                                alert(
                                    " Unexpected error occurred.."
                                    + this.status
                                    + ".\nPlease try after sometime");
                        }
                        break;
                } // End of readyState
            };
 
            // We are trying to open readyStatedetails.jsp
            // that is available in the same server
            // where this html file present
            xmlhttp.open("GET", "readyStatedetails.jsp");
            xmlhttp.send();
        }
    </script>
</body>
 
</html>

解释：当连接被打开时，readyState被改变为1。当send()方法被调用时，readyState被改变为2，并开始处理请求，readyState被改变为3，并试图完成请求并开始通过readyState 4提供响应。这时，如果所请求的文件在同一服务器上不可用，即使readyState变成了4，那么它的状态也不可能是200（OK），这意味着，所请求的操作没有完全完成，因此不可能产生响应。

注意：我们将假设服务器中没有readyStatedetails.jsp文件。

输出：由于请求的文件不在服务器上，状态变为404，这意味着它在服务器上不可用。

AJAX准备状态的不同阶段和过程是什么？

例子2：在这个例子中，我们假设readyStatedetails.jsp在服务器中可用。在这里，我们将使用同样的readyExample.html文件来观察所出现的变化。

readyStatedetails.jsp:

<!DOCTYPE html>
<html>
 
<head>
    <title>
         JSP page rendering of Ready state values
    </title>
</head>
 
<body style="text-align:center">
    <h1>Ready State Values</h1>
    <table border="1" color="green">
        <tr>
            <th>0-Request Not Initialized</th>
        </tr>
        <tr>
            <th>
                1-When an open method is called,
                connection is getting established
                and hence the status changes to 1
            </th>
        </tr>
        <tr>
            <th>
                2-When a send method is called,
                request is received and hence
                the status changes to 2
            </th>
        </tr>
        <tr>
            <th>
                3-During the time of processing
                the request, the status changes
                to 3
            </th>
        </tr>
        <tr>
            <th>
                4-When the request is finished
                processing and it is about to
                deliver the response, then the
                status changes to 4
            </th>
        </tr>
    </table>
</body>
</html>