HTML
1 2 3 4 5itcast.cn 用户名校验ajax实例 6 7 8 9 10 itcast.cn 用户名校验的ajax实例，请输入用户名：11 12 13 14 15 16 17
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(" "); if(name == null || name.length() == 0){ stringBuilder.append("用户名不能为空").append(" "); } else{ //逻辑校验与业务处理 if(name.equals("wangxingkui")){ stringBuilder.append("用户名[" + name + "]已经存在，请使用其他用户名").append(""); } else{ stringBuilder.append("用户名[" + name + "]尚未存在，可以使用该用户名注册").append(""); } 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) { // 123123123 //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 };