您的位置：首页 > 理论基础 > 计算机网络

ajax+servlet实现省份城市动态效果 demo

2011-11-03 13:09 337 查看

【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 'one.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 type="text/javascript">
//---------------------------------------------------------------------------
var req;

function getResult(state,basePath){
//alert("state:"+state);

var url = basePath+"/SelectCityServlet?state="+state;
//alert(url);

if(window.XMLHttpRequest){

req = new XMLHttpRequest();
}else if(window.ActiveObject){

req = new ActiveObject("Microsoft.XMLHTTP");
}
alert(req);
if(req){
req.open("GET",url,true);
req.onreadystatechange=complete;
req.send(null);
alert("last");
}

}
//--------------------------------------------------------------------------------
/*
readyState
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化（在调用 open() 之前）
1: 服务器连接已建立（调用 send() 之前）
2: 请求已接收这里通常可以从响应得到内容头部）
3: 请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）
4: 请求已完成，且响应已就绪（可以访问服务器响应并使用它）

status
200: "OK"
404: 未找到页面
*/
function complete(){
if(req.readyState==4 && req.status==200){
//alert("req.status:"+req.status);
var city = req.responseXML.getElementsByTagName("city");

//alert("city.length:"+city.length);
var str=new Array();

for(var i = 0 ; i <city.length;i++){
//alert("for");
str[i]=city[i].firstChild.data;
}
//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,'<%=basePath %>')">
　　<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>

【servlet】

package com.wh;

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 {

/**
* Constructor of the object.
*/
public SelectCityServlet() {
super();
}

/**
* Destruction of the servlet. <br>
*/
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}

/**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);

}

/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

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>suzhou</city><city>yangzhou</city>");
}

sb.append("</state>");

PrintWriter out =response.getWriter();

out.write(sb.toString());

out.close();

}

/**
* Initialization of the servlet. <br>
*
* @throws ServletException if an error occurs
*/
public void init() throws ServletException {
// Put your code here
}

}

【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>
<description>This is the description of my J2EE component</description>
<display-name>This is the display name of my J2EE component</display-name>
<servlet-name>SelectCityServlet</servlet-name>
<servlet-class>com.wh.SelectCityServlet</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>SelectCityServlet</servlet-name>
<url-pattern>/SelectCityServlet</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>

这种方式比较简单，就酱紫==

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

oh ,god!

忘了，上面是用的字母

呃……

换成中文出现乱码的话就需要在servlet里面设置下相应的编码格式，即：

response.setCharacterEncoding("UTF-8");和JSP中的编码格式一致

从servlet传给JSP页面的中文显示就不会出现乱码了

QQQ

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： servlet ajax xmlhttprequest stylesheet initialization jsp

相关文章推荐

新的分享

章节导航