Ajax 简明教程
AJAX - Send Data Objects
在 AJAX 中，我们允许将数据对象作为 HTTP 请求的一部分从客户端发送到 Web 服务器。数据对象是一个包含键值对中的数据的对象。它们通常用 JavaScript 对象表示。所以在 AJAX 中发送数据对象表示我们正在将结构化数据传递给服务器以进一步处理。它可以包含表单输入、用户输入、用户信息或任何其他信息。我们不仅能使用数据对象，还可以使用 AJAX 将文件从系统上传并使用 XMLHttpRequest 发送。
以下为数据对象格式−
var myDataObject = {
"name": "Pinky",
"City": "Pune",
"Age": 23
}现在，若要使用 XMLHttpRequest 发送此数据对象，我们需要使用 stringify() 方法将该对象转换为 JSON 字符串，因为大多数框架都非常轻松、无需任何额外的努力就能支持 JSON 格式。stringify() 方法是 JavaScript 内置函数，用于将对象或值转换为 JSON 字符串。
Example
在以下程序中，我们将使用 XMLHttpRequest 发送数据对象。为此，我们将创建一个 XMLHttpRequest 对象，然后创建一个包含我们想要发送的数据的数据对象。然后，我们使用 stringify() 函数将数据对象转换为 JSON 字符串，并将头部设置为 "application/json" 以便告诉服务器该请求包含 JSON 数据。然后，我们使用 send() 函数发送数据对象，并且响应由回调函数进行处理。
<!DOCTYPE html>
<html>
<body>
<script>
function sendDataObject() {
// Creating XMLHttpRequest object
var qhttp = new XMLHttpRequest();
// Creating data object
var myDataObject = {
"name": "Monika",
"City": "Delhi",
"Age": 32,
"Contact Number": 33333333
}
// Creating call back function
qhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 201) {
document.getElementById("sample").innerHTML = this.responseText;
console.log("Data object Send Successfully")
}
};
// Open the given file
qhttp.open("POST",
"https://jsonplaceholder.typicode.com/todos", true);
// Setting HTTP request header
qhttp.setRequestHeader('Content-type', 'application/json')
// Converting data object to a string
var myData = JSON.stringify(myDataObject)
// Sending the data object to the server
qhttp.send(myData)
}
</script>
<h2>Sending Data object</h2>
<button type="button" onclick="sendDataObject()">Submit</button>
<div id="sample"></div>
</body>
</html>