Unicode over Ajax not rendering correctly-CodePudding

I have searched for anything related to this, but not found anything directly equivalent, and nothing that has helped. I have a very simple application that fetches data from the server using Ajax (vanilla Javascript) but the Unicode characters are not being transferred correctly. My reasoning is that this is a client side problem, because if I access the Ajax URL directly from a browser address bar, it displays correctly.

I have put a console.log into the Javascript as the first thing it does on receipt of a response, and it is already corrupted at this point. I have added xmlhttp.overrideMimeType('text/plain;charset=utf-8'); but that had no visible effect.

I have created a minimal web page that exhibits the behaviour and put it on my server at http://www.amberel.com/test/unicodetest.htm . Just press the button to execute the Ajax function. The Ajax URL is http://www.amberel.com/test/ajaxunicodetest.htm

This is the complete web page:

<!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>

I would be most grateful for any ideas as to what to try next as I've been working on this for some time.

Many thanks, Andy

CodePudding user response：

You have to write for 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.