日期:2014-05-16  浏览次数:20740 次

AJAX与Servlet例子
页面代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>HelloServlet.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<script type="text/javascript">
		var outMsg = "";
		var xhr;
		function createXMLHttpRequest(){
			if(window.ActiveXObject){
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}else if(window.XMLHttpRequest){
				xhr = new XMLHttpRequest();
			}
		}
		function createQueryString(){
			var userName = document.getElementById("username").value;
			var queryString = "userName="+userName;
			return queryString;
		}
		function doRequest(){
			createXMLHttpRequest();
			var queryString = "HelloAjaxJava1?";
			queryString = queryString + createQueryString();
			xhr.onreadystatechange = handleStatechange;
			xhr.open("POST",queryString,true);
			xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
			xhr.send(null);
		}
		function handleStatechange(){
			if(xhr.readyState == 4){
				if(xhr.status == 200){
					parseResults();
				}
			}
		}
		function parseResults(){
			responseDiv = document.getElementById("serverResponse");
			if(responseDiv.hasChildNodes()){
				responseDiv.removeChild(responseDiv.childNodes[0]);
			}
			var responseText = document.createTextNode(xhr.responseText);
			responseDiv.appendChild(responseText);
		}
	</script>
  </head>
  <body>
    <form action = "#">
    	password:
    	<input type = "password" id = "username"/>
    	<input type = "reset" value = "reset"/>
    	<input type = "button" id = "submission" value = "submit" onclick="doRequest();"/>
    </form>
    <h2>server response</h2>
    <div id = "serverResponse"></div>
  </body>
</html>


Servlet代码:
import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


public class HelloAjaxJava1 extends HttpServlet {

	/**
	 * Constructor of the object.
	 */
	public HelloAjaxJava1() {
		super();
	}

	/**
	 * Destruction of the servlet. <br>
	 */
	public void destroy() {
		super.destroy(); // Just puts "destroy" string in log
		// Put your code here
	}

	/**
	 * The doGet method of the servlet. <br>
	 *
	 * This method is called when a form has its tag value method equals to get.
	 * 
	 * @param request the request send by the client to the server
	 * @param response the response send by the server to the client
	 * @throws ServletException if an error occurred
	 * @throws IOException if an error occurred
	 */
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html");
		PrintWriter out = response.getWriter();
		out
				.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">");
		out.println("<HTML>");
		out.println("  <HEAD><TITLE>A Servlet</TITLE></HEAD>");
		out.println("  <BODY>");
		out.print("    This is ");
		out.print(this.getClass());
		out.println(", using the GET method");
		out.println("  </BODY>");
		out.println("</HTML>");
		out.flush();
		out.close();
	}

	/**
	 * The doPost method of the servlet. <br>
	 *
	 * This method is called when a form has its tag value method equals to post.
	 * 
	 * @param request the request send by the client to the server
	 * @param response the response send by the server to the client
	 *