ajax技术从2005年就开始流行了起来，主要是这种技术能给用户带来更好的浏览体验，它开启了web2.0时代，现在的项目开发中或多或少都用了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
<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>AJAX输入提示</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">
<style type="text/css" media="screen">
.onmouset_out {
background-color: #99CCFF;
padding: 2px 6px 2px 6px;
}
.onmouset_over {
background-color: #006600;
padding: 2px 6px 2px 6px;
}
#result_display {
border: 1px solid #FFFFFF;
}
</style>
<script type="text/javascript">
var xmlHttp;
//创建XMLHttpRequest对象
function createXmlHttp() {
//根据window.XMLHttpRequest对象是否存在使用不同的创建方式
if (window.XMLHttpRequest) {
//FireFox、Opera等浏览器支持的创建方式
xmlHttp = new XMLHttpRequest();
} else {
//IE浏览器支持的创建方式
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function inputSuggest() {
var txtValue = document.getElementById('txt').value;
createXmlHttp();
xmlHttp.onreadystatechange = _handle;
url = "suggest.do?txtValue=" + txtValue;
xmlHttp.open("POST", url, false);
xmlHttp.send(null);
}
function _handle() {
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
var str = xmlHttp.responseText.split("#");
var s = document.getElementById('result_display')
s.innerHTML = '';
for(i=0; i < str.length - 1; i++) {
var suggest = '<div onmouseover="onmouseOver(this);" ';
suggest += 'onmouseout="onmousetOut(this);" ';
suggest += 'onclick="setSuggestValue(this.innerHTML);" ';
suggest += 'class="onmouset_out">' + str[i] + '</div>';
s.innerHTML += suggest;
}
}
}
}
function onmouseOver(div) {
div.className = 'onmouse_over';
}
function onmousetOut(div) {
div.className = 'onmouset_out';
}
function setSuggestValue(value) {
document.getElementById('txt').value = value;
document.getElementById('result_display').innerHTML = '';
}
</script>
</head>
<body>
<h3>一个简单的AJAX输入提示</h3>
<form id="frmSearch" action="">
<input type="text" id="txt" name="author" alt="输入条件" onkeyup="inputSuggest();" style="width:200px"/>
<input type="submit" id="search" value="搜索" alt="搜索"/><br />
<div id="result_display" style="width:200px">
</div>
</form>
</body>
</html>
2、编写后台处理异步请求的处理器，该处理器我采用的是struts1.2的action,你使用其他的（如servlet，struts2等）都一样，下面是该action的完整代码:SuggestAction.java
package org.hnylj.ajax.action;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import org.hnylj.db.DbManager;
/**
* 根据前台输入异步从后台获取数据的Action
* @编写者：hnylj
*
*/
public class SuggestAction extends Action {
private DbManager dbManager;
public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
String param = request.getParameter("txtValue");
dbManager = new DbManager();
String result = dbManager.searchSuggest(param);
PrintWriter out = response.getWriter();
out.print(result);
out.flush();
return null;
}
}
3.该action调用了一个数据库操作类，下面是该数据库操作类的完整代码：DbManager.java
package org.hnylj.db;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
/**
* 数据库管理与操作
* @编写者：hnylj
*
*/
public class DbManager {
private Connection conn;
private Statement stmt;
private ResultSet rs;
private static final String DRIVER = "com.mysql.jdbc.Driver";
private static final String URL = "jdbc:mysql://localhost/suggest";
private static final String USERNAME = "root";
private static final String PASSWORD = "123";
// 数据库连接
public synchronized Connection getConnection() {
try {
Class.forName(DRIVER);
conn = DriverManager.getConnection(URL, USERNAME, PASSWORD);
} catch (ClassNotFoundException e) {
e.printStackTrace();
return null;
} catch (SQLException e) {
e.printStackTrace();
return null;
}
return conn;
}
/**
* 获取符合输入条件的数据
* @param conn
* @param sql
* @return
*/
public String searchSuggest(String param) {
String sql = "select author from article where author like '" + param + "%' order by author";
String author = "";
String str = "";
try {
conn = this.getConnection();
stmt = conn.createStatement();
rs = stmt.executeQuery(sql);
while (rs.next()) {
author = rs.getString("author");
str += author + "#";
}
} catch (SQLException e) {
e.printStackTrace();
return "";
}
return str;
}
}
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.iteye.com
一个Java技术交流群，一起交流，共同进步，扣扣群号：513086638
相关推荐
在实现自动提示功能时，需要创建实体类，用于存储输入条件的相关信息。实体类可以包含多个属性，例如输入条件的名称、描述、类型等。这些属性将被用于自动提示的逻辑处理中。 逻辑处理类 逻辑处理类是实现自动提示...
在现代Web应用中，"Ajax实现输入筐自动提醒"是一个常见的功能，它极大地提升了用户体验，尤其是在数据录入或者搜索场景下。Ajax（Asynchronous JavaScript and XML）技术允许网页在不重新加载整个页面的情况下与...
jsp+ajax实现输入框自动搜索 本文将详细介绍如何使用jsp和ajax技术实现输入框自动搜索功能，类似于百度搜索。 一、标题：jsp+ajax实现输入框自动搜索 该标题表明该技术使用jsp和ajax实现输入框自动搜索功能。 二...
本文将深入探讨如何使用Ajax实现输入提示功能，尤其关注支持中文的情况。 一、Ajax基础 Ajax的核心是JavaScript对象XMLHttpRequest，它允许在不刷新整个页面的情况下与服务器进行通信。通过创建XMLHttpRequest对象...
**Ajax 实现自动提示搜索** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新，大大提升了...
### AJAX实现Google输入自动完成简单模拟 #### 一、引言 随着Web应用程序的发展，用户体验变得越来越重要。其中，输入自动完成（Auto Complete）功能在许多网站上得到了广泛应用，能够极大地提升用户的输入效率和...
标题中的“Ajax自动提示”指的是在网页中使用Ajax技术实现的一种动态输入提示功能。Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这种技术通常用于提升...
- **jQuery AutoComplete插件**：这是一个基于jQuery UI的插件，可以根据用户输入自动搜索和过滤选项，从而帮助用户从预设列表中快速选择合适的项。 #### 实现原理 实现搜索框输入提示功能的核心在于使用JQuery捕获...
本项目是使用JSP技术实现的一个Ajax自动提示功能，其目的是模拟百度搜索引擎的搜索提示效果。 首先，我们需要理解Ajax（Asynchronous JavaScript and XML）的核心理念。Ajax并非一种新技术，而是通过JavaScript、...
**标题解析：** "用AJAX实现文本框自动提示的小例子" 这个标题表明我们将讨论如何使用AJAX（异步JavaScript和XML）技术来创建一个功能，即当用户在文本框中输入内容时，系统会自动提供相关提示。这个功能常见于搜索...
总结，Ajax搜索下拉菜单提示js源代码是结合Ajax和JavaScript实现的一种动态搜索功能，通过监听用户输入、发送Ajax请求、处理返回数据并动态更新页面内容，提高了搜索的效率和用户体验。理解并掌握这些知识点，有助于...
Ajax实现自动提示的文本框,是提示颜色输入的一个实例，代码简单易懂
在本实例中，我们探讨的是如何使用AJAX实现自动保存草稿的功能，这对于在线编辑器或者任何需要实时保存用户输入内容的应用场景非常有用。下面我们将深入理解AJAX的核心原理，并结合实例讲解如何创建一个自动保存功能...
【标题】中的“AJAX实现的输入网址自动显示排名的源程序”是一个基于C#和ASP.NET技术构建的Web应用程序，旨在提供一个实时的搜索引擎优化（SEO）工具。该工具利用AJAX（Asynchronous JavaScript and XML）技术，使得...
Google的自动提示功能就是Ajax应用的经典案例，它能够在用户输入关键字时，实时地从服务器获取并显示相关的搜索建议。 在本程序中，我们看到它是用PHP作为后端语言来实现这一功能的。PHP是一种广泛应用的开源脚本...
一个常见的提升用户体验的设计是实现输入框的智能提示功能，就像Google搜索框那样，当用户开始输入时，系统会根据已输入的字符动态地提供相关的建议或搜索结果。这种功能主要依赖于Ajax（异步JavaScript和XML）技术...
在描述中的“shh jquery json输入提示内容功能”可能是指使用jQuery的Ajax方法，结合JSON数据格式，实现一种输入框的自动提示功能。当用户在输入框中输入字符时，jQuery会发送Ajax请求到服务器，服务器根据输入内容...
ASP.NET 是一个强大的Web应用程序开发框架，由微软公司推出，...这就是使用ASP.NET和Ajax Toolkit实现输入自动补全的基本步骤。通过这种方式，你可以为用户提供更加流畅和高效的交互体验，提高网站的可用性和用户体验。
在本文中，我们将深入探讨如何使用jQuery实现一个基于Ajax的文本框自动补全功能，以及相关的`autocomplete`插件的完整实例。这个功能在许多Web应用程序中非常常见，它能够提高用户输入的效率和用户体验。 首先，让...