贡献一个prototype整合json实现无刷新验证用户名例子
前台采用prototype.js类库实现ajax请求 还采用json.js类库实现字符串对象化。
后台运用到自己封装的json扩展和commons的一些jar包。
希望贴出来对大家有所帮助， 这个对json封装的jar的源码需要的可以问我拿。
完整的demo地址在CSDN上 下载地址:http://download.csdn.net/source/1376292
咱们的运用很简单: 前台代码如下:
<head> <title>验证用户名是否正确</title> <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/prototype.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/json.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/js.js"></script> <script type="text/javascript"> //提交用户信息,检查用户信息是否正确 function checkName(buttonObj){ buttonObj.disabled = true; //设置按钮变灰 不可操作 buttonObj.value = "检查中..."; var name = $('name').value; //获取用户输入的用户名 if(name==""){ alert('用户名不能为空,请填写用户名'); buttonObj.disabled = false; //设置按钮可用 buttonObj.value = "提交"; $('name').focus(); //输入框获取焦点 return; } var pars = "name="+name; //进行ajax请求,(使用的是property) var myAjax = new Ajax.Request("${pageContext.request.contextPath}/ajaxSimplServlet",{method:"post", parameters:pars, onComplete:function (originalRequest) { var result = originalRequest.responseText; var rt = result.parseJSON(); if (rt.success) { alert(rt.info); //获取服务端响应过来的信息 } else { alert(rt.info); } buttonObj.disabled = false; //设置按钮可用 buttonObj.value = "提交"; }, onException:showException,asynchronous:false}); } </script> </head> <body> <center> <input type="text" name="name" size="12"/> <input type="button" value="提交" onclick="checkName(this)"/> </center> </body>//处理用户的请求 protected void doPost(HttpServletRequest requset, HttpServletResponse response) { //自己封装的一个小小的AJAX对象 AjaxResult result = new AjaxResult(); try{ //获取传递过来的用户名 String name = requset.getParameter("name"); result.setSuccess(true);//设置请求成功且正常处理信息 if(name.length()>2) result.setInfo("您输入的用户名"+name+"是可用的!"); else result.setInfo("您输入的用户名"+name+"太短,请输入大于两位的用户名!"); }catch(Exception ex){ ex.printStackTrace(); //对异常情况的处理 result.setFailure(true); //其实设置了setSuccess(true)的时候failure就为false 反之 result.setInfo("请求验证用户名的时候发生异常!"); } /* 输出JSON格式的信息*/ JsonUtil.outJson(result,response); }