web.xml
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<servlet-name>SelectCityServlet</servlet-name>
<servlet-class>com.stephen.servlet.SelectCityServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>SelectCityServlet</servlet-name>
<url-pattern>/servlet/SelectCityServlet</url-pattern>
</servlet-mapping>
</web-app>
ajax.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ 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>
<title>MyHtml.html</title>
<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">-->
</head>
<script type="text/javascript">
function getResult(stateVal) {
var url = "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>
<body>
<select name="state" onChange="getResult(this.value)">
<option value="">Select</option>
<option value="zj">ZEHJIANG</option>
<option value="zs">JIANGSU</option>
</select>
<select id="city">
<option value="">CITY</option>
</select>
</body>
</html>
SelectCityServlet.java
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;
/**
* @author Administrator
*
* TODO To change the template for this generated type comment go to
* Window - Preferences - Java - Code Style - Code Templates
*/
public class SelectCityServlet extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 1L;
public SelectCityServlet() {
super();
}
public void destroy() {
super.destroy();
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
String state = request.getParameter("state");
StringBuffer sb = new StringBuffer("<state>");
if ("zj".equals(state)) {
sb.append("<city>hangzhou</city><city>huzhou</city>");
} else if ("zs".equals(state)) {
sb.append("<city>nanjing</city><city>yangzhou</city><city>suzhou</city>");
}
sb.append("</state>");
PrintWriter out = response.getWriter();
out.write(sb.toString());
out.close();
}
}
这个例子是首先页面出现两个下拉框,然后选择了左边下拉框的省份就可以加载显示右边的城市。
分享到：
相关推荐
msajax简单例子msajax简单例子msajax简单例子msajax简单例子msajax简单例子msajax简单例子msajax简单例子msajax简单例子msajax简单例子msajax简单例子msajax简单例子msajax简单例子msajax简单例子
总的来说，这个简单的Ajax例子展示了如何通过JavaScript与服务器进行异步通信，以及如何将返回的数据动态地更新到页面上。对于初学者来说，理解这个基本流程是学习Ajax的关键。随着深入学习，你还可以了解更多的高级...
**Ajax（Asynchronous JavaScript and XML）技术是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。在本示例中，我们看到一个完整的Ajax应用，用于实现一个模拟的注册页面功能，用户输入用户名后，...
这个"asp.net ajax简单例子"应该包含了一个使用ASP.NET AJAX技术实现的简单应用。 首先，`Receive.aspx`文件是用户在浏览器中看到的网页，它通常包含HTML、CSS和JavaScript代码。在这个例子中，`Receive.aspx`可能...
这个“简单ajax登录例子”是一个非常适合初学者理解Ajax基本原理和使用方法的教程。在这里，我们将深入探讨Ajax如何与Servlet结合，实现用户无刷新登录验证。 1. **Ajax简介** Ajax的核心是JavaScript异步通信，它...
这个"很简单的一个AJAX例子"的标题和描述表明，我们将会探讨一个基础的AJAX应用实例，它可能包含了一个简单的JavaScript代码示例，用于向服务器发送请求并接收响应，以实现页面的异步更新。 在Web开发中，AJAX的...
本文将围绕一个基于Java的反向Ajax聊天实例——"反向Ajax聊天简单例子"进行详细解析。 1. 反向Ajax原理： 反向Ajax的核心思想是通过持久连接（Persistent Connection）或轮询（Polling）等技术，使服务器能够在有...
我做的ajax简单例子！
在这个“一个简单的xmlHttpRequest AJAX的例子”中，我们将探讨如何使用XMLHttpRequest对象来实现基本的AJAX请求。 首先，我们需要创建一个新的XMLHttpRequest实例。在JavaScript中，这是通过`new XMLHttpRequest()...
Ajax最简单例子，一个例子让你明白Ajax原理，XMLHttpRequest原理 var http_request = false; function createRequest(url) { http_request = false; if (window.XMLHttpRequest) { // Mozilla浏览器 ...
这个压缩包文件中的例子涵盖了Ajax、jQuery和JSON的基础使用，从简单的GET请求到复杂的异步数据交互，对于初学者来说是非常宝贵的资源。通过学习和实践这些例子，你可以更好地理解和掌握如何使用Ajax和jQuery来创建...
在这个"一个简单的Ajax例子"中，我们将深入探讨Ajax的核心概念、工作原理以及如何编写基本的Ajax代码。 1. **Ajax核心概念**： - **异步通信**：Ajax允许浏览器与服务器进行非阻塞通信，即用户在请求处理期间仍可...
在这个"Ajax入门例子项目"中，我们将深入探讨Ajax的基础概念、工作原理以及如何创建简单的Ajax应用。 1. Ajax基础概念： - 异步：Ajax的主要特性是异步通信，意味着用户在请求发送后可以继续浏览网页，而无需等待...
在这个"Ajax最简单的例子"中，我们将探讨Ajax的基本使用方法以及其工作原理。 Ajax的工作原理主要涉及以下几个步骤： 1. **创建XMLHttpRequest对象**：在JavaScript中，Ajax的核心是XMLHttpRequest对象。它是...
本篇文章将通过一个简单的Ajax小例子来深入理解其工作原理。 首先，我们需要明白Ajax的基本组成部分： 1. **XMLHttpRequest对象**：这是Ajax的核心，它是浏览器提供的API，用于在后台与服务器进行通信。即使名称中...
这个"ajax简单例子实现用户名检查"的项目，旨在教你如何利用Ajax和Servlet在JavaWeb环境中实现实时验证用户输入的用户名是否可用。下面我们将深入探讨这个主题。 首先，让我们了解Ajax的核心组成部分： 1. **...
在这里，我们将深入探讨基于jQuery的Ajax应用，以"jQuery+Ajax例子"为标题，结合项目描述和标签，我们来详细讲解这些技术。 1. **jQuery简介** jQuery由John Resig在2006年创建，旨在使JavaScript编程变得更加简单...
这个“php+jquery+ajax最简单例子”旨在教你如何使用这些工具实现一个基本的异步数据交换功能。 首先，让我们深入了解这三个概念： 1. PHP（Hypertext Preprocessor）：这是一种服务器端脚本语言，主要用于网页...