日期:2014-05-18  浏览次数:20799 次

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;
            com