Struts+Ajax 技术(1)

来源：互联网发布：nginx引入端口编辑：程序博客网时间：2024/04/28 00:22

index.jsp

由于篇幅的问题:js跟html写在一直页面上

<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@ page language="java" pageEncoding="GB2312" %>
<html:html locale="true">
<head>
<title><bean:message key="strutsAjax.project.name"/></title>

<html:base/>
</head>

<body>

<script type="text/javascript">
/**
* Ajax.js
*
* Collection of Scripts to allow in page communication from browser to (struts) server
* ie can reload part instead of full page
*
* How to use
* ==========
* 1) Call retrieveURL from the relevant event on the HTML page (e.g. onclick)
* 2) Pass the url to contact (e.g. Struts Action) and the name of the HTML form to post
* 3) When the server responds ...
*   - the script loops through the response , looking for <span id="name">newContent</span>
*    - each <span> tag in the *existing* document will be replaced with newContent
*
* NOTE: <span id="name"> is case sensitive. Name *must* follow the first quote mark and end in a quote
*   Everything after the first '>' mark until </span> is considered content.
*   Empty Sections should be in the format <span id="name"></span>
*/

//global variables
var xmlHttp;
var which;

/**
* Get the contents of the URL via an Ajax call
* url - to get content from (e.g. /struts-ajax/sampleajax.do?ask=COMMAND_NAME_1)
* nodeToOverWrite - when callback is made
* nameOfFormToPost - which form values will be posted up to the server as part
*     of the request (can be null)
*/
function createXMLHttRequest() {
    //Do the Ajax call
    if (window.XMLHttpRequest) { // Non-IE browsers
        xmlHttp = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
}
function startXmlRequest(url, formname) {
    createXMLHttRequest();
    try {
        xmlHttp.open("POST", url, true);
        xmlHttp.onreadystatechange = processStateChange;
        xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xmlHttp.send(getFormAsString(formname));
    } catch (e) {
        alert("Problem Communicating with Server/n" + e);
    }
}
function processStateChange() {
    if (xmlHttp.readyState == 4) {
        if (xmlHttp.status == 200) {
            parseResults();
        } else {
            alert("Problem with server response:/n " + xmlHttp.statusText);
        }
    }
}
function getFormAsString(formName) {
    returnString = "";
    formElements = document.forms[formName].elements;
    for (var i = formElements.length - 1; i >= 0; --i) {
        returnString = returnString + "&" + formElements[i].name + "=" + formElements[i].value;
    }
    return returnString;
}
function parseResults() {
    clearSelectOptions();
    var customer = xmlHttp.responseXML.getElementsByTagName("customer");
    var resultSelect = document.getElementById("results");
    var option = null;
    var id = "";
    var name = "";
    var optionNode = null;
    for (var i = 0; i < customer.length; i++) {
  option = document.createElement("option");
        optionNode = customer[i];
        name = optionNode.getElementsByTagName("name")[0].firstChild.nodeValue;
        id = optionNode.getElementsByTagName("id")[0].firstChild.nodeValue;
        option.appendChild(document.createTextNode(name));
        option.setAttribute("value", id);
        resultSelect.onchange = function() {
            findResultsById('/findcustomer.do');
        };
        resultSelect.appendChild(option);
    }
parseResult();
}
function parseResult()
{
    var results = xmlHttp.responseXML;
    var property = null;
    var hid = "";
    var name = "";
    var age = "";
    var address = "";
    var postcode = "";
    var customer = results.getElementsByTagName("customer");
    if (customer.length > 0) {
        hid = results.documentElement.childNodes[0].childNodes[0].baseName;
        //alert(hid);
        hname = results.documentElement.childNodes[0].childNodes[1].baseName;
        //alert(hname);
        hage = results.documentElement.childNodes[0].childNodes[2].baseName;
        //alert(hage);
        haddress = results.documentElement.childNodes[0].childNodes[3].baseName;
        //alert(haddress);
        hpostcode = results.documentElement.childNodes[0].childNodes[4].baseName;
        //alert(hpostcode);
        //表头
       // addTableRow(hid, hname, hage, haddress, hpostcode);
        for (var i = 0; i < customer.length; i++) {
            property = customer[i];
            //表内容
            id = property.getElementsByTagName("id")[0].firstChild.nodeValue;
            name = property.getElementsByTagName("name")[0].firstChild.nodeValue;
            age = property.getElementsByTagName("age")[0].firstChild.nodeValue;
            telephone = property.getElementsByTagName("telephone")[0].firstChild.nodeValue;
            address = property.getElementsByTagName("address")[0].firstChild.nodeValue;
            postcode = property.getElementsByTagName("postcode")[0].firstChild.nodeValue;
            addTableRow(id, name, age, telephone, address, postcode);
        }
    }
}
function clearSelectOptions() {
    var results = document.getElementById("results");
    while (results.childNodes.length > 0) {
        results.removeChild(results.childNodes[0]);
    }
clearResoults();
}
function clearResoults() {
    var tableBody = document.getElementById("resultBody");
    while (tableBody.childNodes.length > 0) {
        tableBody.removeChild(tableBody.childNodes[0]);
    }
}
function findResultsById(url) {
    createXMLHttRequest();
    var id = "id=" + document.getElementById("results").value;
    //alert(id);
    try {
        xmlHttp.open("POST", url, true);
        xmlHttp.onreadystatechange = parseCustomerResult;
        xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xmlHttp.send(id);
    } catch (e) {
        alert("Problem Communicating with Server/n" + e);
    }
}
function parseCustomerResult() {
    if (xmlHttp.readyState == 4) {
        if (xmlHttp.status == 200) {
            clearResoults();
   var customer = xmlHttp.responseXML.getElementsByTagName("customer");
            parseResult(customer);
        } else {
            alert("Problem with server response:/n " + xmlHttp.statusText);
        }
    }
}
setTimeout("startXmlRequest('/customer.do?ask=COMMAND_NAME_1','customerForm');", 500);

function addTableRow(id, name, age, telephone, address, postcode) {
var row = document.createElement("tr");

var cell = createCellWithText(id);
row.appendChild(cell);

var cell = createCellWithText(name);
row.appendChild(cell);

var cell = createCellWithText(age);
row.appendChild(cell);

var cell = createCellWithText(telephone);
row.appendChild(cell);

var cell = createCellWithText(address);
row.appendChild(cell);

var cell = createCellWithText(postcode);
row.appendChild(cell);

    document.getElementById("resultBody").appendChild(row);
}
function createCellWithText(text) {
    var cell = document.createElement("td");
    var textNode = document.createTextNode(text);
    cell.appendChild(textNode);
cell.setAttribute("align","left");
    return cell;
}
</script>

<html:form action="/customer.do">

<table>
        <tr>
            <td><bean:message key="strutsAjax.page.label.name"/></td>
            
            <td><html:text property="name"/></td>
        </tr>
        <tr>
            <td><bean:message key="strutsAjax.page.label.age"/></td>
            
            <td><html:text property="age"/></td>
        </tr>
        <tr>
            <td><bean:message key="strutsAjax.page.label.telephone"/></td>
            
            <td><html:text property="telephone"/></td>
        </tr>
        <tr>
            <td><bean:message key="strutsAjax.page.label.address"/></td>
            
            <td><html:text property="address"/></td>
        </tr>
        <tr>
            <td><bean:message key="strutsAjax.page.label.postcode"/></td>
            
            <td><html:text property="postcode"/></td>
        </tr>
        <tr>
            <td></td>

</select>
<br><br>
<span style="font-weight:bold;">Results:</span>
<table id="resultsTable" width="75%" border="0">
    <tr>
  <td><bean:message key="strutsAjax.page.label.id"/></td>
  <td><bean:message key="strutsAjax.page.label.name"/></td>
  <td><bean:message key="strutsAjax.page.label.age"/></td>
  <td><bean:message key="strutsAjax.page.label.telephone"/></td>
  <td><bean:message key="strutsAjax.page.label.address"/></td>
  <td><bean:message key="strutsAjax.page.label.postcode"/></td>
</tr>
    <tbody id="resultBody">

</tbody>
</table>
</body>
</html:html>