ajax
业务逻辑：页面三个文本框，分别要求输入姓，中间名和生日。两个按钮处理GET和POST请求，显示输入的结果。
页面：getAndPostExample.html
<%@ page contentType="text/html; charset=GBK" %>
<html>
<head>
<title>
用GET和POST发送页面请求
</title>
<script type="text/javascript">
//xmlHttpRequest对象
var xmlHttp;
//创建xmlHttpRequest对象
function createXMLHttpRequest(){
if (window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
//发送参数字符串
function createQueryString(){
//得到姓
var firstName = document.getElementById("firstName").value;
//得到中间名
var middleName = document.getElementById("middleName").value;
//得到生日
var birthday = document.getElementById("birthday").value;
//构造请求字符串
var quertString = "firstName=" + firstName + "&middleName=" + middleName
+ "&birthday=" + birthday;
return quertString;
}
//处理GET请求
function doRequestUsingGET(){
createXMLHttpRequest();
var queryString = "GetAndPostExample?";
queryString = queryString + createQueryString() + "&timeStamp=" + new Date().getTime();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET",queryString,true);
xmlHttp.send(null);
}
//处理POST请求
function doRequestUsingPOST(){
createXMLHttpRequest();
var url = "GetAndPostExample?timeStamp=" + new Date().getTime();
var queryString = createQueryString();
xmlHttp.open("POST",url,true);
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
xmlHttp.send(queryString);
}
//回调方法
function handleStateChange(){
if (xmlHttp.readyState == 4){
if (xmlHttp.status == 200){
//解析返回结果
parseResults();
}
}
}
//解析返回结果
function parseResults(){
var responseDiv = document.getElementById("serverResponse");
if (responseDiv.hasChildNodes()){
responseDiv.removeChild(responseDiv.childNodes[0]);
}
//返回文本构造一个文本节点
var responseText = document.createTextNode(xmlHttp.responseText);
responseDiv.appendChild(responseText);
}
</script>
</head>
<body>
<h1>
输入你的姓，中间名，和生日:
</h1>
<table>
<tbody>
<tr>
<td>姓:</td>
<td><input type="text" id="firstName"/>
</tr>
<tr>
<td>中间名:</td>
<td><input type="text" id="middleName"/>
</tr>
<tr>
<td>生日：</td>
<td><input type="text" id="birthday"/>
</tr>
</tbody>
</table>
<form action="#">
<input type="button" value="发送GET请求" />
<br /><br />
<input type="button" value="发送POST请求" />
</form>
<br />
<h2>
服务器响应：
</h2>
<div id="serverResponse">
</div>
</body>
</html>
服务器端处理
GetAndPostExample.java
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
import java.util.*;
public class GetAndPostExample
extends HttpServlet {
private static final String CONTENT_TYPE = "text/html; charset=GBK";
//处理方法
protected void processRequest(HttpServletRequest request,
HttpServletResponse response, String method) throws
ServletException, IOException {
//设置响应内容类别
response.setContentType(CONTENT_TYPE);
//得到参数
String firstName = request.getParameter("firstName");
String middleName = request.getParameter("middleName");
String birthday = request.getParameter("birthday");
//创建响应文本
String responseText = "您好 " + firstName + " " + middleName + ". 您的生日是" + birthday
+ "." + " [传参方法: " + method + "]";
//传回浏览器
PrintWriter out = response.getWriter();
out.println(responseText);
//关闭写出流
out.close();
}
//Initialize global variables
public void init() throws ServletException {
}
//处理GET方法
public void doGet(HttpServletRequest request, HttpServletResponse response) throws
ServletException, IOException {
processRequest(request,response,"GET");
}
//处理POST方法
public void doPost(HttpServletRequest request, HttpServletResponse response) throws
ServletException, IOException {
processRequest(request,response,"POST");
}
//Clean up resources
public void destroy() {
}
}
参考：Ajax基础教程 当笔记吧