FeaturesDocs & SupportCommunityBlogsPartners

使用 Script.aculo.us 创建 Ajax 应用程序

撰稿人：Arun Gupta。撰写和维护人：James Branam

本教程介绍如何使用 Java 持久性 API 实现服务器端分页（建议用于大型数据集），以及如何使用 Ajax 功能在文本字段中获取和显示结果。Ajax 是一种在创建 RIA（Rich Internet Application，富 Internet 应用程序）时将 (X)HTML、JavaScript 和 CSS 与 XmlHttpRequest 功能结合使用的技术。Script.aculo.us 是一组 JavaScript 库，用于增强 Web 站点的用户界面。它提供可视效果引擎、拖放库（包括可排序列表）、一些控件（基于 Ajax 的自动完成、原位编辑、滑块）等。

预计时间：20 分钟

目录

本页上的内容适用 NetBeans IDE 6.1 和 6.5


要学习本教程，您需要具备以下软件和资源。

软件或资源 要求的版本
NetBeans IDE 6.5 Java 版本
Java Developer Kit (JDK) 版本 6 或版本 5
JavaServer Faces 组件/
Java EE 平台		 1.2（带有 Java EE 5*）或
1.1（带有 J2EE 1.4）
GlassFish 应用服务器 V2
样例数据库 必需

* 要利用 NetBeans IDE 的 Java EE 5 功能，请使用完全符合 Java EE 5 规范的应用服务器，例如 GlassFish V2 UR2 应用服务器。如果使用的是其他服务器，请查阅发行说明和常见问题解答，了解已知问题和解决方法。有关支持的服务器和 Java EE 平台的详细信息，请参见发行说明。

创建项目

首先使用“新建项目向导”创建项目。

  1. 在主工具栏中，选择“文件”>“新建项目”。

    将打开“新建项目”向导。

  2. 选择 "Java Web" 作为类别，选择“Web 应用程序”作为项目类型。单击“下一步”。

  3. 输入 Autocomplete 作为项目名称。

    带有项目名称的新建项目向导
  4. （可选）选中“使用专用文件夹存储库”复选框，并指定库文件夹的位置。有关此选项的详细信息，请参见共享项目库。
  5. 单击“下一步”。
  6. 选择 GlassFish V2 作为服务器，并单击“完成”。

  7. 将在源代码编辑器中打开index.jsp。

配置数据库

