【Jsp】Jqueryajax技术在Jsp中的应用与javascript中的正则表达式
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中就能看到结果，兼容所有浏览器。