Ajax 简明教程
AJAX - Send PUT Requests
PUT 请求用于更新 Web 服务器上的数据。在此请求中，数据在请求正文中发送，并且 Web 服务器会用新数据替换现有数据。如果指定数据不存在，则它会将替换数据作为新记录添加到服务器中。
PUT 请求在以下几方面与 POST 请求有很大不同 −
-
PUT 用于更新现有记录，而 POST 用于向服务器添加新记录。
-
PUT 请求可以被缓存，而 POST 请求不能被缓存。
-
PUT 请求是幂等的，而 POST 请求不是幂等的。
-
PUT 请求作为特定的请求，而 POST 请求作为抽象的请求。
Syntax
open('PUT', url, true)其中，open() 方法接受三个参数：
-
PUT − 它用于更新 Web 服务器上的数据。
-
url − url 表示将在 Web 服务器上打开的文件 url 或位置。
-
true - 对于异步连接，将值设置为 true。或者，对于同步连接，将值设置为 false。此参数的默认值为 true。
How to send PUT Request
若要发送 PUT 请求，我们需要遵循以下步骤−
Step 1 − 创建 XMLHttpRequest 对象。
var variableName = new XMLHttpRequest()Step 2 − 创建 XMLHttpRequest 对象后，我们现在必须定义一个回调函数，该函数将在从 Web 服务器得到响应后触发。
XMLHttpRequestObjectName.onreadystatechange = function(){
// Callback function body
}XMLHttpRequestObjectName.setRequestHeader('Content-type', 'application/json')Step 4 − 使用 setRequestHeader() 设置 HTTP 头部请求。它总是在 open() 方法之后调用，但在 send() 方法之前调用。在此处，content-type 头部设置为 "application/json"，这表示数据将以 JSON 格式发送。
Step 5 − 最后，我们使用 stringify() 方法将 JSON 数据转换为字符串，然后使用 send() 方法将其发送到 Web 服务器以更新服务器上存在的数据。
XMLHttpRequestObjectName.send(JSON.stringify(JSONdata))以下流程图将显示该示例的工作原理−
Example
<!DOCTYPE html>
<html>
<body>
<script>
function updateDoc() {
// Creating XMLHttpRequest object
var uhttp = new XMLHttpRequest();
// Creating call back function
uhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("sample").innerHTML = this.responseText;
console.log("Data update Successfully")
}
};
// Updating the given file
uhttp.open("PUT", "https://jsonplaceholder.typicode.com/todos/21", true);
// Setting HTTP request header
uhttp.setRequestHeader('Content-type', 'application/json')
// Sending the JSON document to the server
uhttp.send(JSON.stringify({
"title": "ApplePie",
"userId": 12,
"id": 32,
"body": "ApplePie is made up of Apple"
}));
}
</script>
<h2>PUT Request</h2>
<button type="button" onclick="updateDoc()">Updating Record</button>
<div id="sample"></div>
</body>
</html>Output
在单击更新按钮后，服务器返回的输出。
在此处，在上述代码中，我们正在更新现有记录，所以为了更新，我们创建了一个 JSON 文档。若要更新数据，我们单击“更新记录”按钮。所以，当我们单击“提交”按钮时，将调用 updateDoc() 函数。该函数创建一个 XMLHttpRequest 对象。然后，调用 XHR 对象的 open() 方法以使用 HTTP PUT 方法和服务器的 URL "https://jsonplaceholder.typicode.com/todos/21" 初始化请求。然后，调用 setRequestHeader() 方法以将请求的内容类型设置为 JSON。之后，调用 send() 函数以将请求连同 JSON 文档一起发送。当服务器收到该请求时，它使用新数据更新所指定的记录。
如果更新成功，那么将使用“就绪状态 = 4（表示请求已完成）”和“状态 = 200（表示成功响应）”调用回调函数。然后，更新的数据将显示在屏幕上。它还会向控制台输出一条消息，表示数据已成功更新。
此处使用 JSON.stringify() 方法将 JSON 文档转换为字符串。这是必需的，因为 XHR 请求只能发送文本数据。
NOTE − 当你使用 PUT 方法时，有必要像 "https://jsonplaceholder.typicode.com/todos/21" 这样在 URL 中指定记录 ID。在此处，我们更新了一个 ID 为 21 的记录。