在本部分中，将创建新的 MySQL 数据库，并使用提供的 SQL 填充该数据库。

  1. 在“服务”窗口中，展开“数据库”节点，右键单击 MySQL 服务器节点，然后选择“创建数据库”。

  2. 输入 states 作为数据库名称，然后单击“确定”。

    “创建 MySQL 数据库”对话框。

    “服务”窗口中会显示 states 数据库连接。

    显示新数据库连接的“服务”窗口

    数据库处于连接状态时，数据库连接旁会显示 连接的数据库图标 图标。

  3. 右键单击 states 数据库连接节点，然后选择“执行命令”。

    将打开 SQL 编辑器。

  4. 在 SQL 编辑器中输入以下查询。

    CREATE TABLE STATES (
          id INT,
          abbrev VARCHAR(2),
          name VARCHAR(50),
          PRIMARY KEY (id)
    );
  5. 单击“运行 SQL” “运行 SQL”图标。
  6. 在“服务”窗口中，展开 states 数据库连接节点和“表”文件夹，以验证是否创建了 states 表。
  7. 右键单击“表”节点，然后选择“执行命令”。
  8. 在 SQL 编辑器中，将现有代码替换为以下代码，然后单击“运行 SQL”。 
    INSERT INTO STATES VALUES (1, "AL", "Alabama");
    INSERT INTO STATES VALUES (2, "AK", "Alaska");
    INSERT INTO STATES VALUES (3, "AZ", "Arizona");
    INSERT INTO STATES VALUES (4, "AR", "Arkansas");
    INSERT INTO STATES VALUES (5, "CA", "California");
    INSERT INTO STATES VALUES (6, "CO", "Colorado");
    INSERT INTO STATES VALUES (7, "CT", "Connecticut");
    INSERT INTO STATES VALUES (8, "DE", "Delaware");
    INSERT INTO STATES VALUES (9, "GL", "Florida");
    INSERT INTO STATES VALUES (10, "GA", "Georgia");
    INSERT INTO STATES VALUES (11, "HI", "Hawaii");
    INSERT INTO STATES VALUES (12, "ID", "Idaho");
    INSERT INTO STATES VALUES (13, "IL", "Illinois");
    INSERT INTO STATES VALUES (14, "IN", "Indiana");
    INSERT INTO STATES VALUES (15, "IA", "Iowa");
    INSERT INTO STATES VALUES (16, "KS", "Kansas");
    INSERT INTO STATES VALUES (17, "KY", "Kentucky");
    INSERT INTO STATES VALUES (18, "LA", "Louisiana");
    INSERT INTO STATES VALUES (19, "ME", "Maine");
    INSERT INTO STATES VALUES (20, "MD", "Maryland");
    INSERT INTO STATES VALUES (21, "MA", "Massachussetts");
    INSERT INTO STATES VALUES (22, "MI", "Michigan");
    INSERT INTO STATES VALUES (23, "MN", "Minnesota");
    INSERT INTO STATES VALUES (24, "MS", "Mississippi");
    INSERT INTO STATES VALUES (25, "MO", "Missouri");
    INSERT INTO STATES VALUES (26, "MT", "Montana");
    INSERT INTO STATES VALUES (27, "NE", "Nebraska");
    INSERT INTO STATES VALUES (28, "NV", "Nevada");
    INSERT INTO STATES VALUES (29, "NH", "New Hampshire");
    INSERT INTO STATES VALUES (30, "NJ", "New Jersey");
    INSERT INTO STATES VALUES (31, "NM", "New Mexico");
    INSERT INTO STATES VALUES (32, "NY", "New York");
    INSERT INTO STATES VALUES (33, "NC", "North Carolina");
    INSERT INTO STATES VALUES (34, "ND", "North Dakota");
    INSERT INTO STATES VALUES (35, "OH", "Ohio");
    INSERT INTO STATES VALUES (36, "OK", "Oklahoma");
    INSERT INTO STATES VALUES (37, "OR", "Orgeon");
    INSERT INTO STATES VALUES (38, "PA", "Pennsylvania");
    INSERT INTO STATES VALUES (39, "RI", "Rhode Island");
    INSERT INTO STATES VALUES (40, "SC", "South Carolina");
    INSERT INTO STATES VALUES (41, "SD", "South Dakota");
    INSERT INTO STATES VALUES (42, "TN", "Tennessee");
    INSERT INTO STATES VALUES (43, "TX", "Texas");
    INSERT INTO STATES VALUES (44, "UT", "Utah");
    INSERT INTO STATES VALUES (45, "VT", "Vermont");
    INSERT INTO STATES VALUES (46, "VA", "Virginia");
    INSERT INTO STATES VALUES (47, "WA", "Washington");
    INSERT INTO STATES VALUES (48, "WV", "West Virignia");
    INSERT INTO STATES VALUES (49, "WI", "Wisconsin");
    INSERT INTO STATES VALUES (50, "WY", "Wyoming");

    现在创建并填充数据库结构。在“服务”窗口中，将显示 states 表，如下图所示。

    9. States 数据库

  9. 关闭 SQL 编辑器。

创建 JPA（Java 持久性 API）实体类

在项目中使用 Java 持久性可以大大简化应用程序的开发，因为不需要配置部署描述符为持久性字段或属性提供对象关系映射信息。您可以使用标注直接在简单的 Java 类中定义这些属性。

