JSF自定义组件之二加入Ajax功能

最新推荐文章于 2023-01-23 18:14:47 发布

张_锋

最新推荐文章于 2023-01-23 18:14:47 发布

阅读量2.8k

点赞数

分类专栏： Java开发网页设计 Java模式 Web开发文章标签： jsf ajax dropdown servlet input stylesheet

本文链接：https://blog.csdn.net/sunshinestation/article/details/2846693

版权

Java开发同时被 3 个专栏收录

62 篇文章 0 订阅

订阅专栏

Web开发

46 篇文章 0 订阅

订阅专栏

Java模式

29 篇文章 0 订阅

订阅专栏

上篇中已介绍使用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组件。

张_锋

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JSF自定义组件之二加入Ajax功能

上篇中已介绍使用HTML产生一个模拟的下拉框，本篇将为其添加Ajax功能，使其在点击下拉按钮时向一个给定的Servlet发送Request，并将得到的下拉列表信息显示。本篇将对上篇中的部分文件进行修改，并添加一个Servlet来接收请求并响应列表信息。HTML页面修改如下： html> head> meta http-equiv="Content-Typ
复制链接

扫一扫