ajax不是一门新语言,只是一个很平常的即时响应技术,非常简单,一点都不玄虚,就像数据库技术一样能够运用至php,asp.net,asp与jsp等各大网页之中,与网页有着很好的融合性
ajax务必运行在服务器中,因为ajax是一项服务器技术,所以使用ajax在本地的两个未被挂载到服务器上的网页之间,传递数值是不可能的,尽管jquery是本身并不需要挂载到服务器上使用
那么ajax到底是什么呢?
传统的表单的提交有时会带给用户不良的体验,
比如以下的例子:
在jqueryajax.jsp下,有着如下的一个表单,很简单,就两个对话框,
<form action="jqueryhandle.jsp" method="post">
<input type="text" id="number1" name="number1"/>
<input type="text" id="number2" name="number2"/>
<input type="submit" value="go!"/>
</form>
向jqueryhandle.jsp中传递数值,希望jqueryhandle.jsp完成一个加法,
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String number1rec=request.getParameter("number1");
String number2rec=request.getParameter("number2");
int number1=Integer.parseInt(number1rec);
int number2=Integer.parseInt(number2rec);
int result=number1+number2;
%>
The result is:<%=result%>
然后输出结果
当然,这只是举个例子,完成加法大可以用javascript或者jquery等脚本语言直接完成,直接输出,不过问题是,如果,jqueryajax.jsp是向jqueryhandle.jsp甚至servlet或者ssh中传递一个值并且利用这个值查询数据库等后台操作了,那么就同时又希望达到如下的效果,不刷新,不提交表单就返回结果给用户,那应该怎么办呢?
这时候,就会利用到ajax技术。
一、基本目标
就是完成上面的例子,在两个文本框中输入两个数,不刷新,通过jqueryhandle.jsp瞬间得到结果
同时还要利用正则表达式认证这两个输入框是否为一个整数,免得jqueryhandle.jsp无法将其转换为整型,然后Tomcat控制台不停报错
二、制作过程
1、首先在eclipse中新建一个web工程,里面新建两个页面,一个jqueryajax.jsp与jqueryhandle.jsp,一个文件夹js,里面就装着一个jquery.js,至于jquery.js怎么配置可以参照我之前的《【jQuery】使用JQ来编写最基本的淡入淡出效果》一文(点击打开链接),其实也没有什么难的,就是从官网上下载一个js文件放进去就行了,目录结构如下:
2、jqueryhandle.jsp
ajax技术并不是用在这里,这里的代码就是上面的jqueryhandle.jsp代码,一段简单得没法再简单得jsp代码,要求得到number1与number2的两个数值,然后把他们转化为整型,再相加,并且把他们相加之后的结果result输出。
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String number1rec=request.getParameter("number1");
String number2rec=request.getParameter("number2");
int number1=Integer.parseInt(number1rec);
int number2=Integer.parseInt(number2rec);
int result=number1+number2;
%>
The result is:<%=result%>
但是,这段代码按理说,为防止恶意用户直接访问本页报错,所以应该加上抛出异常的结构,保护此页
3、jqueryajax.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jqueryajax</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
jqueryajax();
setInterval("jqueryajax()", 500);
})
function jqueryajax() {
var numbera=$("#number1").val();
var numberb=$("#number2").val();
var pattern=/^-?\d+$/;
var flag = pattern.test(numbera) && pattern.test(numberb);
if(flag==true){
$.ajax({
type:"post",
url:"jqueryhandle.jsp",
datatype:"text",
data:{
number1:numbera,
number2:numberb
},
success:function (data) {
$("#rec").text(data);
},
error: function () {
}
});
}
else{
$("#rec").text("请输入整数");
}
}
</script>
</head>
<body>
<form action="jqueryhandle.jsp" method="post">
<input type="text" id="number1" name="number1" />
<input type="text" id="number2" name="number2" />
<input type="submit" value="go!" />
</form>
<p id="rec"></p>
</body>
</html>
整个页面在不停地轮询jqueryajax()这个函数,每0.5秒执行一次jqueryajax(),详情可以参考我之前的《【JavaScript】使用setInterval()函数作简单的轮询操作》( 点击打开链接)一文。
jqueryajax()先是获取输入框的值,jquery对于网页节点的操作,也可以参考我之前的《【jQuery】控制节点,仅在前台通过get方法完成参数传递》一文(点击打开链接)
之后通过正则表达式来判断这个数是否同为整数
正则表达式是这样的,
比如:
var pattern=/^[0-9]*[1-9][0-9]*$/;
var flag = pattern.test(a);
正整数匹配表达式是/^[0-9]*[1-9][0-9]*$/;那么可以通过其test方法,来看a是否正整数,如果a是正整数,flag的boolean值为true,如果a不是正整数,flag的boolean值为false。
至于匹配表达式网上的资料库很多,比如我所使用到整数匹配表达式是:/^-?\d+$/;,而找<img src="">的html<img>标签的正则表达式是:/<img[\s]+[^>]+>/gi;,拿过来用其test方法就行了
有兴趣的朋友,可以看看正则表达式的语法,这里不作详细的介绍
如果是整数,那么着执行jquery中的ajax技术:
$.ajax({
type:"post",
url:"jqueryhandle.jsp",
datatype:"text",
data:{
number1:numbera,
number2:numberb
},
success:function (data) {
$("#rec").text(data);
},
error: function () {
}
});
这段结构一定要在一个js函数中,直接写在外面是不符合语法的,type里面是post方法或者get方法,url就是要相应的网页,相当于表单中的action属性,datatype是该相应网页返回的类型,一般是text,如果是json则下面的success中,要用data = eval(data);把其擦写成数组data,后对data[i]这个数组进行处理。
data属性就是要传递给jqueryhandle.jsp这个响应网页的参数,上面的意思是,给jqueryhandle.jsp需要的number1值,也就是jqueryhandle.jsp中request.getParameter("number1");要求的值为本网页的numbera,其实一般numbera都写成number1的,这里为了说明才改名的。
之后success是ajax成功处理之后,你需要执行的网页脚本,一般都成功的,所以error结构一般留空,当然,你也可以在里面写写弹出
function中的data形式参数,意为jqueryhandle.jsp的所有内容拿过来,这里仅有一条脚本,就是把id为rec的p标签里面的值变为这个形式参数data。
自此,整个Jqueryajax工程开发完毕,挂到tomcat中就能看到结果,兼容所有浏览器。