AJAX实例
今天是AJAX在web开
发中的典型应用，也是AJAX的最后一天课，老佟不愧是AJAX的行家，以至于每个班的AJAX都是他带的，老佟讲课风趣极了，课
堂总是不是传来同学们笑声。。。经过三天的js和昨天的AJAX的学习，今天终于可以体现一下无刷新的感觉。
日期验证：
1. 日期验证的需求:
1). 当 birth 输入框中的文字是 "请输入您的生日"
时, 鼠标获取焦点时,
文本框中的字符变为空格
2). 当失去焦点时, 若文本框中的字符为空格,
使其值重新设为 "请输入您的生日"
3). 当失去焦点, 且文本框中的字符不是空格,
且其值发生变化时, 发送
Ajax
请求到服务器端验证输入的日期格式是否合法.
①. 若不合法, 给出 "您输入的日期不合法"
②. 若合法, 给出 "您输入的日期合法"
2. Ajax 请求时提示信息
3.有等待的特效
工程整体结构如图：注：使用的是jQuery库
1.
新建input-date.jsp页面，关键代
码：
2.
<script type="text/javascript"
src="${pageContext.request.contextPath}/scripts/jquery-1.3.1.js"></script>
<script
type="text/javascript">
$(function(){
$("#birth").focus(function(){
var value = $.trim(this.value);
if(value == this.defaultValue){
this.value = "";
}
}).blur(function(){
var value = $.trim(this.value);
if(value == ""){
this.value = this.defaultValue;
}
}).change(function(){
var value = $.trim(this.value);
//再加一个需求：当文本框中的值发生变化, 且其
值不是默认值, 长度在
8 --10 之间,
此时会发送
Ajax 请求
if(value != this.defaultValue &&
value.length >= 8 &&
value.length <= 10){
var url =
"${pageContext.request.contextPath
}/dateValidateServlet";
var args = {time: new Date(),
birth: value};
$.post(url, args, function(data){
$("#datemsg").html(data);
});
}else{
alert("日期不合法!");
this.value = this.defaultValue;
}
});
});
</script>
</head>
<body>
<h3>Ajax Validation
Example</h3>
Birth date(yyyy-MM-dd): <input id="birth"
type="text" name="birth" value="请输
入您的生日" />
<br>
<div
id="datemsg"></div>
</body>
2.新建DateValidateServlet，关键代码：
//1. 获取 birth
String birth = request.getParameter("birth");
//2. 验证
Pattern p =
Pattern.compile("^((""d{2}(([02468][048])|([13579][26]))[""-""-""s]?((((0?"
+
"[13578])|(1[02]))[""-""-""s]?((0?[1-9])|([1-2][0-9])|(3[01])))"
+
"|(((0?[469])|(11))[""-""-""s]?((0?[1-9])|([1-2][0-9])|(30)))|"
+
"(0?2[""-""-""s]?((0?[1-9])|([1-2][0-9])))))|(""d{2}(([02468][12"
+
"35679])|([13579][01345789]))[""-""-""s]?((((0?[13578])|(1[02]))"
+
"[""-""-""s]?((0?[1-9])|([1-2][0-9])|(3[01])))|(((0?[469])|(11))"
+
"[""-""-""s]?((0?[1-9])|([1-2][0-9])|(30)))|(0?2[""-""-""s]?((0?["
+
"1-9])|(1[0-9])|(2[0-8]))))))");
boolean flag = p.matcher(birth).matches();
//3. 根据验证结果返回字符串
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
if(flag){
out.println("<font
color='green'>日期格式合法</font>");
}else{
out.println("<font
color='red'>日期格式不合法</font>");
}
}
3.加上特效：
1.新建文件夹commons，再建ajax.jsp,写代码：
如下
<script type="text/javascript"
src="${pageContext.request.contextPath
}/scripts/jquery.blockUI.js"></script>
<script
type="text/javascript">
$().ajaxStart(function(){
$.blockUI({
message: $('img#loading'),
css: {
top: ($(window).height() -
150) /2 + 'px',
left: ($(window).width() - 400) /2 + 'px',
border: 'none',
padding: '5px',
color: '#fff'
},
overlayCSS: { backgroundColor: '#fff' }
});
}).ajaxStop($.unblockUI);
</script>
<img
id="loading"
alt=""
src="${pageContext.request.contextPath
}/images/loading.gif"
style="display:none" />
注：代码可参看jquery.blockUI的文档
2.在input_date.jsp
<head>标签体中加上如下代码：
<%@
include
file="/commons/ajax.jsp" %>
3.接着导入jquery.blockUI.js文件
4.最后，便可在tomcat下访问：http://localhost:8080/ajax-1/input-date.jsp
,输入合法日期，结果如图
明天是Hibernate的课程。老徐讲的，老徐讲
课之深入已早有所耳闻，且待明天之开始！
posted on 2010-01-31 23:30
d66380022 阅读(143)
评论(0) 编辑 收藏