本文共 4246 字，大约阅读时间需要 14 分钟。
import java.io.IOException;import java.io.PrintWriter;import java.net.URLDecoder;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;//这个servlet返回的是XML的数据public class AjaxXMLServer extends HttpServlet { protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException { doGet(httpServletRequest, httpServletResponse); } protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException { try{ //修改点1------相应的ContentType必须为text/xml httpServletResponse.setContentType("text/xml;charset=utf-8"); PrintWriter out = httpServletResponse.getWriter(); //inte用来记录验证次数 Integer inte = (Integer) httpServletRequest.getSession().getAttribute("total"); int temp = 0; if (inte == null) { temp = 1; } else { temp = inte.intValue() + 1; } httpServletRequest.getSession().setAttribute("total",temp); //1.取参数 String old = httpServletRequest.getParameter("name"); //String name = new String(old.getBytes("iso8859-1"),"UTF-8"); String name = URLDecoder.decode(old,"UTF-8"); //修改点2-----返回的数据需要拼装成xml格式 StringBuilder builder=new StringBuilder(); builder.append(" "); //2.检查参数是否有问题 if(old == null || old.length() == 0){ builder.append("用户名不能为空").append(" "); } else{ if(name.equals("hpu")){ //4。和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面段，而不是将一个新的页面发送给用户 //写法没有变化，本质发生了改变 builder.append("用户名[" + name + "]已经存在，请使用其他用户名, " + temp).append(""); } else{ builder.append("用户名[" + name + "]尚未存在，可以使用该用户名注册, " + temp).append(""); } out.println(builder.toString()); System.out.println(builder.toString()); } } catch(Exception e){ e.printStackTrace(); } }} ajaxXml.html: 用户校验ajax实例 用户校验ajax实例
请输入用户名:
verifyxml.js:
//用户名校验的方法//这个方法使用XMLHttpRequest对象来进行AJAX的异步数据交互var xmlhttp;function verify(){ //1.使用最基本的DOM_API来获取文本框中的值 //document.getElementById("username")是dom中获取元素节点的一种方法，一个元素节点对应HTML //页面中的一个标签，.value可以获取一个元素节点的value属性值 // var username=document.getElementById("username").value; //2.创建XMLHttpRequest对象 //这是XMLHttpRequest对象五步使用中最复杂的一步 //这是由于各种浏览器兼容问题造成的，要使用各种库来屏蔽掉这种差异 //下面根据IE和其它类型的浏览器建立这个对象的不同方式写不同的代码 if(window.XMLHttpRequest){ //针对FireFox、Mozillar、Opera、Safari、IE7、IE8 xmlhttp=new XMLHttpRequest(); //修复类似Mozillar浏览器的bug if(xmlhttp.overrideMimeType){ xmlhttp.overrideMimeType("text/xml"); } }else if(window.ActiveXObject){ //所有的IE中window.ActiveXObject条件都成立 //针对IE6、IE5.5、IE5(现在没人用了，可以把这条if分支删除) //两个可以用于创建XMLHttpRequest对象的控件名称，保存在一个js的数组中 //排在前面的版本最新 var activeName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"]; for(var i=0;i 0){ //可能会找到很多message节点，所以接收到的是数组，因为就一个，所以取0号节点 //message标签中的文本在dom中是message标签所对应的元素节点的子节点，firstChild可以获取到 //当前节点的第一个子节点 //通过以下方式就可以获取到文本内容所对应的节点 var textNode=messgaeNode[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("出错了！"); } }} 我们在js的回调函数中为了保证对数据处理的正确性，进行了多层次的判断 测试：输入123点击校验，服务器端返回的信息在界面上显示，试验成功！
总结----AJAX应用的五个步骤
1.建立XMLHttpRequest 2.设置回调函数 3.使用open方法与服务器建立连接 4.向服务器端发送数据 5.再回调函数针对不同相应状态进行处理转载请注明出处：