1.准备Ajax服务器端环境
我们将使用jQuery来实现Ajax的效果。
jQuery，顾名思议，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。
使用Ajax技术服务器端要做的四步
1.取参数
2.检查参数是否有问题
3.校验操作
4.和传统应用不同之处，这一步需要将用户感兴趣的数据(data)返回给页面端，而不是将新的页面(view)返回给用户。（MDC_vs_MVC）
I.
首先建立工程AjaxTrain。
在src里创建一个Servlet，作为Ajax的服务端(目前是用传统的方式去传输数据，我们将逐步改写，直至完全实现Ajax的异步刷新)：
import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AjaxServer extends HttpServlet {
protected void doPost(HttpServletRequest httpServletRequest,HttpServletResponse httpServletResponse) throws ServletException,IOException {
doGet(httpServletRequest,httpServletResponse);
}
protected void doGet(HttpServletRequest httpServletRequest,IOException {
try{
httpServletResponse.setContentType("text/html;charset=utf-8");
PrintWriter out = httpServletResponse.getWriter();
//inte用来记录验证次数
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 = URLDecoder.decode(old,"UTF-8");
//2.检查参数是否有问题
if(old == null || old.length() == 0){
out.println("用户名不能为空");
} else{
//3.数据校验
if(name.equals("hpu")){
//4。和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面段，而不是将一个新的页面发送给用户
//写法没有变化，本质发生了改变
out.println("用户名[" + name + "]已经存在，请使用其他用户名," + temp);
} else{
out.println("用户名[" + name + "]尚未存在，可以使用该用户名注册," + temp);
}
}
} catch(Exception e){
e.printStackTrace();
}
}
}
web.xml的配置：
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<servlet-name>AjaxServer</servlet-name>
<servlet-class>AjaxServer</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AjaxServer</servlet-name>
<url-pattern>/AjaxServer</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
</web-app>
与服务对应的静态页面：index.html
<html>
<head>
<title></title>
</head>
<body>
校验用户名是否存在的例子<br/>
<form action="AjaxServer" method="GET">
用户名：<input type="text" name="name"/>
<input type="submit" value="检验"/>
</form>
</body>
</html>
实现了一个传统的校验模式，经测试成功。
下面写Ajax的客户端的代码(html+javascript)
2.准备Ajax客户端环境
此篇总结Ajax的客户端环境搭建：
首先在上一篇创建的java web工程的webRoot下创建静态页面ajax.html:
(首先别忘记下载Javascript的jquery类库：jquery.js。我下载的是jquery-1.8.0.js)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>用户校验ajax实例</title>
<script type="text/javascript" src="js/verify.js"></script>
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
</head>
<body>
<h1> 用户校验ajax实例</h1><br>
请输入用户名:<br/>
<!-- ajax不需要使用表单进行数据提交，因此不用写表单标签 -->
<!-- ajax不需要name属性，只需要一个id的属性 -->
<input type="text" id="username"/>
<input type="button" value="校验" onclick="verify()"/>
<!-- 这个div用于存放服务器返回的信息，开始为空 -->
<!-- id属性定义是为了利用dom的方式找到某一个节点，进行操作 -->
<div id="result">
</div>
<!-- div和span的值的差异，div的内容独占行，span的内容和其他内容相处良好 -->
</body>
</html>
verify.js：
//定义用户名校验的方法 function verify(){ alert("哎呦！别点人家~"); }
测试:点击ajax.html页面的校验按钮之后，弹出对话框，测试成功。
接下来就要开始实现真正的Ajax了。
详情关注下一篇总结
原文链接：https://www.f2er.com/ajax/163087.html
