客户端与服务器端采用XML进行通信。
程序中涉及到了xml文件的组装发送和解析。
- 服务器端
public class CityServlet extends HttpServlet {
private static final String CONTENT_TYPE ="text/xml; charset=utf-8";
public CityServlet(){
super() ;
}
public void destroy(){
super.destroy();
}
/**
* 数据是xml格式的
*/
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
resp.setContentType(CONTENT_TYPE);
String province = req.getParameter("province") ;
StringBuffer city = new StringBuffer("<citys>") ;//记录返回XML串的对象
List list = cityInit ();
if ("gx".equals(province)){
for (int i =0;i<list.size();i++){
city.append("<city>"+list.get(i)+"</city>") ;
}
}
city.append("</citys>") ;
PrintWriter out = resp.getWriter() ;
out.print(city.toString());
out.flush();
out.close();
}
private List<String> cityInit() {
List<String > cityList = new ArrayList<String>();
cityList.add("nanning ");
cityList.add("guiling") ;
cityList.add("hena") ;
return cityList ;
}
}
配置文件
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0"
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_3_0.xsd">
<servlet>
<servlet-name>cityservlet</servlet-name>
<servlet-class>com.chuiyuan.servlet.CityServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>cityservlet</servlet-name>
<url-pattern>/servlet/CityServlet</url-pattern>
</servlet-mapping>
</web-app>
- 客户端
<%@ page language="java" import ="java.util.*" pageEncoding="gb2312" %>
<html>
<head>
<title>dynamic load</title>
<script type="text/javascript">
var xmlHttp = false ;
function createXMLHttpRequest(){
if (window.ActiveXObject){//Internet Explorer时，创建XMLHttpRequest对象的方法
try{
xmlHttp = new ActiveXObject ("Msxml2.XMLHTTP") ;
}catch (e){
try{
xmlHttmp = new ActiveXObject ("Microsoft.XMLHTTP") ;
//旧版本的Internet Explorer，创建XMLHttpRequest对象
}catch (e){
window.alert("创建XMLHttpRequest对象错误 "+ e) ;
}
}
}else if (window.XMLHttpRequest ){//mozilla时，创建XMLHttpRequest对象的方法
xmlHttp = new XMLHttpRequest();
}
if (!(xmlHttp)){
//未成功创建XMLHttpRequest对象
window.alert("创建XMLHttpRequest对象异常！");
}
}
//下拉列表改变时的操作
function proChange(objVal ){
alert ("proChange:"+ objVal );
createXMLHttpRequest() ;//
document.getElementById ("city").length=1;//根据ID获取指定元素，并赋值
xmlHttp.onreadystatechange = cityList ;//指定onreadystatechange处理函数
var url ="/Ajax1/servlet/CityServlet?province="+objVal ;//url
xmlHttp.open("GET", url ,true) ;
xmlHttp.send(null) ;
}
function cityList (){ //onreadtstatechange的处理函数
if (xmlHttp.readyState==4){
if (xmlHttp.status==200){
alert ("cityList:"+xmlHttp.responseXML) ;
parseXML(xmlHttp.responseXML) ;//解析服务器返回的XML数据
}
}
}
function parseXML (xmlDoc ){
alert("parseXML") ;
var len = xmlDoc.getElementsByTagName("city") ;
alert("parseXML len:"+len.length) ;
//获取XML数据中所有的“city”元素对象集合
var _citySel = document.getElementById ("city") ;//根据ID获取页面中的select元素
for (var i=0; i<len.length; i++){//遍历XML数据并给select元素添加选项
var opt = document.createElement("OPTION");//创建option对象
opt.text = xmlDoc.getElementsByTagName ("city")[i].firstChild.data;
alert("parseXML:"+opt.text) ;
//指定新创建元素的text属性值
opt.value= xmlDoc.getElementsByTagName ("city")[i].firstChild.data;
//指定新创建元素的value属性值
_citySel.add(opt) ;
}
}
</script>
</head>
<body>
<table align ="center" border=1 width="320">
<tr>
<td>省份:</td>
<td>
<select id="province" onchange="proChange(this.value);" style="85">
<option value="gd">guangdong</option>
<option value="gx">guangxi</option>
<option value="hn">henan</option>
<option value="hb">hubei</option>
</select>
</td>
</tr>
<tr>
<td>城市</td>
<td>
<select id ="city" style="85">
<option value=""> 请选择</option>
</select>
</td>
</table>
</body>
</html>
js 调试可以用alert 。
servlet调试可以用System.out.println()。