- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章Ajax+Servlet+jsp显示搜索效果由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.
1、Ajax简介 Ajax被认为是(Asynchronous JavaScript and XML)的缩写,允许浏览器与服务器通信而无需刷新当前的页面的技术都被叫做Ajax eg:百度搜索、实时地图、etc,在Ajax模型中,数据在客户端与服务器之间独立传输,服务器用不刷新整个页面便可更新数据; 。
2、Ajax的工作原理图 。
3、Ajax发送和接收相应的方法 1、发送请求相应的方法 1)、onreadystatechange事件处理函数:该函数由服务器触发而不是用户,每次readyState属性的改变都会触发onreadystatechange事件 2)、open(method,url,asynchronized):XMLHttpRequest对象的open()允许程序用一个Ajax调用服务器发送请求,method请求类型可以为“GET” or “POST”,url为路径字符串,sysnchronized表示请求是否要异步传输 3)、send(data):data为将也传递给服务器的字符串,若选用的为“GET”请求,data为null即可. 。
2、接收相应的方法 1)、readyState:表示Ajax的当前状态,用数值表示,0表示初始化,1表示正在加载,2表示已加载完,3表示服务器正在发送响应,4表示响应发送完毕,当请求结束的时候,每个浏览器都会把readyState的值设为4; 2)、status:和javaweb中一样,404没有找到页面,403禁止访问,500内部服务器出错,200一切正常,304没有被修改,XMLHttpRequest对象中,服务器发送的状态码都保存在status属性里,通过这个值,可以确保服务器是否已发送了一个成功的响应; 3)、responseText:包含了从服务器发送的数据,一般为HTML,XML或者普通文本,当readyState的值为4且status为200时,responseText属性才可以用,表面Ajax请求已经结束,如果服务器返回的是XML,则数据将存储在responseXML中. 。
4、代码演示(仿百度搜索框) 。
1、创建javaweb工程(工程目录结构如下) 。
2、SearchServlet.java 。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
package
cn.jon.ajax;
import
java.io.IOException;
import
java.util.List;
import
javax.servlet.ServletException;
import
javax.servlet.http.HttpServlet;
import
javax.servlet.http.HttpServletRequest;
import
javax.servlet.http.HttpServletResponse;
import
net.sf.json.JSONArray;
import
cn.jon.ajax.data.DataUtils;
public
class
SearchServlet
extends
HttpServlet {
private
static
final
long
serialVersionUID = 1L;
public
void
doGet(HttpServletRequest request, HttpServletResponse response)
throws
ServletException, IOException {
//设置请求和响应的输出格式为utf-8
request.setCharacterEncoding(
"utf-8"
);
response.setCharacterEncoding(
"utf-8"
);
String keyword=request.getParameter(
"keyword"
);
if
(keyword!=
null
)
{
DataUtils dataResource=
new
DataUtils();
List<String> list=dataResource.findDataList(keyword);
//System.out.println(JSONArray.fromObject(list).toString());
response.getWriter().write(JSONArray.fromObject(list).toString());
}
}
public
void
doPost(HttpServletRequest request, HttpServletResponse response)
throws
ServletException, IOException {
doGet(request,response);
}
}
|
3、DataUtils.java,读取资源文件下的数据 。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
package
cn.jon.ajax.data;
import
java.io.BufferedReader;
import
java.io.IOException;
import
java.io.InputStream;
import
java.io.InputStreamReader;
import
java.util.ArrayList;
import
java.util.List;
public
class
DataUtils {
private
static
List<String> dataList=
new
ArrayList<String>();
public
static
final
String URL=
"/test.txt"
;
static
{
readResource(URL);
// dataList.add("aa");
// dataList.add("ajax");
// dataList.add("afinal");
// dataList.add("bb");
}
//
public
static
void
readResource(String url)
{
InputStream is=
null
;
InputStreamReader isr=
null
;
BufferedReader br=
null
;
String line=
null
;
try
{
is=DataUtils.
class
.getClassLoader().getResourceAsStream(url);
isr=
new
InputStreamReader(is);
br=
new
BufferedReader(isr);
line=br.readLine();
while
(
null
!=line) {
if
(!line.isEmpty()) {
dataList.add(line);
}
line=br.readLine();
}
//while
}
catch
(IOException e) {
e.printStackTrace();
}
finally
{
if
(
null
!=br) {
try
{
br.close();
}
catch
(IOException e) {
}
}
if
(
null
!=isr) {
try
{
isr.close();
}
catch
(IOException e) {
}
}
if
(
null
!=is) {
try
{
is.close();
}
catch
(IOException e) {
}
}
}
}
public
List<String> findDataList(String str)
{
List<String> data=
new
ArrayList<String>();
for
(String sData:dataList)
{
if
(sData.contains(str)) {
data.add(sData);
}
}
//for
return
data;
}
}
|
4、index.jsp,页面显示 。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<
html
>
<
head
>
<
link
rel
=
"stylesheet"
href
=
"css/my.css"
>
<
script
type
=
"text/javascript"
src
=
"js/my.js"
>
</
script
>
</
head
>
<
body
>
<
div
id
=
"mydiv"
>
<
img
alt
=
"baidu"
src
=
"img/baidu.png"
>
<!-- 输入框 -->
<
input
type
=
"text"
size
=
"50"
id
=
"keyword"
onkeyup
=
"getMoreContents()"
onblur
=
"keywordBlur()"
onfocus
=
"getMoreContents()"
/>
<
input
id
=
"button"
type
=
"button"
value
=
"百度一下"
width
=
"50px"
/>
<!-- 下面是内容展示区域 -->
<
div
id
=
"popDiv"
>
<
table
id
=
"content-table"
bgcolor
=
"#FFFAFA"
border
=
"0"
cellspacing
=
"0"
cellpadding
=
"0"
>
<
tbody
id
=
"content_table_body"
>
<!-- 动态查询出来的数据显示在这里 -->
</
tbody
>
</
table
>
</
div
>
</
div
>
</
body
>
</
html
>
|
5、my.js,ajax的核心部分 。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
var
xmlHttp;
//1.获得用户输入内容的关联信息的函数
function
getMoreContents(){
//首先获得用户输入
var
content = document.getElementById(
"keyword"
);
if
(content.value ==
""
){
//当输入框为空时,清空之前的数据
clearContent();
return
;
}
//alert(content.value);
//2.然后要给服务器发送用户输入的内容,因为我们采用的是ajax异步发送数据,所以我们要使用xmlHttp对象
//xmlHttp = 获得xmlHttp对象;
xmlHttp = createXMLHttp();
//alert(xmlHttp);
//3.要给服务器发送数据,首先定义一个服务器的地址,
var
url =
"search?keyword="
+escape(content.value);
//true表示JavaScript脚本会在send()方法之后继续执行,而不会等待来自服务器的响应。
xmlHttp.open(
"GET"
,url,
true
);
//xmlHttp绑定回调方法,这个回调方法会在xmlHttp状态改变的时候会被调用
//xmlHttp的状态:0-4,我们只关心4(complete)这个状态,所以说当完成之后,再调用回调函数才有意义。
xmlHttp.onreadystatechange = callback;
//参数已经在url中了,不用在此处添加参数
xmlHttp.send(
null
);
}
//获得xmlHttp对象
function
createXMLHttp(){
//对于大多数浏览器都适用的
var
xmlHttp;
if
(window.XMLHttpRequest){
xmlHttp =
new
XMLHttpRequest();
}
//要考虑浏览器的兼容性
if
(window.ActiveXObject){
xmlHttp =
new
ActiveXObject(
"Microsoft.XMLHTTP"
);
//如果浏览器有ActiveXObject对象,但没有Microsoft.XMLHTTP的参数
if
(!xmlHttp){
xmlHttp =
new
ActiveXObject(
"Msxml2.XMLHTTP"
);
}
}
return
xmlHttp;
}
//回调函数
function
callback(){
//4表示完成
if
(xmlHttp.readyState == 4){
//200代表服务器响应成功,404代表资源未找到,500代表服务器内部错误
if
(xmlHttp.status == 200){
//交互成功,获得相应的数据,是文本格式。
var
result = xmlHttp.responseText;
//解析获得的数据
var
json = eval(
"("
+result+
")"
);
//获得这些数据之后,就可以动态的显示数据了。把这些数据展示到输入框下面。
//alert(json);
setContent(json);
}
}
}
//设置关联数据的展示,参数代表服务器传递过来的关联数据
function
setContent(contents){
//清空之前的数据
clearContent();
//设置位置
setLocaltion();
//首先获得关联数据的长度,以此来确定生成多少个<tr></tr>
var
size = contents.length;
//设置内容
for
(
var
i =0;i < size;i++){
var
nextNode = contents[i];
//代表json数据的第i个元素
var
tr = document.createElement(
"tr"
);
var
td = document.createElement(
"td"
);
td.setAttribute(
"borde"
,
"0"
);
td.setAttribute(
"gbcolor"
,
"#FFFAFA"
);
//为td绑定两个样式(鼠标进入和鼠标移出时事件)
td.onmouseover =
function
(){
this
.className =
'mouseOver'
;
};
td.onmouseout =
function
(){
this
.className =
'mouseOut'
;
};
td.onclick =
function
(){
//这个方法实现的是,当用鼠标点击一个关联数据时,关联数据自动填充到输入框中。
};
td.onmousedown =
function
(){
//当鼠标点击一个关联数据时,自动在输入框添加数据
document.getElementById(
"keyword"
).value =
this
.innerText;
};
//鼠标悬浮于关联数据上时,自动添加到输入框中
/* td.onmouseover = function(){
this.className = 'mouseOver';
if(td.innerText != null)
document.getElementById("keyword").value =this.innerText;
} */
//创建一个文本节点
var
text = document.createTextNode(nextNode);
td.appendChild(text);
tr.appendChild(td);
document.getElementById(
"content_table_body"
).appendChild(tr);
}
}
//清空之前的数据
function
clearContent(){
var
contentTableBody = document.getElementById(
"content_table_body"
);
var
size = contentTableBody.childNodes.length;
//删除时,从下往上删
for
(
var
i = size-1;i>=0;i--){
//指定删除第i个子节点
contentTableBody.removeChild(contentTableBody.childNodes[i]);
}
//清除关联数据的外边框
var
popDiv = document.getElementById(
"popDiv"
).style.border=
"none"
;
}
//当输入框失去焦点时,清空之前的数据
function
keywordBlur(){
clearContent();
}
//设置显示关联信息的位置
function
setLocaltion(){
//关联信息的显示位置要和输入框一致
var
content = document.getElementById(
"keyword"
);
var
width = content.offsetWidth;
//输入框的长度
var
left = content[
"offsetLeft"
];
//到左边框的距离
var
top = content[
"offsetTop"
]+content.offsetHeight;
//到顶部的距离(加上输入框本身的高度)
//获得显示数据的div
var
popDiv = document.getElementById(
"popDiv"
);
popDiv.style.border =
"gray 1px solid"
;
popDiv.style.left = left+
"px"
;
popDiv.style.top = top+
"px"
;
popDiv.style.width = width+
"px"
;
document.getElementById(
"content-table"
).style.width = width+
"px"
;
}
|
6、my.css,控件的样式 。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
#mydiv
{
position
:
absolute
;
left
:
50%
;
top
:
50%
;
margin-left
:
-200px
;
margin-top
:
-120px
;
}
#button
{
background-color
:
#5566ee
;
}
.mouseOver
{
background
:
#708090
;
color
:
#fffafa
;
}
.mouseOut
{
background
:
#fffafa
;
color
:
#000000
;
}
|
注:该代码来自慕课网的学习,自己进行了改进,希望有兴趣的一起交流和学习. 。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我.
最后此篇关于Ajax+Servlet+jsp显示搜索效果的文章就讲到这里了,如果你想了解更多关于Ajax+Servlet+jsp显示搜索效果的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
我在我的应用程序中使用 Hibernate Search。其中一个子集合被映射为 IndexedEmbedded。子对象有两个字段,一个是 id,另一个是日期(使用日期分辨率到毫秒)。当我搜索 id=
The App Engine Search API有一个 GeoPoint 字段。可以用它来进行半径搜索吗?例如,给定一个 GeoPoint,查找位于特定半径内的所有文档。 截至目前,它看起来像 Ge
客户对我正在做的员工管理项目提出了这个新要求,以允许他们的用户进行自定义 bool 搜索。 基本上允许他们使用:AND、OR、NOT、括号和引号。 实现它的最佳方法是什么?我检查了 mysql,它们使
很想知道哪个更快 - 如果我有一个包含 25000 个键值对的数组和一个包含相同信息的 MySQL 数据库,搜索哪个会更快? 非常感谢大家! 最佳答案 回答这个问题的最好方法是执行基准测试。 关于ph
我喜欢 smartcase,也喜欢 * 和 # 搜索命令。但我更希望 * 和 # 搜索命令区分大小写,而/和 ?搜索命令遵循 smartcase 启发式。 是否有隐藏在某个地方我还没有找到的设置?我宁
我有以下 Marklogic 查询,当在查询控制台中运行时,它允许我检索具有管理员权限的系统用户: xquery version "1.0-ml"; import schema namespace b
我希望当您搜索例如“A”时,所有以“A”开头的全名都会出现。因此,如果名为“Andreas blabla”的用户将显示 我现在有这个: $query = "SELECT full_name, id,
我想在我的网站上添加对人名的搜索。好友列表已经显示在页面上。 我喜欢 Facebook 这样做的方式,您开始输入姓名,Facebook 只会显示与查询匹配的好友。 http://cl.ly/2t2V0
您好,我在我的网站上进行搜索时遇到此错误。 Fatal error: Uncaught Error: Call to undefined function mysql_connect() in /ho
声明( 叠甲 ):鄙人水平有限,本文为作者的学习总结,仅供参考。 1. 搜索介绍 搜索算法包括深度优先搜索(DFS)和广度优先搜索(BFS)这两种,从起点开始,逐渐扩大
我正在为用户列表使用 FuturBuilder。我通过 futur: fetchpost() 通过 API 获取用户。在专栏的开头,我实现了一个搜索栏。那么我该如何实现我的搜索栏正在搜索呢? Cont
我正在使用 MVC5,我想搜索结果并停留在同一页面,这是我在 Controller (LiaisonsProjetsPPController) 中执行搜索操作的方法: public ActionRes
Azure 搜索中的两种方法 Upload 与 MergeOrUpload 之间有什么区别。 他们都做完全相同的事情。即,如果文档不存在,它们都会上传文档;如果文档已经存在,则替换该文档。 由于这两种
实际上,声音匹配/搜索的当前状态是什么?我目前正在远程参与规划一个 Web 应用程序,该应用程序将包含和公开记录的短音频剪辑(最多 3-5 秒,人名)的数据库。已经提出了一个问题,是否可以实现基于用户
在商业应用程序中,具有数百个面并不罕见。当然,并非所有产品都带有所有这些标记。 但是在搜索时,我需要添加一个方面查询字符串参数,其中列出了我想要返回的所有方面。由于我事先不知道相关列表,因此我必须在查
当我使用nvcc 5.0编译.cu文件时,编译器会为我提供以下信息。 /usr/bin/ld: skipping incompatible /usr/local/cuda-5.0/lib/libcud
我正在使用基于丰富的 Lucene 查询解析器语法的 Azure 搜索。我将“~1”定义为距离符号的附加参数)。但我面临的问题是,即使存在完全匹配,实体也没有排序。 (例如,“blue~1”将返回“b
我目前有 3 个类,一个包含 GUI 的主类,我在其中调用此方法,一个包含数据的客户类,以及一个从客户类收集数据并将其放入数组列表的 customerList 类,以及还包含搜索数组列表方法。 我正在
假设我有多个 6 字符的字母数字字符串。 abc123、abc231、abc456、cba123、bac231 和 bac123 。 基本上我想要一个可以搜索和列出所有 abc 实例的选择语句。 我只
我有这个表 "Table"内容: +--------+ | Serial | +--------+ | d100m | <- expected result | D100M | <- expect
我是一名优秀的程序员,十分优秀!