posts - 36, comments - 30, trackbacks - 0, articles - 3

Ajax学习二

Posted on 2009-11-15 09:28 笑看人生 阅读(239) 评论(0)  编辑  收藏 所属分类: Web开发技术
Ajax中的XMLHttpRequest对象提供了两个属性来访问服务器端相应。

  • responseText:将相应作为一个字符串返回;(系列一中已经介绍)
  • responseXML:将相应作为一个XML对象返回;(本系列中介绍)
本节要介绍的内容,很多人应该比较熟悉,比如在网上注册时,在“省”列表框中选择不同的省份,对应的“市”列表框中出现该省的所有市,这个过程,不用刷新整个页面。

要实现这个功能,只须修改一下系列一中的index.jsp和AjaxServlet.java这两个文件。

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding
="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>

<script language="javascript">
    
var xmlHttp;
    
function refresh() {
        xmlHttp 
= createXMLHttpRequest();
        
var url = "AjaxServlet?province="
                
+ document.getElementById("province").value;
        xmlHttp.open(
"GET", url);
        xmlHttp.onreadystatechange 
= handleStateChange;
        xmlHttp.send(
null);
    }

    
function handleStateChange() {
        
if (xmlHttp.readyState == 4) {
            
if (xmlHttp.status == 200) {
                updateCity();
            }
        }
    }

    
function updateCity() {
        clearCity();
        
var city = document.getElementById("city");
        
var cities = xmlHttp.responseXML.getElementsByTagName("city");        
        
for(var i=0;i<cities.length;i++){
            option 
= document.createElement("option");
            option.appendChild(document.createTextNode(cities[i].firstChild.nodeValue));
            city.appendChild(option);                        
        }
    }

    
function clearCity() {        
        
var city = document.getElementById("city");
        
while(city.childNodes.length > 0) {
            city.removeChild(city.childNodes[
0]);
        }                    
    }
    
    
function createXMLHttpRequest() {
        
if (window.ActiveXObject) {
            xmlHttp 
= new ActiveXObject("Microsoft.XMLHTTP");
        } 
else if (window.XMLHttpRequest) {
            xmlHttp 
= new XMLHttpRequest();
        }
        
return xmlHttp;
    }
</script>

<body>
<form action="#"><select id="province" onchange="refresh()">
    
<option value="">Select One</option>
    
<option value="jiangsu">Jiang Su</option>
    
<option value="zhejiang">Zhe Jiang</option>
</select> <br>
<br>
<br>
<select id="city"></select></form>
</body>

</html>

AjaxServlet.java

package 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;

public class AjaxServlet extends HttpServlet {

    
private static final long serialVersionUID = 7032718233562299325L;

    @Override
    
protected void doPost(HttpServletRequest req, HttpServletResponse response)
            
throws ServletException, IOException {
        processRequest(req, response, 
"POST");
    }

    @Override
    
protected void doGet(HttpServletRequest req, HttpServletResponse response)
            
throws ServletException, IOException {
        processRequest(req, response, 
"GET");
    }

    
private void processRequest(HttpServletRequest req,
            HttpServletResponse response, String method) 
throws IOException {
        String province 
= req.getParameter("province");
        StringBuffer cities 
= new StringBuffer("<cities>");
        
        
if("jiangsu".equals(province)){
            cities.append(
"<city>Nanjing</city>");
            cities.append(
"<city>Zhenjiang</city>");
        }
else if("zhejiang".equals(province)){
            cities.append(
"<city>Hanzhou</city>");
            cities.append(
"<city>Wenzhou</city>");
        }        
        
        PrintWriter writer 
= response.getWriter();    
        cities.append(
"</cities>");
        response.setContentType(
"text/xml");
        writer.write(cities.toString());
        writer.close();
    }
}





只有注册用户登录后才能发表评论。


网站导航: