js 输出中文显示问号,该如何解决

js 输出中文显示问号
我做得是类似google的自动完成

大概意思是在html的一个文本框输入一个字然后通过ajax传递给后台的servlet servlet通过javabean查询出包含这个字的信息后通过xml传递回html 然后html通过js显示出来

现在的问题是js显示出来的结果都是问号

请帮帮我

html
HTML code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
  <head>
    <title>Ajax Auto Complete</title>
    <!--设置鼠标的样式表-->
    <style type="text/css">
    .mouseOut {
    background: #708090;
    color: #FFFAFA;
    }

    .mouseOver {
    background: #FFFAFA;
    color: #000000;
    }
    </style>
    <script type="text/javascript" charset="GBK">
        var xmlHttp;

        var completeDiv;
        var inputField;
        var nameTable;
        var nameTableBody;

        function createXMLHttpRequest() {
            if (window.ActiveXObject) {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            else if (window.XMLHttpRequest) {
                xmlHttp = new XMLHttpRequest();
            }
        }

        //初始化变量
        function initVars() {
            inputField = document.getElementById("names");//文本框
            nameTable = document.getElementById("name_table");//表
            completeDiv = document.getElementById("popup");//div
            nameTableBody = document.getElementById("name_table_body");//tbody
        }

        function findNames() {
            initVars();//初始化变量
            if (inputField.value.length > 0) {//如果文本框有内容就用Ajax获得数组XML
                createXMLHttpRequest();
                var url = "/test/autocompletesrv?names=" + inputField.value + "&timeStamp=" + new Date().getTime();
                xmlHttp.open("GET", url, true);
                xmlHttp.onreadystatechange = callback;
                xmlHttp.send(null);
            } else {//清空tbody，并将div的style设为不可见
                clearNames();
            }
        }

        function callback() {
            if (xmlHttp.readyState == 4) {
                if (xmlHttp.status == 200) {
                    var name = xmlHttp.responseXML.getElementsByTagName("name")[0].firstChild.data;
                    alert(name);
                    setNames(xmlHttp.responseXML.getElementsByTagName("name"));
                } else if (xmlHttp.status == 204){//清空tbody，并将div的style设为不可见
                    clearNames();
                }
            }
        }

        function setNames(the_names) {
            clearNames();
            var size = the_names.length;
            setOffsets();
            var row, cell, txtNode;
            for (var i = 0; i < size; i++) {
                var nextNode = the_names[i].firstChild.data;
                row = document.createElement("tr");
                cell = document.createElement("td");
                cell.onmouseout = function() {this.className='mouseOver';};
                cell.onmouseover = function() {this.className='mouseOut';};
                cell.setAttribute("bgcolor", "#FFFAFA");
                cell.setAttribute("border", "0");
                cell.onclick = function() { populateName(this); } ;
                txtNode = document.createTextNode(nextNode);
                cell.appendChild(txtNode);
                row.appendChild(cell);
                nameTableBody.appendChild(row);
            }
        }

    //计算样式
        function setOffsets() {
            var end = inputField.offsetWidth;
            var left = calculateOffsetLeft(inputField);
            var top = calculateOffsetTop(inputField) + inputField.offsetHeight;
            completeDiv.style.border = "black 1px solid";
            completeDiv.style.left = left + "px";
            completeDiv.style.top = top + "px";
            nameTable.style.width = end + "px";
        }

        function calculateOffsetLeft(field) {
          return calculateOffset(field, "offsetLeft");
        }

        function calculateOffsetTop(field) {
          return calculateOffset(field, "offsetTop");
        }

        function calculateOffset(field, attr) {
          var offset = 0;
          while(field) {
            offset += field[attr];
            field = field.offsetParent;
          }
          return offset;
        }

        function populateName(cell) {
            inputField.value = cell.firstChild.nodeValue;
            clearNames();
        }

    //清空tbody，并将div的style设为不可见
        function clearNames() {
            var ind = nameTableBody.childNodes.length;
            for (var i = ind - 1; i >= 0 ; i--) {
                 nameTableBody.removeChild(nameTableBody.childNodes[i]);
            }
            completeDiv.style.border = "none";
        }
    </script>
  </head>
  <body>
    <h1>Ajax Auto Complete Example</h1>
    Names: <input type="text" size="20" id="names" onKeyUp="findNames();" style="height:20;"/>
    <div style="position:absolute;" id="popup">
    <table id="name_table" bgcolor="#FFFAFA" border="0" cellspacing="0" cellpadding="0"/>
    <tbody id="name_table_body"></tbody>
    </table>
    </div>
  </body>
</html>
js 输出中文显示问号,该如何解决

相关推荐
