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()函數進行解析，可以得到一個對象數組，遍歷即可拿到對應的值