Java Web——Ajax(实现省份城市二级联动)

一、当用户点击具体省份后，出发onchange()方法，处理到javascript中

var xhr = false;
    
    function getCity()
    {
        //1.创建XMLHttpRequest对象
        //非IE浏览器
        if(window.XMLHttpRequest)
        {
            xhr = new XMLHttpRequest();
        }
        //IE浏览器
        else if(window.ActiveXObject)
        {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        if(xhr)
        {
            /*
                GET请求
            */
            //2.定义url连接
            /* var proObj = document.getElementById("province");
            var proId = proObj.options[proObj.selectedIndex].value;
            var url = "GetCityServlet?proId="+proId;
            //3.打开到服务器的连接
            xhr.open("get", url, true);
            //4.绑定回调函数（响应回来了，可以处理响应内容的函数）
            xhr.onreadystatechange = callback;
            //5.向服务器发送请求
            xhr.send(null); */
            /*
                POST请求
            */
            //2.定义url连接
            var url = "GetCityServlet";
            //3.打开到服务器的连接
            xhr.open("post", url, true);
            
            //注意：post提交方式必须配置内容类型--------------------------------------------------
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            
            //4.绑定回调函数（响应回来了，可以处理响应内容的函数）
            //xhr.onreadystatechange = callback_XML;
            xhr.onreadystatechange = callback_JSON;
            //5.向服务器发送请求
            var proObj = document.getElementById("province");
            var proId = proObj.options[proObj.selectedIndex].value;
            xhr.send("proId="+proId);
        }
        else
        {
            alert("XMLHttpRequest创建失败");
        } 
    }

注意：1.通过ajax可以用get或者post发送到服务器

　　　2.Ajax步骤：（1）生成XMLHttpRequest对象（2）定义url连接（3）打开连接（4）绑定回调函数（5）向服务器发送请求

二、服务端执行相应的操作，并需要将数据响应给回调函数（通过XML方式；通过JSON方式）

（1）通过XML方式

String proId = request.getParameter("proId");
        
        //根据选中的省份proId去数据获取对应的城市List
        List<City> cityList = new ArrayList<City>();
        if("1000".equals(proId))//广东省
        {
            cityList.add(new City(1001,"广州市"));
            cityList.add(new City(1002,"深圳市"));
            cityList.add(new City(1003,"肇庆市"));
        }
        else if("2000".equals(proId))//广西省
        {
            cityList.add(new City(2001,"桂林市"));
            cityList.add(new City(2002,"柳州市"));
            cityList.add(new City(2003,"玉林市"));
        }
        else if("3000".equals(proId))//海南省
        {
            cityList.add(new City(3001,"海口市"));
            cityList.add(new City(3002,"三亚市"));
            cityList.add(new City(3003,"澄迈市"));
        }
        /*
             <?xml version="1.0" encoding="UTF-8"?>
            <cities>
                <city>
                    <cid>1001</cid>
                    <cname>广州市</cname>
                </city>
                <city>
                    <cid>1002</cid>
                    <cname>深圳市</cname>
                </city>
                <city>
                    <cid>1003</cid>
                    <cname>肇庆市</cname>
                </city>
            </cities>
         */
        StringBuffer xml = new StringBuffer();
        
        xml.append("<?xml version="1.0" encoding="UTF-8"?>");
        xml.append("<cities>");
        for (City city : cityList) {
            xml.append("<city>");
                xml.append("<cid>"+city.getCid()+"</cid>");
                xml.append("<cname>"+city.getCname()+"</cname>");
            xml.append("</city>");
        }
        xml.append("</cities>");
        
        System.out.println(xml.toString());
        
        //设置响应字符集编码
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/xml;charset=utf-8");
        
        PrintWriter writer = response.getWriter();
        writer.write(xml.toString());
        writer.flush();
        writer.close();

注意：相当于把XML文档格式编写成字符串，然后将字符串响应给回调函数（XML方式应用于不同的web应用之间传递数据）

（2）JSON方式

String proId = request.getParameter("proId");
        
        //根据选中的省份proId去数据获取对应的城市List
        List<City> cityList = new ArrayList<City>();
        if("1000".equals(proId))//广东省
        {
            cityList.add(new City(1001,"广州市"));
            cityList.add(new City(1002,"深圳市"));
            cityList.add(new City(1003,"肇庆市"));
        }
        else if("2000".equals(proId))//广西省
        {
            cityList.add(new City(2001,"桂林市"));
            cityList.add(new City(2002,"柳州市"));
            cityList.add(new City(2003,"玉林市"));
        }
        else if("3000".equals(proId))//海南省
        {
            cityList.add(new City(3001,"海口市"));
            cityList.add(new City(3002,"三亚市"));
            cityList.add(new City(3003,"澄迈市"));
        }
        
        JSONArray json = JSONArray.fromObject(cityList);//----------------对象转json数组
        
        System.out.println(json.toString());
        
        //设置响应字符集编码
        response.setCharacterEncoding("utf-8");
        response.setContentType("application/json;charset=utf-8");
        
        PrintWriter writer = response.getWriter();
        writer.write(json.toString());
        writer.flush();
        writer.close();
    }

