此程序演示了ajax的基本功能:
1 xml结果集返回到页面
2 另一个需要的页面显示到当前的页面
3 一个字符串显示到页面
ajax.js为ajax的核心方法
AjaxAction.java 为后台处理类
ajaxtest.jsp 是显示页面,ajaxresult.jsp是要插入的页面
parseXML.jsp 是处理xml结果集的页面
web.xml 需配置的servlet
ajax.js ---------------------------------------------------------------------------------------------------------
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
// The url's value must pattern this style"servletname?name=value&name=value"
function getRequestBackText( url ) {
createXMLHttpRequest();
var queryString = url+ "&timeStamp=" + new Date().getTime();
xmlHttp.open("GET", queryString, false);
try
{
xmlHttp.send();
}
catch( e )
{
return;
}
return xmlHttp.responseText;
}
// the url value pattern must be serlvet name,and para value must pattern "name=value&name=value......"
function postRequestBackText( url ,para ) {
createXMLHttpRequest();
var queryString = url+"timeStamp=" + new Date().getTime();
xmlHttp.open("POST", queryString, false);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
try
{
xmlHttp.send(para);
}
catch( e )
{
return;
}
return xmlHttp.responseText;
}
// get method return xml.The url's value must pattern this style"servletname?name=value&name=value"
function getRequestBackXML( url )
{
alert(url);
var queryString = url+"&timeStamp=" + new Date().getTime();
xmlHttp.open( "GET", queryString, false );
try
{
xmlHttp.send();
}
catch( e )
{
return;
}
var xmldoc = xmlHttp.responseXML.documentElement;
return xmldoc;
}
/* post method return xml.
*the url value pattern must be serlvet name,and para value must pattern "name=value&name=value......"
*/
function postRequestBackXML( url ,para )
{
alert(url);
var queryString = url+"&timeStamp=" + new Date().getTime();
xmlHttp.open( "GET", url, false );
try
{
xmlHttp.send(para);
}
catch( e )
{
return;
}
var xmldoc = xmlHttp.responseXML.documentElement;
return xmldoc;
}
AjaxAction .java ---------------------------------------------------------------------------------------------------------
package com.eranet.salvation.ajax;
import java.io.*;
import java.net.*;
import javax.servlet.*;
import javax.servlet.http.*;
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.jdom.output.XMLOutputter;
import org.jdom.Document;
import org.jdom.Element;
import org.jdom.Attribute;
public class AjaxAction extends HttpServlet {
private static Log log = LogFactory.getLog(AjaxAction.class);
protected void processRequest(HttpServletRequest request,
HttpServletResponse response, String method)
throws ServletException, IOException {
//Set content type of the response to text/xml
response.setContentType("text/xml");
//Get the user's input
String firstName = request.getParameter("firstName");
String middleName = request.getParameter("middleName");
String birthday = request.getParameter("birthday");
//Create the response text
String responseText = "Hello " + firstName + " " + middleName
+ ". Your birthday is " + birthday + "."
+ " [Method: " + method + "]";
// return value to request page
//Write the response back to the browser
//PrintWriter out = response.getWriter();
//out.println(responseText);
//Close the writer
//out.close();
// return value to other page
request.setAttribute("responseText",responseText);
log.info(request.getAttribute("responseText"));
ServletContext sc = getServletContext();
RequestDispatcher requestdispatcher = sc.getRequestDispatcher("/platform/ajax/ajaxresult.jsp"); //定向的页面
requestdispatcher.forward(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String methodSwith =String.valueOf(request.getParameter("method"));
//Process the request in method processRequest
if("testBackText".equals(methodSwith))
processRequest(request, response, "GET");
else if("testBackXML".equals(methodSwith))
processXml(request, response, "GET");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String methodSwith =String.valueOf(request.getParameter("method"));
//Process the request in method processRequest
if("testBackText".equals(methodSwith))
processRequest(request, response, "POST");
else if("testBackXML".equals(methodSwith))
processXml(request, response, "GET");
}
private void processXml(HttpServletRequest request, HttpServletResponse response, String method)
throws IOException, ServletException {
Element rootLabel = new Element( "states" );
Document doc = new Document( rootLabel );
Element north = new Element("north");
Element south = new Element("south");
Element east = new Element("east");
Element west = new Element("west");
response.setContentType( "text/xml" );
XMLOutputter out = new XMLOutputter( );
for(int i=0;i<4;i++)
{
Element state = new Element("state");
state.setText(i+"beijing");
north.addContent(state);
}
for(int i=0;i<4;i++)
{
Element state = new Element("state");
state.setText(i+"beijing");
south.addContent(state);
}
for(int i=0;i<4;i++)
{
Element state = new Element("state");
state.setText(i+"beijing");
east.addContent(state);
}
for(int i=0;i<4;i++)
{
Element state = new Element("state");
state.setText(i+"beijing");
west.addContent(state);
}
// 加一级子标签
rootLabel.addContent(north);
rootLabel.addContent(south);
rootLabel.addContent(east);
rootLabel.addContent(west);
out.output( doc, response.getOutputStream() );
System.out.println("执行结束!!");
}
}
ajaxtest.jsp ---------------------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sending Request Data Using GET and POST</title>
<script type="text/javascript" language="JavaScript" src="<%=request.getContextPath()%>/js/ajax.js"></script>
<script type="text/javascript">
// post and get method both supported that "ame=value&name=value" way
function createQueryString() {
var firstName = document.getElementById("firstName").value;
var middleName = document.getElementById("middleName").value;
var birthday = document.getElementById("birthday").value;
var queryString = "firstName=" + firstName + "&middleName=" + middleName
+ "&birthday=" + birthday;
return queryString;
}
function doRequestUsingGET() {
var queryString = "<%=request.getContextPath()%>/AjaxAction?method=testBackText&" + createQueryString();
var xmlText = getRequestBackText( queryString );
parseResults(xmlText);
}
function doRequestUsingPOST() {
var url = "<%=request.getContextPath()%>/AjaxAction?method=testBackText&";
var queryString = createQueryString();
var xmlText = postRequestBackText( url , queryString );
parseResults(xmlText);
}
function parseResults( xmltext ) {
var responseDiv = document.getElementById("serverResponse");
responseDiv.innerHTML = xmltext;
}
</script>
</head>
<body>
<h1>Enter your first name, middle name, and birthday:</h1>
<table>
<tbody>
<tr>
<td>First name:</td>
<td><input type="text" id="firstName"/>
</tr>
<tr>
<td>Middle name:</td>
<td><input type="text" id="middleName"/>
</tr>
<tr>
<td>Birthday:</td>
<td><input type="text" id="birthday"/>
</tr>
</tbody>
</table>
<form action="#">
<input type="button" value="Send parameters using GET" οnclick="doRequestUsingGET();"/>
<br/><br/>
<input type="button" value="Send parameters using POST" οnclick="doRequestUsingPOST();"/>
</form>
<br/>
<h2>Server Response:</h2>
<div id="serverResponse"></div>
</body>
</html>
parseXML.jsp ---------------------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Parsing XML Responses with the W3C DOM</title>
<script type="text/javascript" language="JavaScript" src="<%=request.getContextPath()%>/js/ajax.js"></script>
<script type="text/javascript">
var requestType = "";
function startRequest(requestedList) {
var requestType = requestedList;
var url = "<%=request.getContextPath()%>/AjaxAction?method=testBackXML"
createXMLHttpRequest();
var xmlDoc = getRequestBackXML( url );
if(requestType == "north")
{
listNorthStates( xmlDoc );
}
else if(requestType == "all")
{
listAllStates( xmlDoc );
}
}
// get special value from xml document.
function listNorthStates(xmldoc) {
var xmlDoc = xmldoc;
// getElementsByTagName()[0] function that used to get this node element by label's name.
var northNode = xmlDoc.getElementsByTagName("north")[0];
var northStates = northNode.getElementsByTagName("state");
outputList(northStates);
}
// get all value from xml document.
function listAllStates(xmldoc) {
var xmlDoc = xmldoc;
// getElementByTagName function that used to get all spical label by label's name.
var allStates = xmlDoc.getElementsByTagName("state");
outputList( allStates );
}
function outputList(states) {
var out = "";
var currentState = null;
for(var i = 0; i < states.length; i++) {
currentState = states[i];
out = out + "<br>" + currentState.childNodes[0].nodeValue;
}
var responseDiv = document.getElementById("showContent");
responseDiv.innerHTML = out;
}
</script>
</head>
<body>
<h1>Process XML Document of China place</h1>
<br/><br/>
<form action="#">
<input type="button" value="View All Listed States" οnclick="startRequest('all');"/>
<br/><br/>
<input type="button" value="View All Listed Northern States" οnclick="startRequest('north');"/>
</form>
<br>
<div id="showContent">
</div>
</body>
</html>
ajaxresult.jsp ---------------------------------------------------------------------------------------------------------
getRequestText content is another jsp.
<table border="1">
<tr><td>
<input type="text" size="300" value='<%=request.getAttribute("responseText")%>' >
</td>
</tr>
</table>
web.xml ---------------------------------------------------------------------------------------------------------
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<servlet-name>AjaxAction</servlet-name>
<servlet-class>com.eranet.salvation.ajax.AjaxAction</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AjaxAction</servlet-name>
<url-pattern>/AjaxAction</url-pattern>
</servlet-mapping>
</web-app>