超过 Ajax 的 Unicode 无法正确呈现

Unicode over Ajax not rendering correctly

我搜索了与此相关的任何内容,但没有找到任何直接等效的内容,也没有找到任何帮助。我有一个非常简单的应用程序,它使用 Ajax(vanilla Javascript)从服务器获取数据,但 Unicode 字符未正确传输。我的理由是这是一个客户端问题,因为如果我直接从浏览器地址栏访问 Ajax URL,它会正确显示。

我已经将 console.log 放入 Javascript 中作为它在收到响应时所做的第一件事,此时它已经损坏。我添加了 xmlhttp.overrideMimeType('text/plain;charset=utf-8');但这没有明显的效果。

我创建了一个展示该行为的最小网页,并将其放在我位于 http://www.amberel.com/test/unicodetest.htm 的服务器上。只需按下按钮即可执行 Ajax 功能。 Ajax URL 是 http://www.amberel.com/test/ajaxunicodetest.htm

这是完整的网页:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Ajax UTF-8 test</title>
  <meta name="viewport" id="viewport" content="width=device-width,initial-scale=1">
</head>

<body>

<div id="id-div-main">  
  <p>What it should look like: town=Chaitén</p>  
  <button type="button" onclick="buttonAjaxClick()">Ajax</button>
  <p id="id-p-response"></p>
</div>

</body>

</html>

<script>

function buttonAjaxClick()
{
  try {
    var xmlhttp;
  
    xmlhttp=new XMLHttpRequest();
    xmlhttp.open("GET", "ajaxunicodetest.htm", true);
    // Didn't make any difference
    // xmlhttp.overrideMimeType('text/plain;charset=utf-8');
    xmlhttp.send();
  
    xmlhttp.onreadystatechange=function() {
      if(xmlhttp.readyState == 4) {
        if(xmlhttp.status == 200) {
          console.log(xmlhttp.responseText);
          document.getElementById("id-p-response").innerHTML = "Ajax response: " + xmlhttp.responseText;
        }
        else if(xmlhttp.status == 404) {
          document.getElementById("id-p-response").innerHTML = "ajaxunicodetest.htm not found";
        }
        else {
          document.getElementById("id-p-response").innerHTML = "ajaxunicodetest status: " + xmlhttp.status;
        }
      }
    };
  }
  catch(err) {
    document.getElementById("id-p-response").innerHTML = "ajaxunicodetest: " + err;
  }
}

</script>

对于下一步要尝试的任何想法,我将不胜感激,因为我已经为此工作了一段时间。

非常感谢,安迪

您必须为 overrideMimeType 编写:

xmlhttp.overrideMimeType('text/xml; charset=iso-8859-1');

This answer first was written in comments, but after discussing with @Amberel, it worked for him, and we put it here so others can see it too.