AJAX请求中的数据格式有哪些？

HTML本身并不具备直接发送AJAX请求的能力，但可以通过JavaScript来实现，AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个网页的情况下，与服务器进行异步数据交换的技术，通过使用JavaScript的XMLHttpRequest对象或更现代的fetch API，可以轻松地从服务器获取数据、提交数据到服务器等操作。

AJAX请求的基本步骤

1、创建XMLHttpRequest对象：用于发送和接收HTTP请求/响应。

2、配置请求：设置请求的类型（GET、POST等）、URL以及是否异步执行。

3、发送请求：如果需要发送数据，可以在这一步将数据附加到请求中。

4、处理响应：当服务器返回响应时，根据响应的内容更新页面或进行其他操作。

使用XMLHttpRequest发送GET请求

var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
xhr.open("GET", "https://api.example.com/data", true); // 初始化一个GET请求
xhr.onreadystatechange = function() { // 设置回调函数监听状态变化
    if (xhr.readyState === 4 && xhr.status === 200) { // 请求完成且成功
        console.log(xhr.responseText); // 输出响应内容
    }
};
xhr.send(); // 发送请求

使用fetch API发送GET请求

fetch("https://api.example.com/data")
    .then(response => response.json()) // 解析JSON格式的响应体
    .then(data => console.log(data)) // 处理得到的数据
    .catch(error => console.error('Error:', error)); // 错误处理

使用XMLHttpRequest发送POST请求

var xhr = new XMLHttpRequest();
xhr.open("POST", "https://api.example.com/submit", true);
xhr.setRequestHeader("ContentType", "application/json;charset=UTF8"); // 设置请求头信息
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
var data = JSON.stringify({key1: "value1", key2: "value2"}); // 将要发送的数据转换为字符串
xhr.send(data); // 发送请求

使用fetch API发送POST请求

fetch("https://api.example.com/submit", {
    method: "POST", // 指定请求方法为POST
    headers: {
        "ContentType": "application/json",
    },
    body: JSON.stringify({key1: "value1", key2: "value2"}), // 请求体内容
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

表格对比两种方法的特点

FAQs

Q1: AJAX请求一定都是异步的吗？

A1: 不一定，虽然AJAX通常指的是异步请求，但通过设置XMLHttpRequest对象的async参数为false，可以使请求变为同步，这会导致浏览器在请求完成之前阻塞后续代码的执行，一般不推荐这样做，因为它会影响用户体验。

Q2: fetch API相比XMLHttpRequest有哪些优势？

A2: fetch API提供了更加现代、简洁的API设计，支持Promise，使得异步操作更加直观易懂，fetch API基于最新的Web标准，有更好的浏览器兼容性和未来发展潜力，相比之下，XMLHttpRequest是较老的技术，虽然广泛支持，但在处理复杂逻辑时代码可能显得冗长且难以维护。