Ajax案例(1)

来源：互联网发布：大数据技术基础知识编辑：程序博客网时间：2024/06/14 16:20

原文地址：http://xiongjiajia.iteye.com/blog/1319245

1.简单的级联下拉框

Xml代码  
<?xml version="1.0" encoding="UTF-8"?>  
<web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="2.5" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee   http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">  
  <servlet>  
    <servlet-name>SelectCityServlet</servlet-name>  
    <servlet-class>com.demo.servlet.SelectCityServlet</servlet-class>  
  </servlet>  
  <servlet-mapping>  
    <servlet-name>SelectCityServlet</servlet-name>  
    <url-pattern>/servlet/SelectCityServlet</url-pattern>  
  </servlet-mapping>  
  <welcome-file-list>  
    <welcome-file>index.jsp</welcome-file>  
  </welcome-file-list>  
</web-app>  

Java代码  
package com.demo.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 SelectCityServlet extends HttpServlet {  
     public SelectCityServlet(){super();}  
     public void destory(){super.destroy();}  
    @Override  
    protected void doGet(HttpServletRequest request, HttpServletResponse response)  
            throws ServletException, IOException {  
        // TODO Auto-generated method stub  
        response.setContentType("text/xml");  
        response.setHeader("Cache-Control", "no-cache");  
        response.setCharacterEncoding("UTF-8");  
        String state=request.getParameter("state");  
        StringBuffer buffer=new StringBuffer("<state>");  
        if("hn".equals(state)){  
            buffer.append("<city>郑州</city><city>洛阳</city>");  
        }else if("hb".equals(state)){  
            buffer.append("<city>武汉</city><city>荆州</city><city>黄冈</city>");  
        }  
        buffer.append("</state>");  
        PrintWriter out=response.getWriter();  
        out.write(buffer.toString());  
        out.close();  
    }  
 }  

Html代码  
<%@ 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>  
 <script type="text/javascript">  
 function getResult(stateVal) {  
     　　var url = "servlet/SelectCityServlet?state="+stateVal;   
     　　if (window.XMLHttpRequest) {   
             　　req = new XMLHttpRequest();   
     　　}else if (window.ActiveXObject) {   
             　　req = new ActiveXObject("Microsoft.XMLHTTP");   
     　　}   
     　　if(req){   
             　　req.open("GET",url, true);   
             　　req.onreadystatechange = complete;   
             　　req.send(null);   
     　　}   
 }   
 function complete(){  
     　　if (req.readyState == 4) {   
             　　if (req.status == 200) {   
                     　　var city = req.responseXML.getElementsByTagName("city");   
                     　　file://alert(city.length);  
                     　　var str=new Array();  
                     　　for(var i=0;i<city.length;i++){  
                             　　str[i]=city[i].firstChild.data;  
                     　　}  
                     　　file://alert(document.getElementById("city"));  
                     　　buildSelect(str,document.getElementById("city"));  
             　　}  
     　　}  
 }  
 function buildSelect(str,sel) {  
     　　sel.options.length=0;  
     　　for(var i=0;i<str.length;i++) {  
             　　sel.options[sel.options.length]=new Option(str[i],str[i])  
     　　}  
 }  
 </script>  
</head>  
 <body>  
 <select name="state" onChange="getResult(this.value)">  
     　　<option value="">Select</option>  
     　　<option value="hn">河南</option>  
     　　<option value="hb">湖北</option>  
 </select>  
 <select id="city">  
 　　<option value="">CITY</option>  
 </select>  
</body>  
</html>  