首页 > 代码库 > ajax联动

ajax联动

1、编写html代码,引入ajax文件

<script type="text/javascript" src="js/ajax.js"></script><select id="provinceID" style="width:111px">        <option>选择省份</option>        <option>湖南</option>        <option>广东</option>    </select>        &nbsp;&nbsp;&nbsp;    <select id="cityID" style="width:111px">        <option>选择城市</option>    </select>    

2、编写html处理代码

    <script type="text/javascript">        //定位省份下拉框,同时添加内容改变事件        document.getElementById("provinceID").onchange = function(){            //清空城市下拉框中的内容,除第一项外            var cityElement = document.getElementById("cityID");            cityElement.options.length = 1;            //获取选中option标签的索引号,从0开始                        var index = this.selectedIndex;                 //定位选中的option标签            var optionElement = this[index];            //获取选中的option标签中的内容,即省份            var province = optionElement.innerHTML;            //如果选中的内容不是"选择省份"            if("选择省份" != province){                //NO1)                var ajax = createAJAX();                //NO2)                var method = "POST";                var url = "${pageContext.request.contextPath}/ProvinceCityServlet?time="+new Date().getTime();                ajax.open(method,url);                //设置AJAX请求头                ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");                //NO3)                var content = "province=" + province;                ajax.send(content);                                //---------------------------------等待                                //NO4)                ajax.onreadystatechange = function(){                    if(ajax.readyState == 4){                        if(ajax.status == 200){                            //NO5)从AJAX异步对象中获取服务器响应的xml文档                            var xmlDocument = ajax.responseXML;                                                        //NO6)按照DOM规则,解析XML文档                                                            var cityElementArray = xmlDocument.getElementsByTagName("city");                                var size = cityElementArray.length;                            for(var i=0;i<size;i++){                                //innerHTML只能用在html/jsp中,不能用在xml中                                var city = cityElementArray[i].firstChild.nodeValue;                                //<option></option>                                var optionElement = document.createElement("option");                                    //<option>广州</option>                                optionElement.innerHTML = city;                                //<select><option>广州</option></select>                                cityElement.appendChild(optionElement);                            }                        }                    }                }            }        }    </script>

3、编写java处理代码

public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {        request.setCharacterEncoding("UTF-8");        String province = request.getParameter("province");                //通知AJAX异步对象,服务器响应的数据为xml格式的        response.setContentType("text/xml;charset=UTF-8");        //获取字符输出流        PrintWriter pw = response.getWriter();                pw.write("<?xml version=‘1.0‘ encoding=‘UTF-8‘?>");        pw.write("<root>");                                                if("广东".equals(province)){            pw.write("<city>广州</city>");            pw.write("<city>深圳</city>");            pw.write("<city>中山</city>");        }else if("湖南".equals(province)){            pw.write("<city>长沙</city>");            pw.write("<city>株洲</city>");            pw.write("<city>湘潭</city>");            pw.write("<city>岳阳</city>");        }                        pw.write("</root>");        pw.flush();        pw.close();    }

 

ajax联动