上篇中已介绍使用HTML产生一个模拟的下拉框,本篇将为其添加Ajax功能,使其在点击下拉按钮时向一个给定的Servlet发送Request,并将得到的下拉列表信息显示。
本篇将对上篇中的部分文件进行修改,并添加一个Servlet来接收请求并响应列表信息。
HTML页面修改如下:
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>Drop down list</title>
- <link rel="stylesheet" type="text/css" href="mooncomponent.css">
- <script type="text/javascript" src="moonscript.js"></script>
- </head>
- <body>
- <input type="text" id="DROPDOWN1_INPUT" name="DROPDOWN1_INPUT"
- class="dropdown_input">
- <img src="" class="dropdown_button" id="DROPDOWN1_IMG"
- name="DROPDOWN1_IMG" onclick="showSelector();">
- <br>
- <div id="DROPDOWN1_AREA" class="dropdown_area"><select
- id="DROPDOWN1_SELECTOR" name="DROPDOWN1_SELECTOR" multiple="multiple"
- class="dropdown_selector" onchange="giveValue();">
- </select></div>
- </body>
- </html>
JS页面修改如下:
- var xmldoc;
- // create xmlhttp object to send and receive request from server
- function createXMLDoc() {
- if (window.XMLHttpRequest) {
- xmldoc = new XMLHttpRequest();
- if (xmldoc.overrideMimeType) {
- xmldoc.overrideMimeType("text/xml");
- }
- } else if (window.ActiveXObject) {
- try {
- xmldoc = new ActiveXObject("Msxml4.XMLHTTP");
- } catch (e) {
- try {
- xmldoc = new ActiveXObject("Msxml3.XMLHTTP");
- } catch (e) {
- try {
- xmldoc = new ActiveXObject("Msxml2.XMLHTTP");
- } catch (e) {
- try {
- xmldoc = new ActiveXObject("Microsoft.XMLHTTP");
- } catch (e) {
- }
- }
- }
- }
- }
- }
- // send request via post method
- function postRequest(url, msg, eventHandle) {
- if (!xmldoc)
- createXMLDoc();
- xmldoc
- .setRequestHeader("Content-Type",
- "application/x-www-form-urlencoded");
- xmldoc.onreadystatechange = eventHandle;
- xmldoc.open("POST", url, true);
- xmldoc.send(msg);
- }
- // send request via get method
- function getRequest(url, msg, eventHandle) {
- if (!xmldoc)
- createXMLDoc();
- xmldoc.onreadystatechange = eventHandle;
- xmldoc.open("GET", url, true);
- xmldoc.send(msg);
- }
- function getResponseString() {
- return xmldoc.responseText;
- }
- function showSelector() {
- if (document.getElementById("DROPDOWN1_SELECTOR").options.length <= 0) {
- //send request via GET method, the servlet name path is /TEST
- // send an action named getDropdownList to get the message for dropdownlist
- // set the callback method renderSelector when response complete
- getRequest("../TEST?ACTION=getDropdownList", null, renderSelector);
- } else {
- // not the first time click, show the dropdownlist
- showDDLLayer();
- }
- //cancel the javascript event bubble, end this event
- if (window.event) {
- event.cancelBubble = true;
- } else {
- event.stopPropagation();
- }
- }
- function renderSelector(str) {
- if (xmldoc.readyState == 4 && xmldoc.status == 200) {
- // response complete
- if (!str) {
- //get the message for the dropdownlist
- str = getResponseString();
- }
- var list = document.getElementById("DROPDOWN1_SELECTOR");
- var items = str.split(",");
- //clear the dropdownlist contains
- list.options.length = 0;
- for ( var i = 0; i < items.length; i++) {
- //add an option for each item
- list.add(new Option(items[i], items[i]));
- }
- showDDLLayer();
- }
- }
- function showDDLLayer() {
- var ea = document.getElementById("DROPDOWN1_AREA");
- var input = document.getElementById("DROPDOWN1_INPUT");
- ea.style.top = (input.style.top + 40);
- ea.style.left = input.style.left;
- //show drop down list
- ea.style.display = "block";
- }
- function revertValue() {
- hiddenLayer();
- }
- function giveValue() {
- document.getElementById("DROPDOWN1_INPUT").value = document
- .getElementById("DROPDOWN1_SELECTOR").options[document
- .getElementById("DROPDOWN1_SELECTOR").options.selectedIndex].value;
- }
- function hiddenLayer() {
- document.getElementById("DROPDOWN1_AREA").style.display = "none";
- }
- //register event handler for document
- document.onmouseup = revertValue;
Servlet代码如下:
- package net.moon.jsf.customer.test;
- import java.io.IOException;
- import java.io.PrintWriter;
- import javax.servlet.ServletException;
- import javax.servlet.http.HttpServlet;
- import javax.servlet.http.HttpServletRequest;
- import javax.servlet.http.HttpServletResponse;
- public class JSFComponentTestServlet extends HttpServlet {
- // this is just demonstrate the message for the drop down list
- private static final String dropdownList = "ITEM1,ITEM2,ITEM3,ITEM4,ITEM5,ITEM6,ITEM7,ITEM8,ITEM9,ITEM10";
- @Override
- protected void doGet(HttpServletRequest req, HttpServletResponse resp)
- throws ServletException, IOException {
- // TODO Auto-generated method stub
- String action = req.getParameter("ACTION");
- if ("getDropdownList".equals(action)) {
- // receive the getDropdownList action, response the drop down list
- // message
- PrintWriter out = resp.getWriter();
- out.print(dropdownList);
- out.flush();
- out.close();
- }
- }
- @Override
- protected void doPost(HttpServletRequest req, HttpServletResponse resp)
- throws ServletException, IOException {
- // TODO Auto-generated method stub
- super.doPost(req, resp);
- }
- }
Servlet注册代码:
- <servlet>
- <servlet-name>JSFComponentTest</servlet-name>
- <servlet-class>net.moon.jsf.customer.test.JSFComponentTestServlet</servlet-class>
- </servlet>
- <servlet-mapping>
- <servlet-name>JSFComponentTest</servlet-name>
- <url-pattern>/TEST</url-pattern>
- </servlet-mapping>
从下篇开始,将开始将该页面逐步转换为JSF组件。