js ajax 中文乱码

在 JavaScript 的 AJAX 请求中出现中文乱码问题，通常是由于字符编码不一致导致的。以下是相关的基础概念、原因、解决方法等详细信息：

基础概念

字符编码：字符编码是将字符集中的字符编码为指定集合中某一对象（例如：比特模式、自然数序列等）的过程。常见的字符编码有 UTF-8、GBK 等。
AJAX：Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

原因

服务器端编码设置不正确：服务器返回的数据编码与客户端预期的编码不一致。
客户端请求头设置不正确：客户端发送请求时没有正确设置请求头的字符编码。
HTML 页面编码设置不正确：HTML 页面的 <meta> 标签中设置的字符编码与实际使用的编码不一致。

解决方法

确保服务器端返回正确的编码：
- 在服务器端设置响应头的 Content-Type，明确指定字符编码，例如：
- 在服务器端设置响应头的 Content-Type，明确指定字符编码，例如：
- 如果是使用 Node.js 的 Express 框架，可以这样设置：
- 如果是使用 Node.js 的 Express 框架，可以这样设置：

确保客户端请求头设置正确：
- 在发送 AJAX 请求时，设置请求头的 Content-Type，例如：
- 在发送 AJAX 请求时，设置请求头的 Content-Type，例如：
确保 HTML 页面编码设置正确：
- 在 HTML 页面的 <head> 部分设置 <meta> 标签，明确指定字符编码，例如：
- 在 HTML 页面的 <head> 部分设置 <meta> 标签，明确指定字符编码，例如：

示例代码

以下是一个完整的示例，展示了如何在 AJAX 请求中正确处理中文编码：

HTML 页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX 中文乱码示例</title>
</head>
<body>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', '/your-endpoint', true);
            xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {