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>
<!-- New - Make the Ajax javascript available -->
<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>
<h3><bean:message key="strutsAjax.project.name"/></h3>
<!-- Struts Automatically uses same name as FormBean from struts-config.xml-->
<html:form action="/customer.do">
<!-- Sample Form Values -->
<table>
<tr>
<td><bean:message key="strutsAjax.page.label.name"/></td>
<!-- New Javascript event attached-->
<td><html:text property="name"/></td>
</tr>
<tr>
<td><bean:message key="strutsAjax.page.label.age"/></td>
<!-- New Javascript event attached-->
<td><html:text property="age"/></td>
</tr>
<tr>
<td><bean:message key="strutsAjax.page.label.telephone"/></td>
<!-- New Javascript event attached-->
<td><html:text property="telephone"/></td>
</tr>
<tr>
<td><bean:message key="strutsAjax.page.label.address"/></td>
<!-- New Javascript event attached-->
<td><html:text property="address"/></td>
</tr>
<tr>
<td><bean:message key="strutsAjax.page.label.postcode"/></td>
<!-- New Javascript event attached-->
<td><html:text property="postcode"/></td>
</tr>
<tr>
<td></td>
<!-- New Javascript event attached-->
<td>
</td>
</tr>
</table>
<html:button property="buttonName" οnclick="startXmlRequest('/customer.do?ask=COMMAND_NAME_1','customerForm');">
<bean:message key="strutsAjax.page.button.submit"/></html:button>
</html:form>
<bean:message key="strutsAjax.page.label.select"/>
<select id="results">
</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>