`

Ajax案例(1)

 
阅读更多
1.简单的级联下拉框 
<?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>


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();
	}
 }


<%@ 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>

未完待续...
3
顶
1
踩
分享到：
| 信贷管理系统
评论
2 楼 zhengJackson 2012-12-20  
非常好，谢谢分享啊
1 楼 jyjava 2011-12-21  
是个入门的好列子
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Ajax案例（JSP）

    在这个“Ajax案例（JSP）”中，我们将探讨如何在JSP应用中使用Ajax技术。 首先，了解Ajax的核心概念： 1. **异步通信**：Ajax允许浏览器在不阻塞用户操作的情况下向服务器发送请求，这使得页面在后台与服务器进行...

    ajax图书管理案例

    【Ajax图书管理案例详解】 Ajax（Asynchronous JavaScript and XML）技术是现代Web开发中的一个重要工具，它使得网页可以在不刷新整个页面的情况下与服务器进行数据交互，提升了用户体验。在这个"ajax图书管理案例...

    Ajax经典案例开发大全源文件

    Ajax经典案例开发大全源文件Ajax经典案例开发大全源文件Ajax经典案例开发大全源文件Ajax经典案例开发大全源文件Ajax经典案例开发大全源文件Ajax经典案例开发大全源文件Ajax经典案例开发大全源文件Ajax经典案例开发...

    ASP.NET Ajax 案例

    在"ASP.NET AJAX案例"中，我们可以深入学习如何在实际项目中运用这项技术。这通常包括以下几个方面： 1. **UpdatePanel组件**：这是ASP.NET AJAX中最常见的控件，用于实现页面的部分刷新。通过将控件放入...

    ajax经典案例开发大全有几个案例

    **Ajax经典案例开发大全概述** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这种技术通过JavaScript与后台服务器进行异步通信，提升了用户体验，使得...

    Ajax 经典案例开发大全

    在本“Ajax经典案例开发大全”中，我们将深入探讨Ajax的各种应用场景和开发技巧。 一、Ajax基础 1. XMLHttpRequest对象：Ajax的核心是XMLHttpRequest对象，它允许JavaScript在后台与服务器交换数据并更新部分网页...

    prototype-AJAX案例

    在"prototype-AJAX案例"中，你可能会看到这些方法的具体应用，以及如何与服务器进行交互，如何处理返回的数据，以及在成功或失败时如何执行相应的回调函数。通过分析案例代码，你可以深入理解Prototype如何简化AJAX...

    Ajax案例开发.rar

    在"Ajax案例开发.rar"这个压缩包中，很显然包含了一些关于Ajax应用的实例，这些案例可以帮助我们深入理解Ajax的工作原理和实际应用。 首先，我们需要理解Ajax的核心概念。它主要由以下几个关键组件组成： 1. **...

    AJAX案例 链接数据库

    本文将深入探讨如何利用AJAX技术进行数据库操作，包括增加、删除、修改和查询（CRUD操作），并通过一个具体案例来阐述这一过程。 ### AJAX与数据库交互的基本原理 AJAX的核心在于XMLHttpRequest对象，它提供了一种...

    ajax （部分案例使用jquery）实例集锦

    总结，这个"ajax （部分案例使用jquery）实例集锦"提供了丰富的Ajax和jQuery结合的实践应用，帮助开发者深入理解这两者如何协同工作，提高网页的动态性和交互性。通过学习这些实例，你可以更好地掌握Ajax技术，并...

    Ajax经典案例开发大全

    1. **Ajax基础**：Ajax（Asynchronous JavaScript and XML）是一种在不刷新整个页面的情况下与服务器交换数据并更新部分网页的技术。它通过JavaScript实现异步通信，利用XML或JSON格式传输数据，提升了用户体验。 2...

    Ajax 实用案例大全（图书馆光盘资料）

    ### 三、Ajax案例分析 书中的实例可能包括： 1. **动态搜索**：在用户输入关键字时，实时从服务器获取匹配结果，展示在下拉框中。 2. **无刷新分页**：点击分页链接时，仅加载新的内容块，保持当前浏览位置。 3....

    AJAX案例.xls

    AJAX案例基础学习：AJAX案例.xls

    PHP-AJAX实现案例

    在这个"PHP-AJAX实现案例"中，我们将深入探讨如何结合使用这两种技术来创建智能搜索功能。 PHP是一种服务器端的脚本语言，广泛用于网页开发，能够生成动态内容。它与HTML、CSS和JavaScript等前端技术紧密结合，为...

    aspx实现ajax案例

    1. ScriptManager控件：这是ASP.NET AJAX的核心组件，负责引入必要的JavaScript库，使页面支持Ajax功能。在页面中添加ScriptManager控件是启用Ajax的第一步。 2. UpdatePanel控件：UpdatePanel是ASP.NET AJAX中最...

    多个Ajax实例案例

    ### 多个Ajax实例案例分析 #### 概述 本文档将通过一个具体的Ajax实例来深入探讨Ajax在网页中的实际应用。此示例主要聚焦于如何利用jQuery库发起Ajax请求，实现动态数据加载与更新的功能。 #### 核心代码解析 ##...

    Ajax经典案例开发大全.

    Ajax in action是Ajax 非常好的书啊

    基于ajax的应用案例

    1. **实时地图更新**：利用Ajax，用户可以在不刷新整个页面的情况下获取最新的地图信息，例如天气变化、交通状况等动态数据。 2. **地图缩放与平移**：Ajax可以实现无刷新的地图缩放和平移，用户可以顺畅地在不同...

Magicbox
Global site tag (gtag.js) - Google Analytics