实体持久性是通过 EntityManager API 来管理的。EntityManager API 用于处理持久性上下文，而每个持久性上下文是一组实体实例。开发应用程序时，您可以在类中使用标注来指定实体实例的持久性上下文实例。然后通过容器处理实体实例的生命周期。

  1. 在“项目”窗口中，右键单击 Autocomplete 项目节点，然后选择“新建”>“通过数据库生成实体类”。

    将打开“新建 - 通过数据库生成实体类”对话框。

  2. 在“数据源”下拉列表中，选择“新建数据源”。

    这将打开“创建数据源”对话框。

    “创建数据源”对话框
  3. 键入 jndi/states 作为 JNDI 名称，然后选择 states 数据库连接。单击“确定”。
  4. “新建 - 通过数据库生成实体类”对话框将显示 states 数据库中提供的字段。

  5. 从“可用表”中选择 STATES，并单击“添加”。

    “新建 - 通过数据库生成实体类”对话框

  6. 单击“下一步”。输入 server 作为包名称，如下图所示。

    创建服务器包

  7. 单击“创建持久性单元”。

    这将打开“创建持久性单元”对话框。
  8. 接受缺省设置，并单击“创建”，以创建持久性单元。
  9. 单击“完成”，以关闭“新建 - 通过数据库生成实体类”对话框。

配置持久性单元

在本部分中，我们将创建一个持久性单元，以便通知容器哪些实体类需要由实体管理器进行管理，以及这些实体所使用的数据源。

我们通过在 persistence.xml（将在 Web 模块中创建此文件）中定义持久性单元的属性来创建持久性单元。指定持久性单元的名称后，将指定该容器用来管理实体实例的持久性提供程序。此外，还需要指定数据源和表生成策略。我们将使用“新建持久性单元”向导创建持久性单元。

  1. 在“项目”窗口中，展开“配置文件”节点，然后双击 persistence.xml。

    将在 IDE 中打开 persistence.xml。

  2. 取消选中“在 "Autocomplete" 模块中包括所有实体类”复选框。

  3. 单击“添加类”，并在显示的对话框中选择 server.States，然后单击“确定”。这将确保 EntityManagerFactory 明确识别生成的实体类。

    编辑 persistence.xml 文件
  4. 在源代码编辑器的顶部，选择 "XML" 视图，并将 <properties/> 替换为以下代码样例。 

    <properties>
            <property name="toplink.jdbc.user" value="duke"/>
            <property name="toplink.jdbc.password" value="duke"/>
        </properties>

    注意：用户名和口令值必须与创建数据库时指定的用户名和口令值相匹配。

创建 Servlet

