基于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">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</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对象里。
AJax
最新推荐文章于 2022-06-19 13:50:53 发布