初遇ajax（对快速了解ajax有帮助）
今天第一次接触Ajax，在没有接触Ajax之前感觉Ajax是个特别神秘且难学的大框架，可是一接触才知道，Ajax也不过如此嘛，对于我这么一个做后台的程序员来说，不需要往深研究Ajax，只需知道他的大致轮廓就可以了，Ajax的核心类是XMLHttpRequest。因为Ajax是客户端技术，所以不同客户端的浏览器对Ajax有不同的实现，下面我就分别对IE内核的浏览器和firefox内核的浏览器实现做一个比较，他们的区别不是很大，只是在创建XMLHttpRequest对象时，有小许的不同。在写代码之前，我有必要介绍一下，Ajax并不是一门语言，而是一门技术，他是在JavaScript语言支持的基础上写的Script。
下面我以一个小例子来说明一下Ajax的大致工作流程：
解释：当我输入完邮编后，焦点离开该文本框后，省份和城市将直接显示在下面的文本框中。
index.jsp文件内容如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--> <script> //向服务器端发送请求，并且解析接收到响应报文（Ajax） /*1.获取并创建XMLHttpRequest*/ //声明XMLHttpRequest var xhr; function getZip(){ //创建XMLHttpRequest对象 //IE内核的浏览器（Mathon、IE） if(window.ActiveXObject){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } //其他内核的浏览器(Firefox、NetScape) else if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); } else{ alert("该浏览器不支持Ajax"); } /*2.确定请求报文的基本内容（提交请求的方式、URI）*/ //请求报文提交请求的方式 var method = "GET"; //要访问的web资源的uri var zipcode = document.getElementById("zipCode").value; var uri = "zipServlet?zipcode="+zipcode; //确认通信的方式 //type：表示客户端与服务器端的通信方式，true为异步方式，false为同步方式，默认为异步方式 var type = true; /*3.与要请求的web资源所在的服务器建立连接*/ xhr.open(method,uri,type); /*4.设置回调函数，监听通信过程*/ xhr.onreadystatechange = callback; /*5.向服务器端发送请求*/ //提交请求的方式为GET,或者提交请求的方式为Post但不需要传递参数 xhr.send(null); } //回调函数，写处理响应的代码 function callback(){ //alert(xhr.readyState); //判断是否获取到了完整响应报文 if(xhr.readyState==4){ //判断响应状态码，查看请求是否成功 if(xhr.status==200){ //获取响应报文中的内容 var message = xhr.responseText;//辽宁@沈阳 //拆分字符串 var info = message.split("@");//{辽宁，沈阳} //将内容填充到文本框 document.getElementById("city").value = info[0]; document.getElementById("province").value = info[1]; } } } </script> </head> <body> <center> 输入地区数据<br/> 邮编：<input type="text" id="zipCode" onblur="getZip()"/><br/>省份：<input type="text" id="province"/><br/> 城市：<input type="text" id="city"/><br/> </center> </body></html>?web.xml文件内容如下：
<?xml version="1.0" encoding="UTF-8"?><web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <servlet> <servlet-name>ZipServlet</servlet-name> <servlet-class>ZipServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>ZipServlet</servlet-name> <url-pattern>/zipServlet</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list></web-app>
?ZipServlet文件内容如下：
import java.io.IOException;import java.io.PrintWriter;import java.util.HashMap;import java.util.Map;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class ZipServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { //获取客户端的传递参数 String zipCode = request.getParameter("zipcode"); //根据邮政编码获取省份和城市 Map<String,String> map = new HashMap<String,String>(); map.put("110000", "辽宁@沈阳"); map.put("111000", "辽宁@辽阳"); map.put("114000", "辽宁@鞍山"); String message = map.get(zipCode);//辽宁@沈阳 //生成响应信息 response.setCharacterEncoding("utf-8");//如果此种方法出现问题可以使用response.setContextType("text/html;charset=UTF-8") ; PrintWriter out = response.getWriter(); out.write(message); }public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {this.doGet(request, response);}}?完毕，试试吧，有什么问题可以留言。
?
?