在本部分中，您将创建 Servlet 来生成动态内容，并允许使用请求-响应范例与 Web 客户端交互（通常是浏览器应用程序，如 Firefox 或 Internet Explorer）。

  1. 在“项目”窗口中，右键单击项目节点，然后选择“新建”> "Servlet"。

    将打开“新建 Servlet”对话框。

  2. 键入 StatesServlet 作为类名，键入或选择 server 作为包，然后单击“完成”。

    将在源代码编辑器中打开 StatesServlet.java。
  3. 将以下代码添加到 StatesServlet 类的开头（类声明的正下方）。 
    EntityManager em;


    @Override

    public void init() throws ServletException {

      EntityManagerFactory emf = Persistence.createEntityManagerFactory("AutocompletePU");

      em = emf.createEntityManager();

        }

  4. 将 processRequest 方法中注释掉的代码替换为以下代码。

    String searchString = request.getParameter("autocomplete_parameter");

    List<States> list = em.createNamedQuery("States.findLikeName").
         setParameter("searchString", searchString.toLowerCase() + "%").
         getResultList();
    out.println("<ul>");

    for (int i = 0; i < list.size(); i++) {
        States s = list.get(i);
        out.println("<li>" + s.getName() + "</li>");
    }
            out.println("</ul>");
  5. 在源代码编辑器中单击鼠标右键，然后选择“修复导入”。确保 java.util.List 显示在“修复所有导入”对话框中，然后单击“确定”。
  6. 在“项目”窗口中，右键单击 States.java，以便在源代码编辑器中将其打开。

  7. 直接在 @NamedQueries({ 后插入以下代码。

    @NamedQuery(name = "States.findLikeName", query = "SELECT s FROM States s WHERE LOWER(s.name) LIKE :searchString"),
  8. 保存并关闭 StatesServlet.java 和 States.java。

将 Script.aculo.us 库添加到项目中

Script.aculo.us 是一组 JavaScript 库，用于增强 Web 站点的用户界面。它提供可视效果引擎、拖放库（包括可排序列表）、一些控件（基于 Ajax 的自动完成、原位编辑、滑块）等。在 NetBeans IDE 6.5 中，Script.aculo.us 库包括在 Java 下载中。

  1. 在“项目”窗口中，右键单击“Web 页”文件夹，然后选择“新建”>“其他”。

  2. 在“新建文件”向导中，选择“其他”作为类别，选择“文件夹”作为文件类型。

  3. 在“新建文件夹”向导中，将新文件夹命名为 javascripts。单击“完成”。

  4. 在“项目”窗口中，右键单击项目节点，然后选择“属性”。

    将打开“项目属性”对话框。
  5. 在“项目属性”对话框的“类别”窗格中，选择“JavaScript 库”。

  6. 单击“添加”。

    将打开“添加 JavaScript 库”对话框。

  7. 从可用 JavaScript 库的列表中选择 Scriptaculous 1.8.1。

    添加 Script.aculo.us 库

    注意：JavaScript 库的缺省位置是 web/resources 文件夹。您可以单击库右侧的省略号 (...) 来更改此位置。

  8. 右键单击 Script.aculo.us 库右侧的省略号。浏览至在本部分的步骤 1-3 中创建的 javascripts 文件夹，然后单击“打开”。
  9. 单击“确定”将 Script.aculo.us 库添加到项目。
  10. 在“项目”窗口中，双击 index.jsp，在源代码编辑器中将其打开。

  11. 在 index.jsp 的 <head> 标记之间插入以下代码。

    <script src="javascripts/lib/prototype.js" type="text/javascript"></script>
    <script src="javascripts/src/scriptaculous.js?load=effects,controls" type="text/javascript"></script>
    <script type="text/javascript">
      window.onload = function() {
         new Ajax.Autocompleter("autocomplete", "autocomplete_choices", "/Autocomplete/StatesServlet", {});
      }
    </script>

  12. 在 <body> 标记（位于 <h1>Hello World!<h1> 正下方）之间插入以下代码。

    <input type="text" id="autocomplete" name="autocomplete_parameter"/>
    <div id="autocomplete_choices" class="autocomplete"></div>

  13. （可选）在 <head> 标记之间插入以下 CSS 元素，以改善应用程序的外观。

    <style>
        div.autocomplete {
            position:absolute;
            width:250px;
            background-color:white;
            margin:0px;
            padding:0px;
            overflow:hidden;
        }
        div.autocomplete ul {
            list-style-type:none;
            margin:0px;
            padding:0px;
            overflow:auto;
        }
        div.autocomplete ul li.selected { background-color: #ffb;}
        div.autocomplete ul li {
            list-style-type:none;
            display:block;
            margin:0;
            padding:2px;
            height:32px;
            cursor:pointer;
        }
    </style>
  14. 在源代码编辑器中单击鼠标右键，然后选择“格式化”重新设置代码的格式。

运行应用程序

现在可以运行项目了。在 NetBeans IDE 中，运行项目有多种方法。您可以单击主工具栏中的“运行”图标 “运行”图标，或者在“项目”窗口中右键单击项目节点，然后选择“运行”。

注意：缺省情况下，将在启用“在保存时编译”功能的情况下创建项目，因此无需先编译代码即可在 IDE 中运行应用程序。有关“在保存时编译”功能的详细信息，请参见创建、导入和配置 Java 项目指南的“在保存时编译”部分。

已部署的应用程序

  1. 在“项目”窗口中，右键单击该项目节点并选择“运行”。

  2. 通过在文本字段中键入字母来测试文本字段的 Ajax 功能。

    请注意如何从 states 数据库返回与您的输入相对应的美国各州。
  3. 选择一个显示选项，并注意是否在文本字段中输入了该选项。

小结

在本教程中，您创建了一个 Web 应用程序、创建并连接到了数据库，还使用了 Java 持久性 API。将 script.aculo.us JavaScript 库添加到项目中，以便您利用 Ajax 功能。

另请参见

 

本页的最新修改时间：2008 年 10 月 22 日

Companion
Projects: 		                  Powered by: