Ajax简单示例
声明：本文示例代码来自 Brett McLaughlin 关于Ajax的系列文章，是对原文代码片段的总结和再次实现，如果你是ajax新手的话，强烈推荐拜读其文——?https://www.ibm.com/developerworks/cn/web/wa-ajaxintro/
?
示例说明：
填写City和State，异步获取Zip Code，此处Zip Code和State相同。
?
ajax1.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Ajax demo</title><script type="text/javascript">/* Create a new XMLHttpRequest object to talk to the Web server */var xmlHttp = false;try {xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {try {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");} catch (e2) {xmlHttp = false;}}if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {xmlHttp = new XMLHttpRequest();}function callServer() {// Get the city and state from the web formvar city = document.getElementById("city").value;var state = document.getElementById("state").value;// Only go on if there are values for both fieldsif ((city == null) || (city == ""))return;if ((state == null) || (state == ""))return;// Build the URL to connect tovar url = "ajaxDemo?city=" + escape(city) + "&state=" + escape(state);// Open a connection to the serverxmlHttp.open("GET", url, true);// Setup a function for the server to run when it's donexmlHttp.onreadystatechange = updatePage;// Send the requestxmlHttp.send(null);}function updatePage() {if (xmlHttp.readyState == 4) {if (xmlHttp.status == 200) {var response = xmlHttp.responseText;document.getElementById("zipCode").value = response;} else if (xmlHttp.status = 404) {alert("Request URL does not exit!");} else {alert("Error : status code is " + xmlHttp.status);}}}</script></head><body><div align="center"><form><table><tr><td>City: </td><td align="left"><input type="text" name="city" id="city"size="25" onchange="callServer();" /></td></tr><tr><td>State: </td><td align="left"><input type="text" name="state" id="state"size="25" onChange="callServer();" /></td></tr><tr><td>Zip Code: </td><td align="left"><input type="text" name="zipCode" id="zipCode"size="5" /></td></tr></table></form></div></body></html>?
AjaxDemoServlet.java
package org.zzh.ajaxdemo.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;/** * Servlet implementation class AjaxDemoServlet */public class AjaxDemoServlet extends HttpServlet {private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public AjaxDemoServlet() { super(); }/** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {processRequest(request, response);}/** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {}private void processRequest(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {res.setContentType("text/html");PrintWriter out = res.getWriter();String city = req.getParameter("city");String state = req.getParameter("state");if("nanjing".equals(city)) {out.println(state);} else {out.println(state);}out.close();}}??
?
web.xml
<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5"> <display-name>AjaxDemo</display-name> <welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.jsp</welcome-file> <welcome-file>default.html</welcome-file> <welcome-file>default.jsp</welcome-file> </welcome-file-list> <servlet> <description></description> <display-name>AjaxDemoServlet</display-name> <servlet-name>AjaxDemoServlet</servlet-name> <servlet-class>org.zzh.ajaxdemo.servlet.AjaxDemoServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>AjaxDemoServlet</servlet-name> <url-pattern>/ajaxDemo</url-pattern> </servlet-mapping></web-app>
?
示例在Firefox3.6.6 和 IE8中测试正常。