极客教程JavaScript 如何使用HTTP GET或POST进行AJAX调用
我们需要使用JavaScript，和一个AJAX库，如jQuery，Axios，或Fetch API，使用HTTP GET或POST进行AJAX调用。Ajax（Asynchronous JavaScript and XML）通过异步更新内容来创建快速和动态的网页，而无需重新加载整个页面。它使用JavaScript从服务器发送和接收数据，数据的形式可以是XML、JSON或纯文本。本教程将教我们使用HTTP GET或POST进行Ajax调用。
Ajax有两种常见的请求类型。GET和POST。
GET请求
GET请求是用来从服务器上检索数据的。GET请求通常用于从API中检索数据，因为它们不对服务器做任何改变，因此被认为是安全的和可闲置的。
语法
用户可以按照下面的语法，使用javascript 的 ‘ XMLHttpRequest ‘对象来使用GET请求进行Ajax调用。
let xhr = new XMLHttpRequest();
xhr.open("GET", "URL", true);
xhr.send();
这将创建一个新的 “XMLHttpRequest “对象，并向给定的URL打开一个GET请求。最后，xhr.send( ) 方法被用来向服务器发送GET请求。
请注意，你将不得不提供你想要检索数据的API URL。
例子
下面的例子演示了如何用JavaScript发出GET请求，从 https://jsonplaceholder.typicode.com/posts API 中获取数据。该代码使用XMLHttpRequest对象来打开一个GET请求并处理来自服务器的响应。响应数据被解析成一个JSON对象，并使用innerHTML属性在页面上显示前三个帖子的标题。
JSONPlaceholder API是一个免费和开源的API，用于测试和原型设计。你也可以使用任何其他API。
<html>
<body>
<h2><i>GET</i> Method Example</h2>
<h3>Top 3 Blog Posts:</h3>
<div id = "posts"> </div>
<script>
let xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
let data = JSON.parse(xhr.responseText);
let output = "";
for (let i = 0; i < 3; i++) {
output += "<p>" + data[i].title + "</p>";
}
document.getElementById("posts").innerHTML = output;
}
};
xhr.send();
</script>
</body>
</html>
使用XMLHttpRequest对象的POST请求
XMLHttpRequest可以用来进行POST请求，这与GET请求类似，但数据是在请求体中发送的，而不是URL。open方法用来设置请求方法为 “POST “和URL，send方法用来发送数据，onreadystatechange事件用来处理服务器的响应。内容类型和其他标头也可以根据需要进行设置。
语法
用户可以按照下面的语法来使用POST请求进行Ajax调用。
var xhr = new XMLHttpRequest();
xhr.open("POST", "URL", true);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.send(JSON.stringify(postData));
例子
下面的例子演示了一个使用XMLHttpRequest对象的POST请求。我们创建了一个带有两个输入字段的表单，用于输入文章标题和正文，还有一个提交按钮。当提交按钮被点击时，sendPostRequest()函数被调用，它创建一个POST请求到 “https://jsonplaceholder.typicode.com/posts “端点。该函数设置请求头以表明内容类型是JSON，并以JSON格式发送帖子数据。我们还显示成功状态。
<html>
<body>
<h2><i>POST</i> request example</h2>
<input type = "text" id = "title" placeholder = "Enter post title">
<br> <br>
<textarea id = "body" placeholder = "Enter post body"></textarea><br>
<br>
<button onclick = "sendPostRequest()">Submit</button> <br> <br>
<div id = "response" ></div>
<script>
function sendPostRequest() {
var postData = {
title: document.getElementById("title").value,
body: document.getElementById("body").value
};
var xhr = new XMLHttpRequest();
xhr.open("POST", "https://jsonplaceholder.typicode.com/posts", true);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.send(JSON.stringify(postData));
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 201) {
document.getElementById("response").innerHTML = "Post request successful: " + xhr.responseText;
} else {
document.getElementById("response").innerHTML = "Post request failed: " + xhr.responseText;
}
};
}
</script>
</body>
</html>
使用Fetch的POST请求
fetch 是一种现代的网络请求方法。它通过传递URL和一个选项对象作为参数来进行POST请求。选项对象指定请求方法为 “POST”，并将标题 “Content-Type “设为 “application/json”。请求数据在选项对象的body属性中以字符串化的JSON对象形式传递。然后使用.then()方法处理来自服务器的响应，该方法返回响应中的JSON数据。
例子
下面的例子演示了一个使用fetch的POST请求。一个简单的表单向JSON占位符API发送了一个POST请求。在提交时，响应数据被显示在一个HTML pre标签的格式化。
<html>
<body>
<h2>Create New Blog Post:</h2>
<form>
<input type = "text" id = "title" placeholder = "Title" required>
<textarea id = "body" placeholder = "Body" required> </textarea>
<button type = "button" id = "submitBtn"> Submit </button>
</form> <br>
<h2>Response:</h2>
<pre id = "response" ></pre>
<script>
document.getElementById("submitBtn").addEventListener("click", function() {
let title = document.getElementById("title").value;
let body = document.getElementById("body").value;
let data = {
title: title,
body: body
};
fetch("https://jsonplaceholder.typicode.com/posts", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => {
document.getElementById("response").innerHTML = JSON.stringify(
data,
null,
2
);
});
});
</script>
</body>
</html>
我们已经学会了使用JavaScript的XMLHttpRequest对象和使用fetch的不同例子，为Ajax调用使用HTTP GET或POST。