AJAX解析XML实现二级联动

参考：http://blog.csdn.net/wenpengy/article/details/5318937

 

js代码：

 1 function GetXMLHttpObject() {

 2     var xmlHttp = null;

 3     try {

 4         xmlHttp = new XMLHttpRequest();

 5     } catch (e) {

 6         try {

 7             xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

 8         } catch (e) {

 9             xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

10         }

11     }

12     return xmlHttp;

13 }

14 

15 // 

16 function selectJob(depId) {

17     xmlHttp = GetXMLHttpObject();

18     if (xmlHttp == null) {

19         alert("您的浏览器不支持Ajax");

20     }

21     xmlHttp.open("POST", "JobAJAXServlet?depID=" + depId, true);

22     xmlHttp.onreadystatechange = callback;

23     xmlHttp.send(null);

24 }

25 

26 function callback() {

27     if (xmlHttp.readyState == 4) {

28         if (xmlHttp.status == 200) {

29             parseMessage();// 解析XML文档

30         } else {

31             alert(xmlHttp.status);

32         }

33     }

34 }

35 

36 function parseMessage() {

37     var xmlDoc = xmlHttp.responseXML;// 获得返回的XML文档

38     var xSel = xmlDoc.getElementsByTagName('select');

39     // 获得XML文档中的所有<select>标记

40     var select_root = document.getElementById('jobId');

41     // 获得网页中的第二个下拉框

42     select_root.options.length = 0;

43     // 每次获得新的数据的时候先把每二个下拉框架的长度清0

44     for ( var i = 0; i < xSel.length; i++) {

45         var xValue = xSel[i].childNodes[0].firstChild.nodeValue;

46         // 获得每个<select>标记中的第一个标记的值,也就是<value>标记的值

47         var xText = xSel[i].childNodes[1].firstChild.nodeValue;

48         // 获得每个<select>标记中的第二个标记的值,也就是<text>标记的值

49         var option = new Option(xText, xValue);

50         // 根据每组value和text标记的值创建一个option对象

51         try {

52             select_root.add(option);// 将option对象添加到第二个下拉框中

53         } catch (e) {

54         }

55     }

56 }

View Code

 

涉及到的两个select代码：

<tr bgcolor="#FFFFFF">



                                            <td>

                                                <div align="right">所属部门:</div>

                                            </td>

                                            <td>

                                                <div align="left">

                                                <select name="departID" id="departID" onchange="selectJob(this.value)">

                                                    <option value="0" selected>请选择</option> 

                                                    <dep:Department />

                                                </div>

                                            </td>

                                        </tr>

                                        <tr bgcolor="#FFFFFF">



                                            <td><div align="right">职位:</div>

                                            </td>

                                            <td>

                                                <div align="left">

                                                    <select name="jobId" id="jobId">

                                                        <option value="0">请选择</option>

                                                        <!--<job:Job />-->

                                                    </select>

                                                </div>

                                            </td>

                                        </tr>

View Code

 

Servlet中的代码：

public void doGet(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        String str_depId = request.getParameter("depID");

        int depId = 0;

        if (str_depId != null && !"".equals(str_depId)) {

            depId = Integer.valueOf(str_depId);

        }

        response.setContentType("text/xml");

        response.setHeader("Cache-Control", "no-cache");

        request.setCharacterEncoding("UTF-8");

        response.setCharacterEncoding("UTF-8");

        // ---调用Service--------------------------------

        CardService service = new CardService();

        List<Job> list = service.loadJop(depId);

        // 获得请求中参数为id的值

        String xml_start = "<selects>";

        String xml_end = "</selects>";

        String xml = "";

        if (str_depId.equalsIgnoreCase(str_depId)) {

            for (int j = 0; j < list.size(); j++) {

                Job job = list.get(j);

                xml += "<select><value>" + job.getJobID() + "</value><text>"

                        + job.getJobName() + "</text></select>";

            }

        }

        String last_xml = xml_start + xml + xml_end;

        response.getWriter().write(last_xml);

    }



    public void doPost(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        doGet(request, response);

    }

View Code

仅作为学习记录。