`

Ajax_动态加载列表框

AjaxAIRJSPCacheJavaScript 
阅读更多

JSP部分：

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

   <title>My JSP 'index.jsp' starting page</title>
   <meta http-equiv="pragma" content="no-cache">
   <meta http-equiv="cache-control" content="no-cache">
   <meta http-equiv="expires" content="0">
   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
   <meta http-equiv="description" content="This is my page">
   <script type="text/javascript">
　　var xmlHttp;
　　function createXMLHttpRequest() {
   　　if (window.ActiveXObject) {
   　　   xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
   　　}
   　　else if (window.XMLHttpRequest) {
　　    xmlHttp = new XMLHttpRequest();
　　   }
　　}

　　function refreshModelList() {
   　　var make = document.getElementById("make").value;
   　　var modelYear = document.getElementById("modelYear").value;
   　　if(make == "" || modelYear == "") {
   　　   clearModelsList();
   　　   return;
　　   }
   　　var url = "RefreshModelListServlet?"+ createQueryString(make, modelYear) + "&ts=" + new Date().getTime();
   　　createXMLHttpRequest();
　　     xmlHttp.onreadystatechange = handleStateChange;
   　　xmlHttp.open("GET", url, true);
   　　xmlHttp.send(null);
　　}

　　function createQueryString(make, modelYear) {
   　　var queryString = "make=" + make + "&modelYear=" + modelYear;
   　　return queryString;
　　}

　　function handleStateChange() {
   　　if(xmlHttp.readyState == 4) {
    　　if(xmlHttp.status == 200) {
    　　   updateModelsList();
    　　}
   　　}
　　}

　　function updateModelsList() {
　　    clearModelsList();
   　　var models = document.getElementById("models");
   　　var results = xmlHttp.responseXML.getElementsByTagName("model");
   　　var option = null;
   　　for(var i = 0; i < results.length; i++) {
    　　option = document.createElement("option");
    　　option.appendChild(document.createTextNode(results[i].firstChild.nodeValue));
    　　models.appendChild(option);
   　　}
　 }

　　function clearModelsList() {
   　　var models = document.getElementById("models");
   　　while(models.childNodes.length > 0) {
   　　   models.removeChild(models.childNodes[0]);
   　　}
　　}
　　</script>
</head>
<body>
   <h1>
    Select Model Year and Make
   </h1>
   <form action="#">
    <span style="font-weight:bold;">Model Year:</span>
    <select id="modelYear" onchange="refreshModelList();">
     <option value="">
      Select One
     </option>
     <option value="2006">
      2006
     </option>
     <option value="1995">
      1995
     </option>
     <option value="1985">
      1985
     </option>
     <option value="1970">
      1970
     </option>
    </select>
    <br />
    <br />
    <span style="font-weight:bold;">Make:</span>
    <select id="make" onchange="refreshModelList();">
     <option value="">
      Select One
     </option>
     <option value="Chevrolet">
      Chevrolet
     </option>
     <option value="Dodge">
      Dodge
     </option>
     <option value="Pontiac">
      Pontiac
     </option>
    </select>
    <br />
    <br />
    <span style="font-weight:bold;">Models:</span>
    <br />
    <select id="models" size="6" style="width:300px;">
    </select>
   </form>
</body>
</html>

Servlet部分：

public class RefreshModelListServlet extends HttpServlet {

private static List<MakeModelYear> availableModels = new ArrayList();

public void init() throws ServletException {
   availableModels.add(new MakeModelYear(2006, "Dodge", "Charger"));
   availableModels.add(new MakeModelYear(2006, "Dodge", "Magnum"));
   availableModels.add(new MakeModelYear(2006, "Dodge", "Ram"));
   availableModels.add(new MakeModelYear(2006, "Dodge", "Viper"));
   availableModels.add(new MakeModelYear(1995, "Dodge", "Avenger"));
   availableModels.add(new MakeModelYear(1995, "Dodge", "Intrepid"));
   availableModels.add(new MakeModelYear(1995, "Dodge", "Neon"));
   availableModels.add(new MakeModelYear(1995, "Dodge", "Spirit"));
   availableModels.add(new MakeModelYear(1985, "Dodge", "Aries"));
   availableModels.add(new MakeModelYear(1985, "Dodge", "Daytona"));
   availableModels.add(new MakeModelYear(1985, "Dodge", "Diplomat"));
   availableModels.add(new MakeModelYear(1985, "Dodge", "Omni"));
   availableModels.add(new MakeModelYear(1970, "Dodge", "Challenger"));
   availableModels.add(new MakeModelYear(1970, "Dodge", "Charger"));
   availableModels.add(new MakeModelYear(1970, "Dodge", "Coronet"));
   availableModels.add(new MakeModelYear(1970, "Dodge", "Dart"));
   availableModels.add(new MakeModelYear(2006, "Chevrolet", "Colorado"));
   availableModels.add(new MakeModelYear(2006, "Chevrolet", "Corvette"));
   availableModels.add(new MakeModelYear(2006, "Chevrolet", "Equinox"));
   availableModels.add(new MakeModelYear(2006, "Chevrolet", "Monte Carlo"));
   availableModels.add(new MakeModelYear(1995, "Chevrolet", "Beretta"));
   availableModels.add(new MakeModelYear(1995, "Chevrolet", "Camaro"));
   availableModels.add(new MakeModelYear(1995, "Chevrolet", "Cavalier"));
   availableModels.add(new MakeModelYear(1995, "Chevrolet", "Lumina"));
   availableModels.add(new MakeModelYear(1985, "Chevrolet", "Cavalier"));
   availableModels.add(new MakeModelYear(1985, "Chevrolet", "Chevette"));
   availableModels.add(new MakeModelYear(1985, "Chevrolet", "Celebrity"));
   availableModels.add(new MakeModelYear(1985, "Chevrolet", "Citation II"));
   availableModels.add(new MakeModelYear(1970, "Chevrolet", "Bel Air"));
   availableModels.add(new MakeModelYear(1970, "Chevrolet", "Caprice"));
   availableModels.add(new MakeModelYear(1970, "Chevrolet", "Chevelle"));
   availableModels.add(new MakeModelYear(1970, "Chevrolet", "Monte Carlo"));
   availableModels.add(new MakeModelYear(2006, "Pontiac", "G6"));
   availableModels.add(new MakeModelYear(2006, "Pontiac", "Grand Prix"));
   availableModels.add(new MakeModelYear(2006, "Pontiac", "Solstice"));
   availableModels.add(new MakeModelYear(2006, "Pontiac", "Vibe"));
   availableModels.add(new MakeModelYear(1995, "Pontiac", "Bonneville"));
   availableModels.add(new MakeModelYear(1995, "Pontiac", "Grand Am"));
   availableModels.add(new MakeModelYear(1995, "Pontiac", "Grand Prix"));
   availableModels.add(new MakeModelYear(1995, "Pontiac", "Firebird"));
   availableModels.add(new MakeModelYear(1985, "Pontiac", "6000"));
   availableModels.add(new MakeModelYear(1985, "Pontiac", "Fiero"));
   availableModels.add(new MakeModelYear(1985, "Pontiac", "Grand Prix"));
   availableModels.add(new MakeModelYear(1985, "Pontiac", "Parisienne"));
   availableModels.add(new MakeModelYear(1970, "Pontiac", "Catalina"));
   availableModels.add(new MakeModelYear(1970, "Pontiac", "GTO"));
   availableModels.add(new MakeModelYear(1970, "Pontiac", "LeMans"));
   availableModels.add(new MakeModelYear(1970, "Pontiac", "Tempest"));
}

public void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
    this.doPost(request, response);
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
    processRequest(request, response);
}

protected void processRequest(HttpServletRequest request,
    HttpServletResponse response) throws ServletException, IOException {
   response.setContentType("text/html;charset=UTF-8");
   int modelYear = Integer.parseInt(request.getParameter("modelYear"));
   String make = request.getParameter("make");
   StringBuffer results = new StringBuffer("<models>");
   MakeModelYear availableModel = null;
   for (Iterator it = availableModels.iterator(); it.hasNext();) {
    availableModel = (MakeModelYear) it.next();
    if (availableModel.modelYear == modelYear) {
     if (availableModel.make.equals(make)) {
      results.append("<model>");
      results.append(availableModel.model);
      results.append("</model>");
     }
    }
   }
   results.append("</models>");
   response.setContentType("text/xml");
   response.getWriter().write(results.toString());
}


private static class MakeModelYear {
   private int modelYear;

   private String make;

   private String model;

   public MakeModelYear(int modelYear, String make, String model) {
    this.modelYear = modelYear;
    this.make = make;
    this.model = model;
   }
}

}

分享到：
| Ajax_创建自动刷新页面
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ajax动态加载列表框

    本文将深入探讨“Ajax动态加载列表框”的概念、实现方式以及相关知识点。 Ajax动态加载列表框，简单来说，就是利用Ajax技术来实现在用户交互时动态更新下拉选择框（Select Box）中的选项，而无需整个页面刷新。这种...

    ajaxcc(动态加载列表框).rar

    在"ajaxcc(动态加载列表框)"这个项目中，我们关注的是如何利用Ajax来实现动态加载下拉列表框的内容。动态加载列表框是一种常见的交互设计，它能够在用户滚动或选择某个选项时，根据需求动态地从服务器获取并显示新的...

    动态加载下拉列表框

    在IT领域，动态加载下拉列表框是一种常见的交互设计，特别是在网页或应用程序中。它允许用户从一个可扩展的选项列表中进行选择，而这些选项可能不会一次性全部显示，而是根据用户的操作动态加载。这种技术提高了用户...

    用Eclipse与AJAX技术在JSP中实现动态加载列表框

    ### 使用Eclipse与AJAX技术在JSP中实现动态加载列表框 #### 一、引言 随着Web技术的发展，用户对于网页交互性与实时性的需求越来越高。传统的Web应用程序通过表单提交的方式与服务器交互，这往往导致用户体验不佳...

    Ajax+JSON 搜索框自动完成提示功能

    Ajax（异步JavaScript和XML）是Web开发中的一种技术，它允许页面在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。而JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和...

    AJAX实现的动态下拉列表框例子

    在网页设计中，动态下拉列表框...总结来说，AJAX实现的动态下拉列表框利用了异步通信的能力，提升了用户体验，使网页更加互动和高效。开发者需要掌握JavaScript、DOM操作以及服务器端编程技术，才能成功实现这一功能。

    ajax 下拉列表框

    **Ajax 下拉列表框详解** Ajax（Asynchronous JavaScript and XML）技术是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。在Web开发中，它极大地提升了用户体验，使得页面交互更加流畅。本教程将...

    AJAX_MG 页面动态分组信息显示

    **AJAX_MG 页面动态分组信息显示**是一种在网页中实现数据动态更新的技术，它主要基于AJAX（Asynchronous JavaScript and XML）技术，能够无需刷新整个页面即可更新部分网页内容。这种技术在JSP（JavaServer Pages）...

    基于jquery.masonry插件开发的瀑布流ajax动态加载数据功能

    在本项目中，我们利用jQuery Masonry插件来实现瀑布流效果，并结合Ajax技术实现动态加载数据，进一步提升用户体验。 jQuery Masonry插件是由David DeSandro开发的一个JavaScript库，它的主要功能是将网页中的元素以...

    AJAX_Control AJAX_Control

    AJAX_Control是一个用于ASP.NET应用中的控件集，它提供了许多增强用户体验的功能，如异步交互、动态加载、动画效果等。以下将详细介绍这些控件的功能和相关知识点： 1. **AlwaysVisibleControl**: 这个控件允许创建...

    treegrid_barku4k_treegrid_jqueryajax_

    理解以上知识点，你将能够利用这个“treegrid_barku4k_treegrid_jqueryajax_”实现构建自己的树形表格，同时也能掌握如何利用jQuery和AJAX处理动态数据加载。在实际项目中，还可以结合后端框架如ASP.NET、PHP或Node....

    Ajax实现动态加载组合框的实例代码

    本文详细介绍了如何使用Ajax技术实现动态加载下拉列表（组合框）功能。通过实例代码，我们能够理解在用户交互过程中，如何通过异步请求从服务器获取数据，并动态更新页面上的选择框。下面将详细解析文中的关键知识点...

    AJAX_Servlet级联下拉列表

    在Web开发中，AJAX（Asynchronous JavaScript and XML）与Servlet技术常常被用来实现动态、交互式的用户界面，其中一种常见的应用就是级联下拉列表。级联下拉列表允许用户在选择一个选项后，根据所选选项动态加载并...

    jsp-Ajax_Login_songxv7_jsp_

    【标题】"jsp-Ajax_Login_songxv7_jsp_" 指的是一份使用JSP和Ajax技术实现无刷新登录的示例项目。在这个项目中，开发人员 "songxv7" 展示了如何在JSP页面上集成Ajax，以提供更流畅的用户体验，避免在用户进行登录...

    HR.rar_HR J2_ajax_ajax java_extjs j2_人力资源管理系统 java

    具体到功能实现，例如员工信息管理，系统可能通过ExtJS的Grid组件展示员工列表，支持数据的增删改查操作，并通过AJAX进行后台数据交互，实时更新界面。招聘管理可能包含职位发布、简历筛选等功能，而考勤管理则涉及...

    《Beginning_Ajax_with_PHP_From_Novice_to_Professional》配套源代码

    1. **示例代码**：这些是书中各个章节对应的实践示例，用于演示如何用PHP和AJAX构建实际功能，如异步数据提交、动态内容加载、表单验证等。 2. **库和框架**：可能包含了一些常用的JavaScript库，如jQuery，它简化...

    ajax+jsp+Hibernate-blog.rar_ajax code_blog jsp co_jsp ajax_jsp b

    例如，用户在查看某篇文章时，评论部分可以通过Ajax异步加载，减少了等待时间，提高了用户体验。此外，Ajax还可以用于搜索功能，实时显示搜索结果，提供即时反馈。 其次，JSP作为视图层，主要负责页面的渲染和展示...

    pyecharts_Django_Ajax_web前后端分离demo.zip

    Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。在本示例中，Ajax被用于在用户与网页交互时，无刷新地向后端发送请求并接收响应数据。这提高了用户体验，...

    ajax_city_.rar_city

    接着在选择城市时，对应的县/区也会动态加载，无需刷新整个页面，极大地提升了用户体验。 【描述】中的关键点在于使用了 .NET 程序设计，这通常指的是 Microsoft 的 .NET Framework 或 .NET Core 开发环境，用于...

Magicbox
Global site tag (gtag.js) - Google Analytics