AJAX - 发送数据对象
在 AJAX 中，我们可以将数据对象作为 HTTP 请求的一部分从客户端发送到 Web 服务器。数据对象是一个包含键值对数据的对象，通常以 JavaScript 对象的形式表示。因此，在 AJAX 中发送数据对象意味着我们将结构化数据传递给服务器进行进一步处理。它可以包含表单输入、用户输入、用户信息或其他任何信息。不仅限于数据对象，我们还可以使用 AJAX 和 XMLHttpRequest 从系统中上传并发送文件。
以下是数据对象的格式 −
var myDataObject = {
"name": "Pinky",
"City": "Pune",
"Age": 23
}
现在，要使用 XMLHttpRequest 发送这个数据对象，我们需要使用 stringify() 方法将对象转换为 JSON 字符串，因为大多数框架都很容易支持 JSON 格式，而无需额外努力。stringify() 方法是 JavaScript 的内置函数，用于将对象或值转换为 JSON 字符串。
语法
var myData = JSON.stringify(myDataObject)
这里 myDataObject 是我们想要转换为 JSON 字符串的数据对象。
示例
在下面的程序中，我们将使用 XMLHttpRequest 发送数据对象。为此，我们将创建一个 XMLHttpRequest 对象，然后创建一个包含要发送的数据的数据对象。然后，我们使用 stringify() 函数将数据对象转换为 JSON 字符串，并设置 "application/json" 的 header，以告知服务器请求包含 JSON 数据。然后，我们使用 send() 函数发送数据对象，响应由回调函数处理。
<!DOCTYPE html>
<html>
<body>
<script>
function sendDataObject() {
// 创建 XMLHttpRequest 对象
var qhttp = new XMLHttpRequest();
// 创建数据对象
var myDataObject = {
"name": "Monika",
"City": "Delhi",
"Age": 32,
"Contact Number": 33333333
}
// 创建回调函数
qhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 201) {
document.getElementById("sample").innerHTML = this.responseText;
console.log("数据对象发送成功")
}
};
// 打开指定文件
qhttp.open("POST",
"https://jsonplaceholder.typicode.com/todos", true);
// 设置 HTTP 请求头
qhttp.setRequestHeader('Content-type', 'application/json')
// 将数据对象转换为字符串
var myData = JSON.stringify(myDataObject)
// 将数据对象发送到服务器
qhttp.send(myData)
}
</script>
<h2>发送数据对象</h2>
<button type="button" onclick="sendDataObject()">Submit</button>
<div id="sample"></div>
</body>
</html>
输出
结论
这就是我们如何将数据对象发送到服务器并相应地更新响应。它允许我们在不刷新整个页面的情况下共享信息和更新数据。因此，在下一篇文章中，我们将学习如何解析 XML 对象。