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了。
详情关注下一篇总结