日期:2014-05-16 浏览次数:20616 次
步骤1.新建项目ajaxtrain
?
步骤2.在WebRoot下新建jslib文件夹,并将jQuery的库(jquery-1.4.2.min.js)放在该目录下
?
步骤3.新建Servlet
?
package servlet; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class AJAXServer extends HttpServlet { private static final long serialVersionUID = -7936252450796205712L; public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter(); Integer inte = (Integer)request.getSession().getAttribute("total"); int temp = 0; if(inte == null){ temp = 1; }else{ temp = inte.intValue() + 1; } request.getSession().setAttribute("total", temp); String old = request.getParameter("name"); if(old == null || old.length() == 0){ out.println("用户名不能为空!"); }else{ String name = old; if(name.equals("lichao")){ out.println("用户名为:【"+name+"】的用户名已存在,请选用其他的用户名!<font color=red>访问次数:</font>"+temp); }else{ out.println("用户名为:【"+name+"】的用户名尚未存在,可以使用该用户名!<font color=red>访问次数:</font>"+temp); } } } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
??
? 步骤4.新建js文件---verify.js ?
function verify(){ //alert("点击了"); //1、获取文本框的内容 //document.getElementById("userName");dom的方式 //jQuery的查找节点的方式,参数中#加上id属性值可以找到一个节点 //jQuery的方法返回的都是jQuery的对象,可以继续在上面执行其他的jQuery方法 var jqueryObj = $("#userName"); //获取节点的值 var userName = jqueryObj.val(); //alert(userName); //2、将文本框中的数据发送给服务器端的servlet //使用jQuery的XMLHTTPRequest对象get请求的封装 var url = "AJAXServer?name="+userName; url = convertURL(url); $.get(url,null,callback); } //回调函数 function callback(data){ //alert("服务器数据回来了!!"); //3、接收服务器端返回的数据 // alert(data); //4、将数据库端返回的数据动态的显示在页面上 //找到保存结果信息的节点 var resultObj = $("#result"); //动态的改变页面中div节点中的内容 resultObj.html(data); } function convertURL(url){ //获取时间戳 var timestamp = (new Date()).valueOf(); //将时间戳拼接在url路径上 if(url.indexOf("?") >= 0){ url = url + "&t=" + timestamp; alert(url); }else{ url = url + "?t=" + timestamp; } return url }
?
?
?
?
?
?
?
?
?
?
步骤5.新建jsp---index.jsp
?
?
<%@ page language="java" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>ajax测试注册页面</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta