下面就ajax入门做了一个简单的实例:
下面我们就开始吧
第一步:导入我们需要的jqurery.js在这里和我们myeclipse中有所不同需要我们去到工程的目录下把jqurery.js复制在我们在web目录新建的jslib目录中,这个目录用来存放我们的.js文件 就是javascript脚本 jqurery.js封装了许多的js我们只需去调用就行
第二步:编写一个Servlet 在src目录中新建一个AJAXServer
public class AJAXServer extends HttpServlet{
protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
doGet(httpServletRequest, httpServletResponse);
}
protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
try{
// request.setCharacterEncoding("UTF-8");
// response.setContentType("text/html;charset=gb18030");
httpServletResponse.setContentType("text/html;charset=utf-8");
PrintWriter out = httpServletResponse.getWriter();
Integer inte = (Integer) httpServletRequest.getSession().getAttribute("total");
int temp = 0;
if (inte == null) {
temp = 1;
} else {
temp = inte.intValue() + 1;
}
httpServletRequest.getSession().setAttribute("total",temp);
//1.取参数
String old = httpServletRequest.getParameter("name");
//String name = new String(old.getBytes("iso8859-1"),"UTF-8");
String name=null;
if(!old.equals("") && (old != null))
{
name = URLDecoder.decode(old,"UTF-8");
}
//2.检查参数是否有问题
if(old == null || old.length() == 0){
out.println("用户名不能为空");
} else{
// String name = URLDecoder.decode(old,"UTF-8");
// byte[] by = old.getBytes("ISO8859-1");
// String name = new String(by,"utf-8");
// String name = URLDecoder.decode(old,"utf-8");
//3.校验操作
// String name = old;
if(name.equals("liyong")){
//4。和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面段,而不是将一个新的页面发送给用户
//写法没有变化,本质发生了改变
out.println("用户名[" + name + "]已经存在,请使用其他用户名, " + temp);
} else{
out.println("用户名[" + name + "]尚未存在,可以使用该用户名注册, " + temp);
}
}
} catch(Exception e){
e.printStackTrace();
}
}
}
第三步:编写一个ajax.html提供用户提交数据
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="jslib/jquery.js"></script>
<script type="text/javascript" src="jslib/verify1.js"></script>
</head>
<body>
ajax验证输入用户名:<br/>
<input type="text" id="userName" >
<input type="button" value="校验" onclick="verify()">
<div id="result"></div>
</body>
</html>
第四步:编写上面需要的verify() js函数
//定义用户名校验
function verify()
{
//通过ID找到这个节点
var jQuryObj=$("#userName");
//获取这个节点属性值
var username=jQuryObj.val();
//使用jQuery的XMLHTTPrequest对象的get请求的封装,代码运行到这里会继续向下运行
//当服务器有数据返回的时候就去回调这个回调函数callback这里必须是函数名不能带有参数
$.get("AJAXServer?name="+username,null,callback);
// alert(username);
}
function callback(data)
{
//alert("服务器数据返回");
//alert(data);
var resultObj=$("#result");
resultObj.html(data)
;
第五步:部署运行...