zoukankan      html  css  js  c++  java

  • 经典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
  • 相关阅读:
    deeplearning.ai 卷积神经网络 Week 1 卷积神经网络
    deeplearning.ai 构建机器学习项目 Week 2 机器学习策略 II
    deeplearning.ai 构建机器学习项目 Week 1 机器学习策略 I
    deeplearning.ai 改善深层神经网络 week3 超参数调试、Batch Normalization和程序框架
    deeplearning.ai 改善深层神经网络 week2 优化算法
    deeplearning.ai 改善深层神经网络 week1 深度学习的实用层面
    cs231n spring 2017 lecture8 Deep Learning Networks
    cs231n spring 2017 lecture7 Training Neural Networks II
    cs231n spring 2017 lecture6 Training Neural Networks I
    cs231n spring 2017 Python/Numpy基础
  • 原文地址：https://www.cnblogs.com/huozhicheng/p/2533210.html
Copyright © 2011-2022 走看看