• 经典ajax实例ajax实现输入时的自动提示jsp(转)

    ajax技术从2005年就开始流行了起来，主要是这种技术能给用户带来更好的浏览体验，能创建更丰富的web页面，现在的项目开发中或多或少都用了ajax技术。  

    先概括性地介绍一下ajax，ajax是Asynchronous JavaScript and XML（以及 DHTML 等）的缩写。Ajax提供与服务器异步通信的能力，借助于Ajax技术，可以异步地向服务器发出请求，以执行更新或查询数据库。当请求返回时，就可以使用JavaScript和CSS来相应地更新页面，而不是刷新整个页面。最重要的是，用户甚至不知道浏览器正在与服务器通信，Web站点看起来好象是即时响应的。

    Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应。

    下面是本人使用ajax实现的一个简单例子，该实例实现了输入时的自动提示，类似于google输入时的提示。

    基本思路是：前台输入查询条件，在输入的同时触发一个javascript事件，该事件创建一个XMLHttpRequest对象并异步向服务器提交请求，服务器端收到请求后执行数据库查询，将查询得到的数据以字符串的形式返回至客户端浏览器，然后将该字符串在客户端浏览器显示。

    按照如下的步骤进行：
    1、编写一个jsp页面，在这个页面中有一个输入框，当用户在该输入框中输入了一个字符之后，在输入框下方将自动显示符合输入条件的从数据库中查询出来的值。下面是该jsp页面的完整代码：index.jsp

    Html代码 复制代码
    1. <%@ page language="java" pageEncoding="utf-8"%>  
    2.   
    3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    4. <html>  
    5.   <head>  
    6.     <title>AJAX输入提示</title>  
    7.     <meta http-equiv="pragma" content="no-cache">  
    8.     <meta http-equiv="cache-control" content="no-cache">  
    9.     <meta http-equiv="expires" content="0">       
    10.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
    11.     <meta http-equiv="description" content="This is my page">  
    12.     <style type="text/css" media="screen">  
    13.      .onmouset_out {   
    14.        background-color: #99CCFF;   
    15.        padding: 2px 6px 2px 6px;   
    16.      }   
    17.      .onmouset_over {    
    18.        background-color: #006600;   
    19.        padding: 2px 6px 2px 6px;   
    20.      }   
    21.      #result_display {   
    22.        border: 1px solid #FFFFFF;      
    23.      }     
    24.     </style>  
    25.     <script type="text/javascript">  
    26.       var xmlHttp;    
    27.       //创建XMLHttpRequest对象   
    28.       function createXmlHttp() {   
    29.       //根据window.XMLHttpRequest对象是否存在使用不同的创建方式   
    30.         if (window.XMLHttpRequest) {   
    31.            //FireFox、Opera等浏览器支持的创建方式   
    32.            xmlHttp = new XMLHttpRequest();    
    33.         } else {   
    34.            //IE浏览器支持的创建方式   
    35.            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");   
    36.         }   
    37.       }   
    38.       function inputSuggest() {   
    39.          var txtValue = document.getElementById('txt').value;   
    40.          createXmlHttp();   
    41.          xmlHttp.onreadystatechange = _handle;   
    42.          url = "suggest.do?txtValue=" + txtValue;   
    43.          xmlHttp.open("POST", url, false);   
    44.          xmlHttp.send(null);   
    45.       }   
    46.       function _handle() {   
    47.          if(xmlHttp.readyState==4){   
    48.             if(xmlHttp.status==200){   
    49.                 var str = xmlHttp.responseText.split("#");   
    50.                 var s = document.getElementById('result_display')   
    51.                 s.innerHTML = '';   
    52.                 for(i=0; i < str.length - 1; i++) {   
    53.                    var suggest = '<div onmouseover="onmouseOver(this);" ';   
    54.                    suggest += 'onmouseout="onmousetOut(this);" ';   
    55.                    suggest += 'onclick="setSuggestValue(this.innerHTML);" ';   
    56.                    suggest += 'class="onmouset_out">' + str[i] + '</div>';   
    57.                    s.innerHTML += suggest;   
    58.                 }   
    59.             }   
    60.          }   
    61.       }   
    62.       function onmouseOver(div) {   
    63.          div.className = 'onmouse_over';   
    64.       }   
    65.       function onmousetOut(div) {   
    66.          div.className = 'onmouset_out';   
    67.       }   
    68.       function setSuggestValue(value) {   
    69.          document.getElementById('txt').value = value;   
    70.          document.getElementById('result_display').innerHTML = '';   
    71.       }   
    72.     </script>  
    73.   </head>  
    74.      
    75.   <body>  
    76.     <h3>一个简单的AJAX输入提示</h3>  
    77.      <form id="frmSearch" action="">  
    78.        <input type="text" id="txt" name="author" alt="输入条件" onkeyup="inputSuggest();" style="200px"/>  
    79.        <input type="submit" id="search" value="搜索" alt="搜索"/><br />  
    80.        <div id="result_display" style="200px">  
    81.        </div>  
    82.      </form>  
    83.   </body>  
    84. </html>  

    2、编写后台处理异步请求的处理器，该处理器我采用的是struts1.2的action,你使用其他的（如servlet，struts2等）都一样，下面是该action的完整代码:SuggestAction.java

    Java代码 复制代码
    1. package org.hnylj.ajax.action;   
    2.   
    3. import java.io.PrintWriter;   
    4.   
    5. import javax.servlet.http.HttpServletRequest;   
    6. import javax.servlet.http.HttpServletResponse;   
    7.   
    8. import org.apache.struts.action.Action;   
    9. import org.apache.struts.action.ActionForm;   
    10. import org.apache.struts.action.ActionForward;   
    11. import org.apache.struts.action.ActionMapping;   
    12. import org.hnylj.db.DbManager;   
    13.   
    14. /**  
    15.  * 根据前台输入异步从后台获取数据的Action  
    16.  * @编写者：hnylj  
    17.  *  
    18.  */  
    19. public class SuggestAction extends Action {   
    20.   
    21.     private DbManager dbManager;   
    22.        
    23.     public ActionForward execute(ActionMapping mapping, ActionForm form,   
    24.             HttpServletRequest request, HttpServletResponse response)   
    25.             throws Exception {   
    26.         String param = request.getParameter("txtValue");   
    27.         dbManager = new DbManager();   
    28.         String result = dbManager.searchSuggest(param);   
    29.         PrintWriter out = response.getWriter();   
    30.         out.print(result);   
    31.         out.flush();   
    32.         return null;   
    33.     }   
    34. }  

    3.该action调用了一个数据库操作类，下面是该数据库操作类的完整代码：DbManager.java

    Java代码 复制代码
    1. package org.hnylj.db;   
    2.   
    3. import java.sql.Connection;   
    4. import java.sql.DriverManager;   
    5. import java.sql.ResultSet;   
    6. import java.sql.SQLException;   
    7. import java.sql.Statement;   
    8.   
    9. /**  
    10.  * 数据库管理与操作  
    11.  * @编写者：hnylj  
    12.  *  
    13.  */  
    14. public class DbManager {   
    15.     private Connection conn;   
    16.     private Statement stmt;   
    17.     private ResultSet rs;   
    18.   
    19.     private static final String DRIVER = "com.mysql.jdbc.Driver";   
    20.     private static final String URL = "jdbc:mysql://localhost/suggest";   
    21.     private static final String USERNAME = "root";   
    22.     private static final String PASSWORD = "123";   
    23.   
    24.     // 数据库连接   
    25.     public synchronized Connection getConnection() {   
    26.         try {   
    27.             Class.forName(DRIVER);   
    28.             conn = DriverManager.getConnection(URL, USERNAME, PASSWORD);   
    29.         } catch (ClassNotFoundException e) {   
    30.             e.printStackTrace();   
    31.             return null;   
    32.         } catch (SQLException e) {   
    33.             e.printStackTrace();   
    34.             return null;   
    35.         }   
    36.         return conn;   
    37.     }   
    38.        
    39.     /**  
    40.      * 获取符合输入条件的数据  
    41.      * @param conn  
    42.      * @param sql  
    43.      * @return  
    44.      */  
    45.     public String searchSuggest(String param) {   
    46.         String sql = "select author from article where author like '" + param + "%' order by author";   
    47.         String author = "";   
    48.         String str = "";   
    49.         try {   
    50.             conn = this.getConnection();   
    51.             stmt = conn.createStatement();   
    52.             rs = stmt.executeQuery(sql);   
    53.             while (rs.next()) {   
    54.                 author = rs.getString("author");   
    55.                 str += author + "#";   
    56.             }   
    57.         } catch (SQLException e) {   
    58.             e.printStackTrace();   
    59.             return "";   
    60.         }   
    61.         return str;   
    62.     }   
    63. }   

    4.整个应用你还需要其他的一些配置：
     (1). 数据库表(使用mysql)：

      create database suggest;
      use suggest;

      create table article (  
         stu_id integer auto_increment,
         author varchar(30) not null,  
         title varchar(50) not null,  
         primary key(stu_id)  
      );  

      insert into article(author,title) values('hnylj','ajax');
      insert into article(author,title) values('hylj','java');
      insert into article(author,title) values('hxycj','struts');
      insert into article(author,title) values('hzyhj','hibernate');
      insert into article(author,title) values('haykj','spring');
      insert into article(author,title) values('hkyth','oracle');
      insert into article(author,title) values('hlyyi','lucence'); 

    (2).保证struts程序正常运行所需要的其他配置，在这里不一以列出，你可以下载我提供的附件，该附件是一个完整的可以运行的程序。

    jsp页面代码有点丑陋，大家可以在其基础上修改，也可以增强其功能，例如增加每个显示结果的条数等！

    和大家一起交流，我的博客地址：http://hnylj.javaeye.com
  • 相关阅读:
    如何加快github下载代码的速度
    还原 对于 服务器“ZHULIN-DB-DEV”失败。 (Microsoft.SqlServer.SmoExtended)
    sqlserver 常用语句
    sql 中 rank() over,dense_rank(),row_number() 的区别
    sqlserver 算两个日期间的月份数
    理解http的幂等性
    学习的第一推动力（很好）
    clean-room 洁净室软件工程
    如何组建测试团队
    vscode go 调试 launch.json
  • 原文地址：https://www.cnblogs.com/huozhicheng/p/2533210.html
Copyright © 2020-2023  润新知