注意：1.JSON方式多用于在自己的web应用中传递数据

　　　2.JSON是将对象组成了一个JSON数组然后发给回调函数

　　　3.需要导入对应的jar包

三、回调函数进行响应操作

（1）XML方式：

//回调函数
    function callback_XML()
    {
        if(xhr.readyState == 4)//响应完成
        {
            if(xhr.status == 200)//正常响应
            {
                /*
                <cities>
                    <city>
                        <cid>2001</cid>
                        <cname>桂林市</cname>
                    </city>
                    
                    ........
                    
                </cities>
                */
                //alert("响应完成Text:" + xhr.responseText);
                var cityXml = xhr.responseXML;
                //获取xml文档根元素<cities>
                var root = cityXml.documentElement;
                //获取xml文档根元素<cities>下所有<city>节点
                var cities = root.getElementsByTagName("city");
                
                var cityObj = document.getElementById("city");
                //遍历获取每一个<city>节点
                cityObj.options.length = 1;//下一次选择省份时可以删掉上次绑定的内容
                for(var i=0;i<cities.length;i++)
                {
                    var city = cities[i];//单个<city>
                    //获取<cid>中的文本值
                    var cid = city.childNodes[0].firstChild.nodeValue;
                    //获取<cname>中的文本值
                    var cname = city.childNodes[1].firstChild.nodeValue;
                    
                    //绑定到城市下拉列表
                    cityObj.options[cityObj.options.length] =  new Option(cname,cid);
                }
            }
        }
    }

注意：1.通过XML对应的数据解析方法将传来的字符串重新解析为XML文档，随后进行数据的提取

（2）JSON方式：

//回调函数
    function callback_JSON()
    {
        if(xhr.readyState == 4)//响应完成
        {
            if(xhr.status == 200)//正常响应
            {
                /*
                    [
                     {"cid":1001,"cname":"广州市"},
                     {"cid":1002,"cname":"深圳市"},
                     {"cid":1003,"cname":"肇庆市"}
                    ]

                */
                var json = xhr.responseText;
                var cityArray = eval(json);
                
                var cityObj = document.getElementById("city");
                cityObj.options.length = 1;
                for(var i=0;i<cityArray.length;i++)
                {
                    var city = cityArray[i];
                    
                    var cid = city.cid;//cid属性值
                    var cname = city.cname;//cname属性值
                    
                    //绑定到城市下拉列表
                    cityObj.options[cityObj.options.length] =  new Option(cname,cid);
                }
                
            }
        }
    }

注意：1.将得到的JSON数组通过eval()函数进行解析，可以得到一个对象数组，遍历即可拿到对应的值