1. Ajax(Asynchronous JavaScript and XML)是一个结合了Java技术、XML、以及JavaScript的编程技术,可以让你构建基于Java技术的Web应用,并打破了使用页面重载的惯例。
2. Ajax,异步JavaScript与XML,是使用客户端脚本与Web服务器交换数据的Web应用开发方法。这样,Web页面不用打断交互流程进行重新加裁,就可以动态地更新。使用Ajax,你可以创建接近本地桌面应用的,直接的、高可用的、更丰富的、更动态的Web用户接口界面。
3. 对于Mozilla﹑Netscape﹑Safari、Firefox等浏览器,创建XMLHttpRequest 方法如下:
xmlhttp_request = new XMLHttpRequest();
4. IE等创建XMLHttpRequest 方法如下:
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP")
或 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
5. xmlhttp_request.open('GET', URL, true); xmlhttp_request.send(null);
6. open()的第一个参数是HTTP请求方式—GET,POST或任何服务器所支持的您想调用的方式。 按照HTTP规范,该参数要大写;否则,某些浏览器(如Firefox)可能无法处理请求。第二个参数是请求页面的URL。第三个参数设置请求是否为异步模式。如果是TRUE,JavaScript函数将继续执行,而不等待服务器响应。这就是"AJAX"中的"A"。
接下来我主要想用实例来说话,下面这个例子是一个企业用户注册时的一个应用,当用户注册时检查用户名和企业名是否可用,以前的做法是在旁边加一个按钮,点击“检查”,就向服务器发出请求,然后等待……服务器返回信息,继续操作。如果我们用Ajax技术来实现以上的操作则不必等待服务器返回信息,用户输入用户名或企业名称的时候,当输入文本框失去焦点的时候,则会自动向服务器发出请求,用户继续做下面的操作,不必点击“检查”,也不必等待服务器返回信息,检查与用户操作是异步的,可同时进行。当服务器信息返回的时候,会自动在面页相应位置显示返回信息,不必刷新页面,相当于局部刷新的效果。
下面我们来看代码吧。
HTML页面的完整代码如下:
1![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
<%
@page language="java" contentType="text/html;charset=GBK"%>
2![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
<script language="javascript" type="text/javascript">![](/Images/dot.gif)
3
<!--
4![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//**Ajax 开始 by Alpha 2005-12-31*/
5![](/Images/OutliningIndicators/InBlock.gif)
6
var http = getHTTPObject();
7![](/Images/OutliningIndicators/InBlock.gif)
8![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function handleHttpResponse()
{
9![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(http.readyState == 4)
{
10![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(http.status == 200)
{
11
var xmlDocument = http.responseXML;
12![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(http.responseText!="")
{
13
document.getElementById("showStr").style.display = "";
14
document.getElementById("userName").style.background= "#FF0000";
15
document.getElementById("showStr").innerText = http.responseText;
16![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}else
{
17
document.getElementById("userName").style.background= "#FFFFFF";
18
document.getElementById("showStr").style.display = "none";
19
}
20
21
}
22![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
else
{
23
alert("你所请求的页面发生异常,可能会影响你浏览该页的信息!");
24
alert(http.status);
25
}
26
}
27
}
28![](/Images/OutliningIndicators/InBlock.gif)
29![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function handleHttpResponse1()
{
30![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(http.readyState == 4)
{
31![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(http.status == 200)
{
32
var xmlDocument = http.responseXML;
33![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(http.responseText!="")
{
34
document.getElementById("comNmStr").style.display = "";
35
document.getElementById("comNm").style.background= "#FF0000";
36
document.getElementById("comNmStr").innerText = http.responseText;
37![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}else
{
38
document.getElementById("comNm").style.background= "#FFFFFF";
39
document.getElementById("comNmStr").style.display = "none";
40
}
41
42
}
43![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
else
{
44
alert("你所请求的页面发生异常,可能会影响你浏览该页的信息!");
45
alert(http.status);
46
}
47
}
48
}
49![](/Images/OutliningIndicators/InBlock.gif)
50![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function chkUser()
{
51
var url = "/chkUserAndCom";
52
var name = document.getElementById("userName").value;
53
url += ("&userName="+name+"&oprate=chkUser");
54
http.open("GET",url,true);
55
http.onreadystatechange = handleHttpResponse;
56
http.send(null);
57
return ;
58
}
59![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function chkComNm()
{
60
var url = "/chkUserAndCom";
61
var name = document.getElementById("comNm").value;
62
url += ("&comName="+name+"&oprate=chkCom");
63
http.open("GET",url,true);
64
http.onreadystatechange = handleHttpResponse1;
65
http.send(null);
66
return ;
67
}
68
69
//该函数可以创建我们需要的XMLHttpRequest对象
70![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function getHTTPObject()
{
71
var xmlhttp = false;
72![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(window.XMLHttpRequest)
{
73
xmlhttp = new XMLHttpRequest();
74![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(xmlhttp.overrideMimeType)
{
75
xmlhttp.overrideMimeType('text/xml');
76
}
77
}
78![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
else
{
79![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
try
{
80
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
81![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}catch(e)
{
82![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
try
{
83
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
84![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
}catch(E)
{
85
xmlhttp = false;
86
}
87
}
88
}
89
return xmlhttp;
90
}
91![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//**Ajax 结束*/
92![](/Images/OutliningIndicators/InBlock.gif)
93
//检测表单
94
function chkpassword()
95![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/ContractedSubBlock.gif)
{
96
var m=document.form1;
97
if(len(m.password.value) > 20 || len(m.password.value) < 5 || !isStr(m.password.value))
98![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
99
document.getElementById("passwordStr").style.display = "";
100
document.getElementById("password").style.background= "#FF0000";
101
document.getElementById("passwordStr").innerText = "对不起,密码必须为英文字母、数字或下划线,长度为5~20!";
102
}
103
else
104![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
105
document.getElementById("password").style.background= "#FFFFFF";
106
document.getElementById("passwordStr").style.display = "none";
107
}
108
}
109![](/Images/OutliningIndicators/InBlock.gif)
110
function chkconfirmPassword()
111![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/ContractedSubBlock.gif)
{
112
var m=document.form1;
113
if (m.password.value != m.confirmPassword.value)
114![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
115
document.getElementById("confirmPasswordStr").style.display = "";
116
document.getElementById("confirmPassword").style.background= "#FF0000";
117
document.getElementById("confirmPasswordStr").innerText = "对不起,密码与重复密码不一致!";
118
}
119
else
120![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
121
document.getElementById("confirmPassword").style.background= "#FFFFFF";
122
document.getElementById("confirmPasswordStr").style.display = "none";
123
}
124
}
125![](/Images/OutliningIndicators/InBlock.gif)
126
function checkfield()
127![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](/Images/OutliningIndicators/ContractedSubBlock.gif)
{
128
var m=document.form1;
129
if(m.userName.value.length==0)
130![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
131
alert("对不起,用户名必须为英文字母、数字或下划线,长度为5~20。");
132
m.userName.focus();
133
return false;
134
}
135
if(m.password.value.length==0)
136![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
137
alert("对不起,密码必须为英文字母、数字或下划线,长度为5~20。");
138
m.password.focus();
139
return false;
140
}
141
if (m.password.value != m.confirmPassword.value)
142![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
143
alert("对不起,密码与重复密码不一致!");
144
m.confirmPassword.focus();
145
return false;
146
}
147
if(m.comNm.value.length==0)
148![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
149
alert("对不起,企业名称不能为空!!");
150
m.comNm.focus();
151
return false;
152
}
153
m.submit();
154
}
155![](/Images/OutliningIndicators/InBlock.gif)
156
//-->
157
</script>
158
<body topmargin="0">
159
<form name="form1" method="post" action="/Control?act=Register">
160
<table width="100%">
161
<tr><td align="center"> <H2>Ajax 演示程序</H1></td></tr>
162
<tr><td align="center"> ------ 企业注册 By Alpha</td></tr>
163
</table>
164![](/Images/OutliningIndicators/None.gif)
165
<HR>
166
<table width="400" border="0" cellpadding="1" cellspacing="1" align="center" >
167
<tr>
168
<td><font color="red">*</font></td>
169
<td>用户帐号:</td>
170
<td>
171
<input type="text" name="userName" maxlength="20" style="background:#FFFFFF" onBlur="chkUser()" value=""/>
172
<div id="showStr" style="background-color:#FF9900;display:none"></div>
173
</td>
174
</tr>
175
<tr>
176
<td><font color="red">*</font></td>
177
<td>企业名称:</td>
178
<td>
179
<input type="text" name="comNm" maxlength="100" style="background:#FFFFFF" onBlur="chkComNm()" value=""/>
180
<div id="comNmStr" style="background-color:#FF9900;display:none"></div>
181
182
</td>
183
</tr>
184
<tr>
185
<td><font color="red">*</font></td>
186
<td>用户密码:</td>
187
<td><input type="password" name="password" maxlength="20" style="background:#FFFFFF" onBlur="chkpassword()"/>
188
<div id="passwordStr" style="background-color:#FF9900;display:none"></div>
189
</td>
190
</tr>
191
<tr>
192
<td><font color="red">*</font></td>
193
<td>确认密码:</td>
194
<td><input type="password" name="confirmPassword" maxlength="20" style="background:#FFFFFF" onBlur="chkconfirmPassword()"/>
195
<div id="confirmPasswordStr" style="background-color:#FF9900;display:none"></div>
196
</td>
197
</tr>
198
</table>
199![](/Images/OutliningIndicators/None.gif)
200
<div align="center">
201
<input type="button" name="ok" value=" 确 定 " onclick="checkfield()">
202
203
<input type="reset" name="reset" value=" 取 消 ">
204
</div>
205![](/Images/OutliningIndicators/None.gif)
206
</form>
207
</body>
208
</html>
用JavaScript来创建XMLHttpRequest 类向服务器发送一个HTTP请求后,接下来要决定当收到服务器的响应后,需要做什么。这需要告诉HTTP请求对象用哪一个JavaScript函数处理这个响应。可以将对象的onreadystatechange属性设置为要使用的JavaScript的函数名,如下所示:xmlhttp_request.onreadystatechange =FunctionName;
FunctionName是用JavaScript创建的函数名,注意不要写成FunctionName(),当然我们也可以直接将JavaScript代码创建在onreadystatechange之后。
我们调用request.open()-它用服务器打开套接字频道,使用一个HTTP动词(GET或POST)作为第一个参数并且以数据提供者的URL作为第二个参数。request.open()的最后一个参数被设置为true-它指示该请求的异步特性。注意,该请求还没有被提交。随着对request.send()的调用,开始提交-这可以为POST提供任何必要的有效载荷。在使用异步请求时,我们必须使用request.onreadystatechanged属性来分配请求的回调函数。(如果请求是同步的话,我们应该能够在调用request.send之后立即处理结果,但是我们也有可能阻断用户,直到该请求完成为止。)
我看再看看数据提供者的URL,url = "/chkUserAndCom",servlet如下:
1![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
/**//*
2
* Created on 2005-12-31
3
*
4
* TODO To change the template for this generated file go to
5
* Window - Preferences - Java - Code Style - Code Templates
6
*/
7
package com.event;
8![](/Images/OutliningIndicators/None.gif)
9
import javax.servlet.ServletException;
10
import javax.servlet.http.HttpServletRequest;
11
import javax.servlet.http.HttpServletResponse;
12![](/Images/OutliningIndicators/None.gif)
13
import com.beans.EBaseInfo;
14![](/Images/OutliningIndicators/None.gif)
15![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
/** *//**
16
* @author Alpha 2005-12-31
17
*
18
* <P>Ajax 演示---企业注册时检查企业用户名和企业名称</P>
19
*
20
* TODO To change the template for this generated type comment go to
21
* Window - Preferences - Java - Code Style - Code Templates
22
*/
23![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
public class CheckUserAndComNm
{
24
private String msgStr = "";
25
protected void doGet(HttpServletRequest request,HttpServletResponse response)
26
throws ServletException
27![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
28![](/Images/OutliningIndicators/InBlock.gif)
29
EComBaseInfo info=new EComBaseInfo();
30
String oprate=request.getParameter("oprate")).trim();
31
String userName=request.getParameter("userName");
32
String passWord=request.getParameter("password");
33
String comName=request.getParameter("comName");
34
35
try
36![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
37
if(oprate.equals("chkUser"))
38![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
39
response.setContentType("text/html;charset=GB2312");
40
if(userName.length()<5||userName.length()>20)
41![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
42
msgStr = "对不起,用户名必须为字母、数字或下划线,长度为5-20个字符!";
43
}
44
else
45![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
46
boolean bTmp=info.findUser(userName); //找查数据库中有无该用户名
47
if(bTmp)
48
msgStr ="对不起,此用户名已经存在,请更换用户名注册!";
49
else
50
msgStr ="";
51
}
52
response.getWriter().write(msgStr);
53
}
54
else if(oprate.equals("chkCom"))
55![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
56
response.setContentType("text/html;charset=GB2312");
57
if(comName.length()<6||comName.length()>100)
58![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
59
msgStr = "对不起,公司名称长度为6-100个字符(不包括字符内的空格)!";
60
}
61
else
62![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
63
boolean bTmp=info.findCom(comName); //找查数据库中有无该企业名
64
if(bTmp)
65
msgStr ="对不起,此企业名称已经存在,请更换企业名称注册!";
66
else
67
msgStr ="";
68
}
69
response.getWriter().write(msgStr);
70
71
}
72
}
73
catch(Exception ex)
74![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
75
}
76
finally
77![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
78
request.setAttribute("url",url);
79
}
80
}
81![](/Images/OutliningIndicators/InBlock.gif)
82
protected void doPost(HttpServletRequest request,HttpServletResponse response)
83
throws ServletException
84![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
85
doGet(request,response);
86
}
87
}
88![](/Images/OutliningIndicators/None.gif)
Ajax技术运用的好的话,给我们的网页增添了许多友好的效果,给用户还来更好的感觉。Ajax是个好东西。
posted on 2006-01-04 17:07
Alpha 阅读(4063)
评论(3) 编辑 收藏 所属分类:
jQuery JavaScript Flex