Ajax 简明教程
AJAX - Handling Responses
AJAX 是一种用于在不重新加载或刷新整页的情况下，与 web 服务器异步发送和接收数据的技术。当 AJAX 应用程序从一个网页向服务器发出一个异步请求时，服务器对该请求作出响应并返回被请求的数据，因此，接收和处理服务器的响应称为处理响应。或者我们可以说，处理响应是一个处理服务器返回的数据、对其执行适当的操作并相应地更新网页的过程。
处理响应包括以下几个方面：
Receiving Response − 一旦 AJAX 向服务器发送了请求，客户端 JS 代码便等待服务器响应。当服务器响应该请求时，响应将返回给客户端。
Process Response − 从服务器获取响应后，客户端 JS 会处理预期格式的数据，因为服务器返回的数据采用 JSON、XML 等多种格式，并且还只从响应中提取相关的信息。
Updateding Web application/ web page − 处理响应后，AJAX 回调函数会根据响应动态更新网页或 web 应用程序。这包括修改 HTML 内容、显示错误消息、更新值等等。
Handle Error − 如果该请求遇到错误，那么由于任何请求失败、网络问题等原因，服务器可能会响应一个错误状态。因此，处理响应的过程非常有效地处理错误，并对错误采取适当的措施。
How to handle responses works
按照以下步骤使用 XMLHttpRequest 处理响应：
Step 1 − 使用 XMLHttpRequest() 构造函数创建一个 XMLHttpRequest 对象。使用该对象，你可以轻松地执行 HTTP 请求，并可以异步处理它们的响应。
var qhttp = new XMLHttpRequest();Step 2 − 为 readystatechange 事件定义一个事件处理程序。当 XHR 对象的 readyState 属性的值发生更改时，会触发该事件。
qhttp.onreadystatechange = function() {
if (qhttp.readyState == 4){
if(qhttp.status == 200){
// Display the response
}else{
// Handle the error if occure
}
}
};Step 3 − 使用 HTTP 方法（如 GET、POST 等）和我们要请求的 URL 来打开该请求。
qhttp.open("HTTP Method","your-URL", true);Step 4 − 根据需要设置任何标头。
qhttp.setRequestHeader('Authorization', 'Your-Token');Step 5 − 向服务器发送该请求。
qhttp.send()Example
在以下程序中，我们将处理服务器在给定请求上返回的响应。因此，我们要创建一个名为 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>