AJax

最新推荐文章于 2022-06-19 13:50:53 发布

chdtyzhy

最新推荐文章于 2022-06-19 13:50:53 发布

阅读量512

点赞数

本文链接：https://blog.csdn.net/chdtyzhy/article/details/13091077

版权

基于Servlet的AJAX
这是一个很常见的UI，当用户在第一个选择框里选择ZHEJIANG时，第二个选择框要出现ZHEJIANG的城市；当用户在第一个选择框里选择JIANGSU时，第二个选择框里要出现JIANGSU的城市。我们来看配置文件web.xml，在里面配置一个servlet，跟往常一样：<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>
然后，来看我们的JSP文件：
<!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">

</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>
<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>

第一眼看来，跟我们平常的
JSP
没有两样。仔细一看，不同在
JS
里头。

我们首先来看第一个方法：
getResult(stateVal)
，在这个方法里，首先是取
得
XmlHttpRequest
；然后设置该请求的
url
：
req.open("GET",url, true);
接着设
置请求返回值的接收方法：
req.onreadystatechange = complete;
该返回值的接
收方法为
——
complete();
最后是发送请求：
req.send(null);

然后我们来看我们的返回值接收方法：
complete()
，这这个方法里，首先判
断是否正确返回，如果正确返回，用
DOM
对返回的
XML
文件进行解析。关于
DOM
的使用，这里不再讲述，请大家参阅相关文档。得到
city
的值以后，再通
过
buildSelect(str,sel)
方法赋值到相应的选择框里头去。



最后我们来看看
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;


/**

* @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 {


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><cit
y>suzhou</city>");

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

PrintWriter out=response.getWriter();

out.write(sb.toString());

out.close(); }
}

这个类也十分简单，首先是从request里取得state参数，然后根据state参数生成相应的XML文件，最后将XML文件输出到PrintWriter对象里。

chdtyzhy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJax

基于Servlet的AJAX 这是一个很常见的UI，当用户在第一个选择框里选择ZHEJIANG时，第二个选择框要出现ZHEJIANG的城市；当用户在第一个选择框里选择JIANGSU时，第二个选择框里要出现JIANGSU的城市。
复制链接

扫一扫