ajax巨好用,4級級聯菜單的解決 (轉)
?
為解決省、市、區、區域4級級聯菜單,在網上搜索了大量的級聯菜單解決方案,也請教過不少朋友,要么過于復雜,要么過于占內存,未果。
在建議下,悉心讀《ajax基礎教程》4余遍,方有與ajax相識恨晚之感,唯一的感慨就是好用好用絕對好用。
現在把已經可以正常運行的例子的核心代碼分享:
客戶端ajax代碼如下:
頁面調用處代碼如下:
服務器端action(Struts)代碼如下:
附注:這里用jsp或者servlet都可行。今天還看到一個朋友在dearbook上問某書的示例為啥不用Servlet而用JSP,
問題如下:讀第*章,發現XMLHttpRequest.open(method,url,true)中的url請求的都是jsp,然后由jsp再調用處理方法,然后再out.print().不能直接發送請求到servlet讓servlet處理再out.print()?疑惑...?
我的觀點:jsp的調用和out打印與servlet本質上是一致的;如果采用servlet從理論上更說得過去,但是對于示例未必最佳,畢竟jsp只要放在web容器的某個應用下就ok;如果是servlet則需要配置;對于一本講述概要而不是深入討論最佳實踐的書,我覺得作者的不足是沒有提到其它可行方案或者解釋為啥通過這個方式來示例;對于讀者來說,應該產生這個疑問,并且該弄明白為啥這么干
聲明:
本例子在firefox下完全正常運行;
在IE下運行到紅色標記處得到的對象的個數居然是0;嚴重疑惑中,希望得到朋友們的指點.....
在建議下,悉心讀《ajax基礎教程》4余遍,方有與ajax相識恨晚之感,唯一的感慨就是好用好用絕對好用。
現在把已經可以正常運行的例子的核心代碼分享:
客戶端ajax代碼如下:
<script?type="text/javascript">
????????var?xmlHttp;
????????var?domainId;
????????var?type;
????????
????????function?refreshList(typesource)?{
????????????createXMLHttpRequest();
????????????type?=?typesource;
????????????if?("p"?==?type)?{
????????????????getSelectedId("province_select");
????????????}?else?if("c"?==?type)?{
????????????????getSelectedId("city_select");
????????????}?else?if("s"?==?type)?{
????????????????getSelectedId("section_select");
????????????}?
????????????var?url?=?"enterpriseManage2.html?method=retrieve&ts="?+?new?Date().getTime();
????????????var?queryStr?=?"domainId="?+?domainId;
????????????alert(queryStr);
????????????xmlHttp.onreadystatechange=handleStateChange;
????????????xmlHttp.open("POST",?url);
????????????xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
????????????xmlHttp.send(queryStr);
????????}
????????
????????function?handleStateChange()?{
????????????if?(xmlHttp.readyState?==?4)?{
????????????????if?(xmlHttp.status?==?200)?{
????????????????????updateList();
????????????????}
????????????}
?????????}
?????????
?????????function?getSelectedId(elementId)?{
?????????????alert("elementId:?"?+?elementId);
?????????????//var?selectedId?=?null;
?????????????var?options?=?document.getElementById(elementId).childNodes;
?????????????var?option?=?null;
?????????????for?(var?i?=?0,?n?=?options.length;?i?<?n;?i++)?{
?????????????????option?=?options[i];
?????????????????if?(option.selected)?{
?????????????????????domainId?=?option.value;
?????????????????????//return?selectedId;
?????????????????}
?????????????}
?????????}
?????????
?????????function?updateList()?{
?????????????alert("type:?"?+?type);
?????????????if?("p"?==?type)?{
?????????????????var?select?=?document.getElementById("city_select");
?????????????????var?options?=?xmlHttp.responseXML.getElementsByTagName("domain");
?????????????????for?(var?i?=?0,?n?=?options.length;?i?<?n;?i++)?{
?????????????????????select.appendChild(createElementWithValue(options[i]));
?????????????????}
?????????????}?else?if("c"?==?type)?{
?????????????????var?select?=?document.getElementById("section_select");
?????????????????var?options?=?xmlHttp.responseXML.getElementsByTagName("domain");
?????????????????for?(var?i?=?0,?n?=?options.length;?i?<?n;?i++)?{
?????????????????????select.appendChild(createElementWithValue(options[i]));
?????????????????}????
?????????????}?else?if("s"?==?type)?{
?????????????????var?select?=?document.getElementById("appointDomain");
?????????????????var?options?=?xmlHttp.responseXML.getElementsByTagName("domain");
?????????????????for?(var?i?=?0,?n?=?options.length;?i?<?n;?i++)?{
?????????????????????select.appendChild(createElementWithValue(options[i]));
?????????????????}????
?????????????}
?????????}
?????????
?????????function?createElementWithValue(text)?{
?????????????var?element?=?document.createElement("option");
?????????????element.setAttribute("value",?text.getAttribute("id"));
?????????????var?text?=?document.createTextNode(text.firstChild.nodeValue);
?????????????element.appendChild(text);
?????????????return?element;
?????????}
????????
????????function?createXMLHttpRequest()?{
????????????if(window.XMLHttpRequest)?{
????????????????????xmlHttp?=?new?XMLHttpRequest();
????????????????}?else?if?(window.ActiveXObject)?{
????????????????????try?{
????????????????????????xmlHttp?=?new?ActiveXObject("Msxml2.XMLHTTP");
????????????????????}?catch?(e)?{
????????????????????????try?{
????????????????????????????xmlHttp?=?new?ActiveXObject("Microsoft.XMLHTTP");
????????????????????????}?catch?(e)?{
????????????????????????}
????????????????????}
????????????????}
????????}
????</script>
????????var?xmlHttp;
????????var?domainId;
????????var?type;
????????
????????function?refreshList(typesource)?{
????????????createXMLHttpRequest();
????????????type?=?typesource;
????????????if?("p"?==?type)?{
????????????????getSelectedId("province_select");
????????????}?else?if("c"?==?type)?{
????????????????getSelectedId("city_select");
????????????}?else?if("s"?==?type)?{
????????????????getSelectedId("section_select");
????????????}?
????????????var?url?=?"enterpriseManage2.html?method=retrieve&ts="?+?new?Date().getTime();
????????????var?queryStr?=?"domainId="?+?domainId;
????????????alert(queryStr);
????????????xmlHttp.onreadystatechange=handleStateChange;
????????????xmlHttp.open("POST",?url);
????????????xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
????????????xmlHttp.send(queryStr);
????????}
????????
????????function?handleStateChange()?{
????????????if?(xmlHttp.readyState?==?4)?{
????????????????if?(xmlHttp.status?==?200)?{
????????????????????updateList();
????????????????}
????????????}
?????????}
?????????
?????????function?getSelectedId(elementId)?{
?????????????alert("elementId:?"?+?elementId);
?????????????//var?selectedId?=?null;
?????????????var?options?=?document.getElementById(elementId).childNodes;
?????????????var?option?=?null;
?????????????for?(var?i?=?0,?n?=?options.length;?i?<?n;?i++)?{
?????????????????option?=?options[i];
?????????????????if?(option.selected)?{
?????????????????????domainId?=?option.value;
?????????????????????//return?selectedId;
?????????????????}
?????????????}
?????????}
?????????
?????????function?updateList()?{
?????????????alert("type:?"?+?type);
?????????????if?("p"?==?type)?{
?????????????????var?select?=?document.getElementById("city_select");
?????????????????var?options?=?xmlHttp.responseXML.getElementsByTagName("domain");
?????????????????for?(var?i?=?0,?n?=?options.length;?i?<?n;?i++)?{
?????????????????????select.appendChild(createElementWithValue(options[i]));
?????????????????}
?????????????}?else?if("c"?==?type)?{
?????????????????var?select?=?document.getElementById("section_select");
?????????????????var?options?=?xmlHttp.responseXML.getElementsByTagName("domain");
?????????????????for?(var?i?=?0,?n?=?options.length;?i?<?n;?i++)?{
?????????????????????select.appendChild(createElementWithValue(options[i]));
?????????????????}????
?????????????}?else?if("s"?==?type)?{
?????????????????var?select?=?document.getElementById("appointDomain");
?????????????????var?options?=?xmlHttp.responseXML.getElementsByTagName("domain");
?????????????????for?(var?i?=?0,?n?=?options.length;?i?<?n;?i++)?{
?????????????????????select.appendChild(createElementWithValue(options[i]));
?????????????????}????
?????????????}
?????????}
?????????
?????????function?createElementWithValue(text)?{
?????????????var?element?=?document.createElement("option");
?????????????element.setAttribute("value",?text.getAttribute("id"));
?????????????var?text?=?document.createTextNode(text.firstChild.nodeValue);
?????????????element.appendChild(text);
?????????????return?element;
?????????}
????????
????????function?createXMLHttpRequest()?{
????????????if(window.XMLHttpRequest)?{
????????????????????xmlHttp?=?new?XMLHttpRequest();
????????????????}?else?if?(window.ActiveXObject)?{
????????????????????try?{
????????????????????????xmlHttp?=?new?ActiveXObject("Msxml2.XMLHTTP");
????????????????????}?catch?(e)?{
????????????????????????try?{
????????????????????????????xmlHttp?=?new?ActiveXObject("Microsoft.XMLHTTP");
????????????????????????}?catch?(e)?{
????????????????????????}
????????????????????}
????????????????}
????????}
????</script>
頁面調用處代碼如下:
<td?align="left"?class="list_content"?width="75%">
??? 省
??? <select?id="province_select"?name="province_select"?onchange="refreshList('p');">?
???????? <option?value=""?SELECTED>請選擇</option>
???????????? <%
??????????????? java.util.Iterator?it?=?((java.util.List)request.getAttribute("province_options")).iterator();
??????????????? while?(it.hasNext())?{
??????????????????? Province?province?=?(Province)it.next();
????????????? %>
????????????? <option?value=<%=province.getId()%>><%=province.getName()%></option>
????????????? <%
???????????????? }
????????????? %>
??? </select>
??? 市
??? <select?id="city_select"?name="city_select"?onchange="refreshList('c');">??????
???????? <option?value=""?SELECTED>請選擇</option>
??? </select>
??? 區
??? <select?id="section_select"?name="section_select"?onchange="refreshList('s');">?
???????? <option?value=""?SELECTED>請選擇</option>
??? </select>
??? 區域
??? <select?id="appointDomain"?name="appointDomain">?
???????? <option?value=""?SELECTED>請選擇</option>
??? </select>
</td>
??? 省
??? <select?id="province_select"?name="province_select"?onchange="refreshList('p');">?
???????? <option?value=""?SELECTED>請選擇</option>
???????????? <%
??????????????? java.util.Iterator?it?=?((java.util.List)request.getAttribute("province_options")).iterator();
??????????????? while?(it.hasNext())?{
??????????????????? Province?province?=?(Province)it.next();
????????????? %>
????????????? <option?value=<%=province.getId()%>><%=province.getName()%></option>
????????????? <%
???????????????? }
????????????? %>
??? </select>
??? 市
??? <select?id="city_select"?name="city_select"?onchange="refreshList('c');">??????
???????? <option?value=""?SELECTED>請選擇</option>
??? </select>
??? 區
??? <select?id="section_select"?name="section_select"?onchange="refreshList('s');">?
???????? <option?value=""?SELECTED>請選擇</option>
??? </select>
??? 區域
??? <select?id="appointDomain"?name="appointDomain">?
???????? <option?value=""?SELECTED>請選擇</option>
??? </select>
</td>
服務器端action(Struts)代碼如下:
?1?public?ActionForward?retrieve(ActionMapping?mapping,?ActionForm?actionForm,
?2?????????????HttpServletRequest?request,?HttpServletResponse?response)?{
?3?????????String?domainId?=?request.getParameter("domainId");
?4?????????DomainFactory?factory?=?DomainFactory.getInstance();
?5?????????Object?domain?=?factory.getDomain(domainId);
?6?????????StringBuffer?responseXML?=?new?StringBuffer("<domains>");
?7?????????if(domain?instanceof?Province)?{
?8?????????????Province?province?=?(Province)domain;
?9?????????????Iterator?it?=?province.getCities().iterator();
10?????????????while?(it.hasNext())?{
11?????????????????City?city?=?(City)it.next();
12?????????????????responseXML.append("<domain");
13?????????????????responseXML.append("?id='"?+?city.getId());
14?????????????????responseXML.append("'>");
15?????????????????responseXML.append(city.getName());
16?????????????????responseXML.append("</domain>");
17?????????????}
18?????????}?else?if(domain?instanceof?City)?{
19?????????????City?city?=?(City)domain;
20?????????????Iterator?it?=?city.getSections().iterator();
21?????????????while?(it.hasNext())?{
22?????????????????Section?section?=?(Section)it.next();
23?????????????????responseXML.append("<domain");
24?????????????????responseXML.append("?id='"?+?section.getId());
25?????????????????responseXML.append("'>");
26?????????????????responseXML.append(section.getName());
27?????????????????responseXML.append("</domain>");
28?????????????}
29?????????}?else?if?(domain?instanceof?Section)?{
30?????????????Section?section?=?(Section)domain;
31?????????????Iterator?it?=?section.getRegions().iterator();
32?????????????while?(it.hasNext())?{
33?????????????????Region?region?=?(Region)it.next();
34?????????????????responseXML.append("<domain");
35?????????????????responseXML.append("?id='"?+?region.getId());
36?????????????????responseXML.append("'>");
37?????????????????responseXML.append(region.getName());
38?????????????????responseXML.append("</domain>");
39?????????????}
40?????????}?
41?????????responseXML.append("</domains>");
42?????????response.setContentType("text/xml");
43?????????try?{
44?????????????PrintWriter?out?=?(PrintWriter)response.getWriter();
45?????????????out.write(responseXML.toString());
46?????????????System.out.println(responseXML.toString());
47?????????????//out.flush();
48?????????}?catch?(IOException?e)?{
49?????????????//do?nothing
50?????????????e.printStackTrace();
51?????????}
52?????????return?null;
53?????}
?2?????????????HttpServletRequest?request,?HttpServletResponse?response)?{
?3?????????String?domainId?=?request.getParameter("domainId");
?4?????????DomainFactory?factory?=?DomainFactory.getInstance();
?5?????????Object?domain?=?factory.getDomain(domainId);
?6?????????StringBuffer?responseXML?=?new?StringBuffer("<domains>");
?7?????????if(domain?instanceof?Province)?{
?8?????????????Province?province?=?(Province)domain;
?9?????????????Iterator?it?=?province.getCities().iterator();
10?????????????while?(it.hasNext())?{
11?????????????????City?city?=?(City)it.next();
12?????????????????responseXML.append("<domain");
13?????????????????responseXML.append("?id='"?+?city.getId());
14?????????????????responseXML.append("'>");
15?????????????????responseXML.append(city.getName());
16?????????????????responseXML.append("</domain>");
17?????????????}
18?????????}?else?if(domain?instanceof?City)?{
19?????????????City?city?=?(City)domain;
20?????????????Iterator?it?=?city.getSections().iterator();
21?????????????while?(it.hasNext())?{
22?????????????????Section?section?=?(Section)it.next();
23?????????????????responseXML.append("<domain");
24?????????????????responseXML.append("?id='"?+?section.getId());
25?????????????????responseXML.append("'>");
26?????????????????responseXML.append(section.getName());
27?????????????????responseXML.append("</domain>");
28?????????????}
29?????????}?else?if?(domain?instanceof?Section)?{
30?????????????Section?section?=?(Section)domain;
31?????????????Iterator?it?=?section.getRegions().iterator();
32?????????????while?(it.hasNext())?{
33?????????????????Region?region?=?(Region)it.next();
34?????????????????responseXML.append("<domain");
35?????????????????responseXML.append("?id='"?+?region.getId());
36?????????????????responseXML.append("'>");
37?????????????????responseXML.append(region.getName());
38?????????????????responseXML.append("</domain>");
39?????????????}
40?????????}?
41?????????responseXML.append("</domains>");
42?????????response.setContentType("text/xml");
43?????????try?{
44?????????????PrintWriter?out?=?(PrintWriter)response.getWriter();
45?????????????out.write(responseXML.toString());
46?????????????System.out.println(responseXML.toString());
47?????????????//out.flush();
48?????????}?catch?(IOException?e)?{
49?????????????//do?nothing
50?????????????e.printStackTrace();
51?????????}
52?????????return?null;
53?????}
附注:這里用jsp或者servlet都可行。今天還看到一個朋友在dearbook上問某書的示例為啥不用Servlet而用JSP,
問題如下:讀第*章,發現XMLHttpRequest.open(method,url,true)中的url請求的都是jsp,然后由jsp再調用處理方法,然后再out.print().不能直接發送請求到servlet讓servlet處理再out.print()?疑惑...?
我的觀點:jsp的調用和out打印與servlet本質上是一致的;如果采用servlet從理論上更說得過去,但是對于示例未必最佳,畢竟jsp只要放在web容器的某個應用下就ok;如果是servlet則需要配置;對于一本講述概要而不是深入討論最佳實踐的書,我覺得作者的不足是沒有提到其它可行方案或者解釋為啥通過這個方式來示例;對于讀者來說,應該產生這個疑問,并且該弄明白為啥這么干
聲明:
本例子在firefox下完全正常運行;
在IE下運行到紅色標記處得到的對象的個數居然是0;嚴重疑惑中,希望得到朋友們的指點.....
posted on 2006-07-24 15:27 liaojiyong 閱讀(549) 評論(0) 編輯 收藏 所屬分類: Ajax