web20-jquery_2.3Ajax操作新分析报告.doc

jQuery Ajax 编程 通过需求回顾Ajax编程 需求：验证用户名是否有效 需求：添加用户名的离焦校验 html代码 body form id=myform 用户名:input type=text name=username id=username/ span id=username_result/span br/ input type=button value=提交/ /form /body JS代码： script type=text/javascript // 页面加载完成后执行 $(function(){ // 需求：添加用户名的离焦校验 document.getElementById(username).onblur = function(){ // 获取用户输出的用户信息 var username = this.value; // alert(username); // 校验格式是否正确 必须是4~12的字母 数字 下滑线的组合 if(!username.match(^\\w{4,12}$)){ // 如果校验格式不正确, 马上提示用户格式不合法 document.getElementById(username_result).innerHTML = font color=red用户名必须是4~12位的字母数字下划线的组合!/font; return; } else { // 如果校验格式正确, 去数据库查询该用户名是否存在, 在结果span中显示后台返回的信息 // 创建核心对象 var xmlhttp; if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else{// code for IE6, IE5 xmlhttp=new ActiveXObject(Microsoft.XMLHTTP); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 xmlhttp.status==200){ document.getElementById(username_result).innerHTML=xmlhttp.responseText; } }; xmlhttp.open(POST,${pageContext.request.contextPath }/demo1,true); xmlhttp.setRequestHeader(Content-type,application/x-www-form-urlencoded); xmlhttp.send(username= + username); } }; }); /script /head body form id=myform 用户名:input type=text name=username id=username/ span id=username_result/span br/ input type=button value=提交/ /form /body 服务端代码： public class Demo1Servlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 需求: 校验用户名是否合法 // 模拟数据库的假数据 ListString list = new ArrayListString(); list.add(admin); li