初遇ajax（对快速了解ajax有帮助）

ysj5125094

于 2010-11-01 23:08:53 发布

阅读量115

点赞数

分类专栏： ajax 文章标签： Ajax Servlet IE 浏览器 JavaEE

ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

今天第一次接触Ajax，在没有接触Ajax之前感觉Ajax是个特别神秘且难学的大框架，可是一接触才知道，Ajax也不过如此嘛，对于我这么一个做后台的程序员来说，不需要往深研究Ajax，只需知道他的大致轮廓就可以了，Ajax的核心类是XMLHttpRequest。因为Ajax是客户端技术，所以不同客户端的浏览器对Ajax有不同的实现，下面我就分别对IE内核的浏览器和firefox内核的浏览器实现做一个比较，他们的区别不是很大，只是在创建XMLHttpRequest对象时，有小许的不同。在写代码之前，我有必要介绍一下，Ajax并不是一门语言，而是一门技术，他是在JavaScript语言支持的基础上写的Script。

下面我以一个小例子来说明一下Ajax的大致工作流程：

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" οnblur="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);
	}

}

完毕，试试吧，有什么问题可以留言。