基于Servlet的Ajax实现

最新推荐文章于 2022-09-01 08:55:04 发布

duanshuyong

最新推荐文章于 2022-09-01 08:55:04 发布

阅读量4.5k

点赞数

分类专栏：软件与技术文章标签： servlet ajax xmlhttprequest stylesheet function url

本文链接：https://blog.csdn.net/duanshuyong/article/details/7277774

版权

软件与技术专栏收录该内容

45 篇文章 0 订阅

订阅专栏

当用户在第一个选择框里选择ZHEJIANG时，第二个选择框要出现ZHEJIANG的城市；当用户在第一个选择框里选择JIANGSU时，第二个选择框里要出现JIANGSU的城市。很常见的一个应用。

web.xml:

<web-appversion="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文件：

<!DOCTYPEHTML 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 mypage">



</head>
<script type="text/javascript">
function getResult(stateVal) {
     　　var url ="servlet/SelectCityServlet?state="+stateVal;
     　　if (window.XMLHttpRequest) {
             　　req = newXMLHttpRequest();
     　　}else if (window.ActiveXObject) {
             　　req = newActiveXObject("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");
                     　　var str=newArray();
                     　　for(var i=0;i<city.length;i++){
                             　　str[i]=city[i].firstChild.data;
                     　　}

                     　　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]=newOption(str[i],str[i])
     　　}
}
</script>
<body>
<select name="state"onChange="getResult(this.value)">
     　　<optionvalue="">Select</option>>
     　　<optionvalue="zj">ZEHJIANG</option>>
     　　<optionvalue="zs">JIANGSU</option>>
</select>
<select id="city">
　　<option value="">CITY</option>
</select>
</body>
</html>

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

返回值接收方法：complete()，这这个方法里，首先判断是否正确返回，如果正确返回，用DOM对返回的XML文件进行解析。

Servlet文件：

importjava.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 {

　　public SelectCityServlet() {
         　　super();
　　}

　　public void destroy() {
         　　super.destroy();
　　}

　　public void doGet(HttpServletRequest request,HttpServletResponse response)
                 　　throwsServletException, IOException {
         　　response.setContentType("text/xml");
         　　response.setHeader("Cache-Control","no-cache");
         　　String state =request.getParameter("state");
         　　StringBuffersb=new StringBuffer("<state>");
         　　if("zj".equals(state)){
                 　　sb.append("<city>hangzhou</city><city>huzhou</city>");
         　　} elseif("zs".equals(state)){
                 　　sb.append("<city>nanjing</city><city>yangzhou</city><city>suzhou</city>");
         　　}
         　　sb.append("</state>");
         　　PrintWriterout=response.getWriter();
         　　out.write(sb.toString());
         　　out.close();
　　}
}