Каковы различные этапы и процессы в состояниях готовности AJAX?
В этой статье мы увидим различные этапы и процессы, связанные с состоянием готовности AJAX, а также узнаем их важность и основное использование с помощью иллюстраций. Асинхронный JavaScript и XML (AJAX) можно использовать для связи с сервером без перезагрузки веб-страницы, что помогает улучшить взаимодействие с пользователем. Для интерактивности с серверами можно использовать объекты XMLHTTPRequest , которые выполняют необходимые операции AJAX, и это API-интерфейсы на уровне браузера. Запросы сервера и клиента обрабатываются Javascript.
readyState — это свойство XMLHTTPRequest, которое содержит или может возвращать состояние клиентов XMLHTTPRequest, присутствующих в нем в данный момент. Проще говоря, запрос будет сделан на сервер с использованием объекта XMLHttpRequest, который претерпевает цикл изменений и, в свою очередь, возвращает ответ. XMLHttpRequest отслеживает запрос, сделанный только с помощью readyState, который определяет текущее состояние соответствующего объекта XMLHttpRequest. Свойство onreadystatechange помогает инициировать изменения в readyState. При обработке запроса возможны 4 различных состояния готовности.
Различные состояния готовности AJAX:
- Когда запрос отправляется, при достижении сервера существует множество возможностей его поломки. Если он не разорван и соединение прошло успешно, значит статус станет 1
- Когда запрос получен на сервере, статус readystate изменяется на 2
- При обработке запроса статус меняется на 3.
- Когда запрос завершен, статус меняется на 4.
Различные этапы и процессы в состояниях готовности AJAX:
состояния | Значения readyState | Объяснение |
|---|---|---|
НЕ ОТПРАВЛЕНО | 0 | Запрос еще не инициализирован. Итак, изначально readyState равен 0. |
ОТКРЫТ | 1 | Когда вызывается метод open() , соединение устанавливается, и, следовательно, статус изменяется на 1. |
HEADERS_RECEIVED | 2 | Когда вызывается метод send() , запрос получен, и, следовательно, статус изменяется на 2, а заголовки и статус будут доступны соответственно. |
ЗАГРУЗКА | 3 | Во время обработки запроса будет выполнена загрузка, и responseText будет содержать частичные данные, а статус изменится на 3. |
ВЫПОЛНЕНО | 4 | Когда обработка запроса завершена и он собирается доставить ответ, статус изменяется на 4. |
Во время готовности 4 нам нужно проверить состояние объекта запроса, т.е. когда код состояния равен 200, мы получим успешный ответ.
Другое описание StatusCode (после того, как состояние готовности достигло 4):
Код состояния | Объяснение |
|---|---|
200 | ХОРОШО. Доступность ответа будет идеальной, и мы можем получить весь вывод, используя responseText. |
201 | Запрос выполнен успешно, и новый ресурс создан. |
202-298 | Для каждого кода состояния есть изменения поведения, такие как «Нет содержимого», «Частичное содержимое» и т. д. |
Мы поймем все эти концепции на примерах.
Пример 1. В этом примере мы предполагаем, что собираемся получить документ, доступный на сервере, который может быть изображением или любым текстовым документом, но будет доступен только на том же сервере. Если файл был случайно потерян или поврежден, мы получим другое состояние готовности и не получим ответа.
Здесь мы попытаемся открыть файл « readyStatedetails.jsp », который будет доступен в том же месте, где находится « readyStateExample.html ». Если этот файл был потерян или случайно поврежден, в этом случае он недоступен на сервере.
readyStateExample.html:
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 + ".
Please 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 (ОК), что означает, запрошенная операция не полностью завершена и, следовательно, не может дать ответ.
Примечание. Мы будем предполагать, что у нас нет файла readyStatedetails.jsp на сервере.
Вывод: Поскольку запрошенный файл отсутствует на сервере, статус стал 404, что означает, что он недоступен на сервере.
Пример 2. В этом примере предполагается, что файл readyStatedetails.jsp доступен на сервере. Здесь мы будем использовать тот же файл readyStateExample.html , чтобы наблюдать за появившимися изменениями.
readyStatedetails.jsp:
HTML
<!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> |
Выход:
Вывод: Значения readyState действительно полезны, чтобы узнать о выводе запрошенного ресурса или выводе вызова ajax. Если мы получим ответ, то запрос мог быть выполнен со значением readyState 4 и ответом 200 (ОК), и, следовательно, в выводе мы можем увидеть правильный ответ. Мы также можем решать проблемы с помощью обработки исключений.