Question

我已经编写了一些 Ajax MVC 代码，我现在正尝试将其部署到 Google App Engine。代码在 localhost 上的浏览器中运行得非常好，Tomcat 和 Google App Engine。但是，当我将代码部署到 Google Cloud 上的 App Engine 时，我在浏览器（Safari 和 Chrome）中收到了 TypeError。

如果有帮助，浏览器中的错误信息专门指向两个JS函数：

getXmlValues & showXmlCustomerInfo

我在下面添加了 XHTML、JS 和 JSP 代码。还有用于模型 bean 和 web servlet 的 Java 类，如果需要，我可以添加它们，但我假设问题出在表单和 js 之间。

还要指出，js函数已经提供了，所以我没有写。

有人可以帮忙吗？

提前致谢...

XHTML 表单

<head>
  <title>Ajax Lab 2</title>

  <link
     rel="stylesheet"       
     href="resources/css/styles.css"
     type="text/css"/>

</head>
<body>
    <table border="1" bgcolor="gray">
        <tr><th><big></big>Ajax Lab 2, Exercise 1</th></tr>
    </table>
    <p/>

    <fieldset>
        <legend>Push button with inner HTML/JSP update, sending content as XML</legend>
        <form action="#">
            <input type="button" value="Richest Two Customers"
            onclick="xmlCustomerTable('result')"/>
        </form>
        <script
                src="resources/js/ajax_utils.js"
                type="text/javascript"></script>
        <p/>
        <div id="result"></div>
        
    </fieldset>
    <br/>
</body>

Javascript


function xmlCustomerTable(resultRegion) {
    let address = "two-richest-customers";          
    let data = "format=";

    ajaxPost(address, data,                         
        function (request) {
            showXmlCustomerInfo(request, resultRegion)
        });
}

function ajaxPost(address, data, responseHandler) {
    let request = getRequestObject();
    request.onreadystatechange =
        function () { responseHandler(request); };
    request.open("POST", address, true);
    request.setRequestHeader(
        "Content-Type",
        "application/x-www-form-urlencoded");
    request.send(data);
}

function getRequestObject() {
    if (window.XMLHttpRequest) {
        return(new XMLHttpRequest());
    } else if (window.ActiveXObject) {
        return(new ActiveXObject("Microsoft.XMLHTTP"));
    } else {
        return(null);
    }
}

function showXmlCustomerInfo(request, resultRegion) {
    if ((request.readyState == 4) && (request.status == 200)) {
        let xmlDocument = request.responseXML;
        let headings = getXmlValues(xmlDocument, "heading");
        let customers = xmlDocument.getElementsByTagName("customer");
        let rows = new Array(customers.length);
        let subElementNames =
            ["id", "firstName", "lastName", "balance"];
        for (let i = 0; i < customers.length; i++) {
            rows[i] = getElementValues(customers[i], subElementNames);
        }
        let table = getTable(headings, rows);
        htmlInsert(resultRegion, table);
    }
}

function getXmlValues(xmlDocument, xmlElementName) {
    let elementArray =
        xmlDocument.getElementsByTagName(xmlElementName);
    let valueArray = new Array();
    for (let i = 0; i < elementArray.length; i++) {
        valueArray[i] = getBodyContent(elementArray[i]);
    }
    return(valueArray);
}

function getBodyContent(element) {
    element.normalize();
    return(element.childNodes[0].nodeValue);
}

function getElementValues(element, subElementNames) {
    let values = new Array(subElementNames.length);
    for (let i = 0; i < subElementNames.length; i++) {
        let name = subElementNames[i];
        let subElement = element.getElementsByTagName(name)[0];
        values[i] = getBodyContent(subElement);
    }
    return(values);
}

function getTable(headings, rows) {
    let table = "<table border='1' class='ajaxTable'>\n" +
        getTableHeadings(headings) +
        getTableBody(rows) +
        "</table>";
    return(table);
}

function getTableHeadings(headings) {
    let firstRow = "  <tr>";
    for (let i = 0; i < headings.length; i++) {
        firstRow += "<th>" + headings[i] + "</th>";
    }
    firstRow += "</tr>\n";
    return(firstRow);
}

function getTableBody(rows) {
    let body = "";
    for (let i = 0; i < rows.length; i++) {
        body += "  <tr>";
        let row = rows[i];
        for (let j = 0; j < row.length; j++) {
            body += "<td>" + row[j] + "</td>";
        }
        body += "</tr>\n";
    }
    return(body);
}

function htmlInsert(id, htmlData) {
    document.getElementById(id).innerHTML = htmlData;
}

XML JSP

<customers>
  <headings>
    <heading>Customer ID</heading>
    <heading>First Name</heading>
    <heading>Last Name</heading>
    <heading>Balance</heading>
  </headings>
  <customer>
    <id>${customers[0].getCustomerID()}</id>
    <firstName>${customers[0].getFirstName()}</firstName>
    <lastName>${customers[0].getLastName()}</lastName>
    <balance>${customers[0].getFormattedBalance()}</balance>
  </customer>
  <customer>
    <id>${customers[1].getCustomerID()}</id>
    <firstName>${customers[1].getFirstName()}</firstName>
    <lastName>${customers[1].getLastName()}</lastName>
    <balance>${customers[1].getFormattedBalance()}</balance>
  </customer>
</customers>

Answer 1

在 request.responseType = 'document'; request.overrideMimeType('text/xml'); 之后和 request.open 之前设置 request.send。然后使用 const xmlDocument = request.response;

获取数据

TypeError: null is not an object (evaluating 'xmlDocument.getElementsByTagName')

1 个答案: