HTML
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>itcast.cn 用户名校验ajax实例</title> 6 <script type="text/javascript" src="/Lesson5_AJAX_Demo1/jslib/jquery-2.1.4.min.js"></script> 7 <script type="text/javascript" src="/Lesson5_AJAX_Demo1/jslib/ajax.js"></script> 8 </head> 9 <body> 10 itcast.cn 用户名校验的ajax实例，请输入用户名：<br/> 11 <!-- ajax方式下，不需要使用表单提交数据 --> 12 <input type="text" id="userName" value=""/> 13 <input type="button" value="校验" onclick="verify('userName')"/><br/> 14 <!-- div空间用于显示ajax处理结果 --> 15 <div id="result"></div> 16 </body> 17 </html>
Servlet
package org.zln.ajax.servlet; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.io.PrintWriter; /** * Created by coolkid on 2015/6/7 0007. */ public class AjaxServer extends HttpServlet { @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request,response); } @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { try{ /*使用xml处理*/ response.setContentType("text/xml;charset=UTF-8"); request.setCharacterEncoding("UTF-8"); PrintWriter out = response.getWriter(); //取参数信息 String name = request.getParameter("name"); //输入校验 StringBuilder stringBuilder = new StringBuilder(); stringBuilder.append("<message>"); if(name == null || name.length() == 0){ stringBuilder.append("用户名不能为空").append("</message>"); } else{ //逻辑校验与业务处理 if(name.equals("wangxingkui")){ stringBuilder.append("用户名[" + name + "]已经存在，请使用其他用户名").append("</message>"); } else{ stringBuilder.append("用户名[" + name + "]尚未存在，可以使用该用户名注册").append("</message>"); } out.println(stringBuilder.toString()); } } catch(Exception e){ e.printStackTrace(); } //返回更新数据（而不是跳转到新的视图） } }
js
/** * Created by coolkid on 2015/6/7 0007. */ var xmlHttp = null; function verifyNew(id) { /*获取待打算数据*/ var username = document.getElementById(id).value; /*创建XMLHttpRequest对象*/ if (window.XMLHttpRequest) { /*针对FireFox Mozillar Opera Safair IE7+*/ xmlHttp = new XMLHttpRequest(); /*针对某些版本的Mozillar浏览器的bug修正*/ if (xmlHttp.overrideMimeType) { xmlHttp.overrideMimeType('text/xml'); } } else if (window.ActiveXObject) { /*针对IE6 IE5.5 IE5*/ var activexName = [ 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP' ]; for (var i = 0; i < activexName.length; i++) { try { /*取出一个空间名进行创建，如果创建成功，就终止循环*/ xmlHttp = new ActiveXObject(activexName[i]); break; } catch (e) { } } } if (!xmlHttp) { alert('XMLHttpRequest对象创建失败'); } else { /*注册回调函数*/ xmlHttp.onreadystatechange = callback; /*设置连接 true表示异步交互 */ xmlHttp.open('GET', '/Lesson5_AJAX_Demo1/AjaxServletDo.do?name=' + username, true); /*如果采用POST的方式，需要自己设置请求头*/ /* xmlHttp.open("POST","/Lesson5_AJAX_Demo1/AjaxServletDo.do"+username,true); xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlHttp.send("name="+username); */ /*发送数据*/ xmlHttp.send(null); /*因为发送的数据已经在url中，所以这里的发送数据参数设置为null*/ } } function callback() { if (xmlHttp.readyState == 4) { /*交互完成*/ //判断http的交互是否成功 if (xmlHttp.status == 200) { //使用responseXML的方式来接收XML数据对象的DOM对象 var domObj = xmlHttp.responseXML; if (domObj) { //<message>123123123</message> //dom中利用getElementsByTagName可以根据标签名来获取元素节点，返回的是一个数组 var messageNodes = domObj.getElementsByTagName('message'); if (messageNodes.length > 0) { //获取message节点中的文本内容 //message标签中的文本在dom中是message标签所对应的元素节点的字节点，firstChild可以获取到当前节点的第一个子节点 //通过以下方式就可以获取到文本内容所对应的节点 var textNode = messageNodes[0].firstChild; //对于文本节点来说，可以通过nodeValue的方式返回文本节点的文本内容 var responseMessage = textNode.nodeValue; //将数据显示在页面上 //通过dom的方式找到div标签所对应的元素节点 var divNode = document.getElementById('result'); //设置元素节点中的html内容 divNode.innerHTML = responseMessage; } else { alert('XML数据格式错误，原始文本内容为：' + xmlHttp.responseText); } } else { alert('XML数据格式错误，原始文本内容为：' + xmlHttp.responseText); } } else { alert('出错了！！！'); } } }
使用jQuery的方式改写js代码
1 function verify(id){ 2 var jqueryObj = $("#"+id); 3 var username = jqueryObj.val(); 4 $.ajax({ 5 type:"POST",/*请求方式*/ 6 url:"/Lesson5_AJAX_Demo1/AjaxServletDo.do",/*请求地址*/ 7 data:"name="+username,/*请求数据*/ 8 dataType:"xml",/*接收返回数据格式*/ 9 success:function(data){/*请求成功调用函数*/ 10 var jqueryObj = $(data); 11 var message = jqueryObj.children(); 12 var text = message.text(); 13 $("#result").html(text); 14 } 15 }); 16 };