AJAX - 处理响应

AJAX 是一种用于异步发送和接收数据到/从 Web 服务器的技术，而无需重新加载或刷新整个页面。当 AJAX 应用程序从网页向服务器发出异步请求时，服务器会响应请求并返回请求的数据，因此接收和处理服务器响应的过程被称为处理响应。或者我们可以说，处理响应是一个处理从服务器返回的数据、对其执行适当的操作并相应地更新网页的过程。

处理响应涵盖以下几点：

接收响应 - 一旦 AJAX 将请求发送到服务器，客户端 JS 代码就会等待服务器响应。当服务器响应请求时，响应将返回到客户端。

处理响应 - 从服务器获取响应后，客户端 JS 会以预期格式处理数据，因为服务器返回的数据有多种格式，例如 JSON、XML 等，并且还会从响应中提取相关信息。

更新 Web 应用程序/网页 - 处理响应后，AJAX 回调函数会根据响应动态更新网页或 Web 应用程序。这包括修改 HTML 内容、显示错误消息、更新值等。

处理错误 - 如果请求遇到错误，则由于任何请求失败、网络问题等原因，服务器可能会以错误状态进行响应。因此，处理响应过程非常有效地处理错误并针对错误采取适当的措施。

如何处理响应

按照以下步骤使用 XMLHttpRequest 处理响应：

步骤 1 - 使用 XMLHttpRequest() 构造函数创建 XMLHttpRequest 对象。使用此对象，您可以轻松地执行 HTTP 请求并异步处理其响应。

var qhttp = new XMLHttpRequest();

步骤 2 - 为 readystatechange 事件定义事件处理程序。每当 XHR 对象的 readyState 属性值发生变化时，此事件就会触发。

qhttp.onreadystatechange = function() {
   if (qhttp.readyState == 4){
      if(qhttp.status == 200){
         // Display the response
      }else{
         // Handle the error if occure
      }
    }
  };

步骤 3 - 使用 HTTP 方法（如 GET、POST 等）和我们要请求的 URL 打开请求。

qhttp.open("HTTP Method","your-URL", true);

步骤 4 - 根据需要设置任何头部信息。

qhttp.setRequestHeader('Authorization', 'Your-Token');

步骤 5 - 将请求发送到服务器。

qhttp.send()

示例

在以下程序中，我们将处理服务器对给定请求返回的响应。为此，我们将创建一个名为 handleResponse() 的 Javascript 函数，该函数处理服务器返回的响应并相应地显示结果。此函数首先创建一个 XMLHttpRequest 对象，然后定义一个“onreadystatechange”事件处理程序来处理请求状态。当请求状态发生变化时，函数会检查请求是否完成（readyState = 4）。如果请求已完成，则函数会检查状态码 = 200。如果状态码为 200，则显示响应。否则，显示错误消息。

<!DOCTYPE html>
<html>
<body>
<script>
   function handleResponse() {
   // Creating XMLHttpRequest object
   var qhttp = new XMLHttpRequest();
   // Creating call back function
   qhttp.onreadystatechange = function() {
      if (qhttp.readyState == 4){
         if(qhttp.status == 200){
            // Display the response
            console.log(qhttp.responseText)
         }else{
            console.log("Found Error: ", qhttp.status)
         }
      }
   };
   // Open the given file
   qhttp.open("GET", "https://jsonplaceholder.typicode.com/todos", true);
   // Sending request to the server 
   qhttp.send()
}
</script>
<h2>Display Data</h2>
<button type="button" onclick="handleResponse()">Submit</button>
<div id="sample"></div>
</body>
</html>

输出

结论

因此，这就是 AJAX 如何处理服务器返回的响应，从而使网页能够在后台异步与服务器通信，而无需刷新整个页面。在下一篇文章中，我们将学习如何在 AJAX 中处理二进制数据。

打印页面