通用的AJAX基本功能源码

此程序演示了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>