XMLHTTP 乱码的解决方法（UTF8,GB2312 编码解码）

2023年5月19日下午6:03 • JavaScript

XMLHTTP 是浏览器内置的一种 HTTP 请求方式，可以通过 JavaScript 来进行调用发送 HTTP 请求，从而得到响应数据。在使用 XMLHTTP 时，常常会出现乱码的现象。有时是因为发送请求的页面本身的编码格式设置错误，使得接收到的数据乱码。也有可能是接收到数据中文字符的编码格式与前端页面编码格式不一致导致。

针对这种情况，我们可以采取一些措施来解决 XMLHTTP 中文乱码问题。下面分别从前端页面编码格式设置、XMLHTTP 编码格式设置、以及后端页面编码格式设置三个方面来讲解具体的解决方法：

前端页面编码格式设置

前端页面编码格式设置是解决 XMLHTTP 乱码的关键步骤，因此它非常重要。通常我们可以设置 meta 标签，来告诉浏览器前端页面的编码格式。

meta 标签有两种方式，一种是在 head 标签内使用 charset 属性，指定编码格式如下所示：

<head>
  <meta charset="UTF-8">
</head>

还有一种方式，在 http 响应头上设置编码格式，如下所示：

res.setHeader('Content-Type','text/html; charset=utf-8');

注意：只有一种方式设置就够了，如果同时使用两种方式可能会出现不可预知的问题。

XMLHTTP 编码格式设置

XMLHTTP 乱码的另一种情况是因为编码格式不一致导致服务端返回的数据是乱码，这时我们需要设置 XMLHTTP 的编码格式以告诉浏览器如何解码响应数据中的消息体。

XMLHTTP 的编码格式设置有两个地方，一个是请求头，一个是响应头。

在请求头上设置编码格式：

let xhr = new XMLHttpRequest();
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');

在响应头上设置编码格式：

header("Content-type:text/html;charset=utf-8");

后端页面编码格式设置

后端返回的数据也需要设置编码格式，确保浏览器能够正确解码和显示返回的数据。

PHP 中设置方法如下：

header("Content-type:text/html;charset=utf-8");
echo "PHP 返回的数据";

Node.js 中设置方法如下：

res.setHeader('Content-Type','text/html; charset=utf-8');
res.write('Node.js 返回的数据');

综上所述，针对 XMLHTTP 乱码，我们需要综合考虑前端页面、XMLHTTP 请求头、以及后端页面的编码格式设置。只有这三个方面都设置正确，才能有效减少或消除乱码的问题。

下面给出两个针对 XMLHTTP 乱码的示例：

示例一：前端页面编码格式设置

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>XMLHTTP UTF-8 编码/解码示例</title>
</head>
<body>
  <button onclick="sendRequest()">发送请求</button>
  <div id="response"></div>

  <script>
    function sendRequest() {
      let xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
          document.querySelector("#response").innerHTML = this.responseText;
        }
      };
      xhr.open("GET","http://localhost:3000/api/getData",true);
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
      xhr.send();
    }
  </script>
</body>
</html>

<?php
  header("Content-type:text/html;charset=utf-8");
  echo "PHP 返回的数据";
?>

示例二：前端页面和后端页面编码格式设置

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>XMLHTTP GB2312 编码/解码示例</title>
</head>
<body>
  <button onclick="sendRequest()">发送请求</button>
  <div id="response"></div>

  <script>
    function sendRequest() {
      let xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function() {
        if (this.readyState === 4 && this.status === 200) {
          document.querySelector("#response").innerHTML = this.responseText;
        }
      };
      xhr.open("GET","http://localhost:3000/api/getData",true);
      xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=gb2312");
      xhr.send();
    }
  </script>
</body>
</html>

<?php
  header("Content-type:text/html;charset=gb2312");
  echo iconv("UTF-8", "gb2312", "PHP 返回的数据");
?>

上面例子就是演示了采取不同设置来验证 XMLHTTP 编码是如何表现的，你可以在这个基础上继续实践。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：XMLHTTP 乱码的解决方法（UTF8,GB2312 编码解码） - Python技术站

XMLHTTP 乱码的解决方法（UTF8,GB2312 编码 解码）