一個(gè)ajax的例子(連動列表實(shí)現(xiàn))

pengyan 2006-11-19

展開全文

最近幾個(gè)月，ajax一直很火，為了適應(yīng)潮流，我也開始學(xué)習(xí)ajax了
寫了一個(gè)例子，共享一下，為新手們開一個(gè)頭吧

這是一個(gè)下拉框的連動實(shí)現(xiàn)，選擇省份后，在另一個(gè)下拉框?qū)崟r(shí)地返回我們所需要的數(shù)據(jù).
至于ajax的優(yōu)點(diǎn)，了解google紅火的原因就知道是怎么回事了。

html文件：
<!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");
                        alert(city.length);
                        var str=new Array();
                        for(var i=0;i<city.length;i++){
                                str[i]=city[i].firstChild.data;
                        }
                        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])
        }
}
function test(){
        alert("test");
}
</script>
<body>
<select name="state" onChange="getResult(this.value)">
        <option value="">請選擇</option>>
        <option value="zj">浙江</option>>
        <option value="zs">江蘇</option>>
</select>
<select id="city"></select>
</body>
</html>

Servlet 類：
package com.stephen.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 stephen
*
* 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><city>suzhou</city>");
                }
                sb.append("</state>");
                PrintWriter out=response.getWriter();
                out.write(sb.toString());
                out.close();
        }

}

web.xml文件：
<web-app version="2.4"
xmlns="http://java./xml/ns/j2ee"
xmlns:xsi="http://www./2001/XMLSchema-instance"
xsi:schemaLocation="http://java./xml/ns/j2ee
http://java./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>
BTW:希望可以將Flex去掉，直接命名為RIA板塊，因?yàn)镽IA包含了太多的技術(shù)，而ajax與flex是最常用的兩種技術(shù)。

經(jīng)過修改后支持中文的全程序(加入dom4j)：

MyHtml.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyHtml.html</title>

</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");
                        //alert(city.length);
                        var str=new Array();
                        for(var i=0;i<city.length;i++){
                                str[i]=city[i].firstChild.data;
                        }
                        //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])
        }
}
function test(){
        alert("test");
}
</script>
<body>
<select name="state" onChange="getResult(this.value)">
        <option value="">請選擇</option>
        <option value="zj">浙江</option>
        <option value="zs">江蘇</option>
        <option value="gd">廣東</option>
</select>
<select id="city"></select>
</body>
</html>

servlet代碼：

SelectCityServlet.java

package org.ajaxtags.demo.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;
import org.dom4j.Document;
import org.dom4j.*;
/**
* @author stephen
*
* 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><city>suzhou</city>");
                        }
                        sb.append("</state>");
                        PrintWriter out=response.getWriter();
                        out.write(sb.toString());
                        out.close();
         */
        //下面代碼解決了中文問題，并使用了dom4j生成XML，這樣在IE、Firefox中都可以正常顯示中文
        response.setCharacterEncoding("UTF8");
        response.setContentType("text/xml");
        response.setHeader("Cache-Control", "no-cache");
        String state = request.getParameter("state");

Document document = DocumentHelper.createDocument();

Element root = document.addElement("state");

        Element city = null;
        if ("zj".equals(state)) {
            city = root.addElement("city");
            city.setText("杭州");
            city = root.addElement("city");
            city.setText("huzhou");
        }else if("gd".equals(state)){
           city = root.addElement("city");
           city.setText("廣州");
           city = root.addElement("city");
           city.setText("深圳");
           city = root.addElement("city");
           city.setText("惠州");
           city = root.addElement("city");
           city.setText("東莞");
        } else {
            city = root.addElement("city");
            city.setText("南京");
            city = root.addElement("city");
            city.setText("蘇州");
            city = root.addElement("city");
            city.setText("yangzhou");
        }

PrintWriter out = response.getWriter();
String s = root.asXML();

out.write(s);
out.close();

}

下面是配置的情況：

web.xml文件：
<web-app version="2.4"
xmlns="http://java./xml/ns/j2ee"
xmlns:xsi="http://www./2001/XMLSchema-instance"
xsi:schemaLocation="http://java./xml/ns/j2ee
http://java./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>

本站是提供個(gè)人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自： pengyan > 《Ajax》

舉報(bào)/認(rèn)領(lǐng)