对比jquery对这两种交互的实现：
基于html交互:
function verify(){ //解决中文乱码问题的方法 1，页面端发出的数据做一次encodeURI，服务器端使用 new String(old.getBytes("iso8859-1"),"utf-8") //var url= "AJAXServer?name="+encodeURI($("#userName").val() ) ; // encodeURI处理中文乱码问题 // 解决中文乱码问题的方法 2.页面端发出的数据做两次encodeURI处理， 服务器端用URLDecoder.decode(old,"utf-8"); var url= "AjaxServer?name="+encodeURI(encodeURI($("#userName").val() )); // encodeURI处理中文乱码问题 url=convertURL(url);//获取函数的返回值'login?uname='+ uname + '&psw=' + psw $.get(url,null,function(data){ $("#result").html(data); //简洁版 });System.out.println(url);}//给URL增加时间戳，骗过浏览器，不读取缓存function convertURL(url){ //获取时间戳 var timstamp=(new Date()).valueOf(); //将时间戳信息拼接到URL上 if(url.indexOf("?")>=0){ //用indexof判断该URL地址是否有问号 url=url+"&t="+timstamp; }else{ url=url+"?t="+timstamp; } return url;} 后台页面：
package com.xidian.ajax;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.ServletException;import java.io.IOException;import java.io.PrintWriter;import java.net.URLDecoder;public class AjaxServer extends HttpServlet { protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException { try{ httpServletResponse.setContentType("text/html;charset=utf-8"); PrintWriter out= httpServletResponse.getWriter(); Integer inte = (Integer)httpServletRequest.getSession().getAttribute("total"); //用来测试缓存的；在IE下如果多次请求的地址相同，则他不会再去服务器端交互读数据，而是直接读取缓存 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"); //处理中文乱码1，需和前台js文件中的encodeURI配合 String name= URLDecoder.decode(old,"utf-8"); //处理中文乱码2 //2.检查参数是否有问题 if(old==null||old.length()==0){ out.println("用户名不能为空！"); } else{ //String name=old; //3.校验操作 if(name.equals("123")){ //4.与传统应用不同的是，这一步将用户感兴趣的数据返回给页面端。而不是将一个新的页面返回给页面端 //写法没有改变，本质变化了 out.println("用户名【"+name+"】已经存在，请使用其他的用户名！,"+temp); } else{ out.println("用户名【"+name+"】未存在，您可以使用该用户名！,"+temp); } } }catch(Exception e){ e.printStackTrace(); } } protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException { doGet(httpServletRequest,httpServletResponse); } } 以上实现的基于html是比较常用的，而比较的简单；
下面我们实现基于XML交互来实现：js：
//定义用户名校正的方法function verify(){ //首先测试下页面的按钮按下，可以调用这个方法 //使用javascript里的alert方法，显示个弹出提示框 // alert("按钮被按下"); 测试是否已进到了js内 //1获取到文本框中的内容 // document.getElementById("username") dom的获取方法 //jquery查找节点的方式，参数中的#加id参数值可以找到一个节点 //jquery的方法返回的都是jquery的对象，可以在上面继续执行其他的jquery方法 var jqueryObj= $("#userName") //获取节点的值 var userName=jqueryObj.val(); // alert(userName);测试是否得到username //2.将文本框的数据发送给服务器端的servlet //javascript当中，一个简单对象的定义方法 // var obj={name:"123",age:30} //使用jquery的XMLHttprequest对象get请求的封装 $.ajax({ type:"post", //http请求方式 url:"AjaxXmlServer", // 服务器端url地址 data:"name="+userName, // 发送给服务器的数据 dataType:"xml",//告诉服务器返回的数据类型 success:callback //定义交互完成，并且服务器正确返回数据时调用的回调函数 }) }//回调函数,data为服务器端返回的数据function callback(data){ //alert("服务器端的数据回来了");测试与服务器端的交互 //3.接受服务器端返回的数据 // alert(data); 测试data //需要将data这个dom对象中的数据解析出来 //首先需要将dom对象转化为jquery对象 var jqueryObj=$(data); //获取message节点 var messsage= jqueryObj.children(); //获取文本内容 var text=message.text();//这里获得的是所有子节点的返回值，因为message返回的是一个数组 //4.将服务器端返回的数据动态的显示在页面上 // 找到保存数据的节点 var resultObj=$("#result"); //动态的改变页面中div的内容 resultObj.html(data);} 后台的代码：
package com.xidian.ajax;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.ServletException;import java.io.IOException;import java.io.PrintWriter;public class AjaxXmlServer extends HttpServlet { protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException { try{ //修改点1----响应的 Content-Type必须是text/xml，这很重要 httpServletResponse.setContentType("text/xml;charset=utf-8"); PrintWriter out= httpServletResponse.getWriter(); //1.取参数 String old =httpServletRequest.getParameter("name"); //2.检查参数是否有问题 //修改点2----返回的数据需要封装成xml格式 StringBuilder builder=new StringBuilder(); builder.append(" "); //XML的返回内容要包含在 "); } else{ String name=old; //3.校验操作 if(name.equals("123")){ //4.与传统应用不同的是，这一步将用户感兴趣的数据返回给页面端。而不是将一个新的页面返回给页面端 //写法没有改变，本质变化了 builder.append("用户名【"+name+"】已经存在，请使用其他的用户名！").append(""); // out.println("用户名【"+name+"】已经存在，请使用其他的用户名！"); } else{ // out.println("用户名【"+name+"】未存在，您可以使用该用户名！"); builder.append("用户名【"+name+"】未存在，您可以使用该用户名！").append(""); } out.println(builder.toString());//这是必须的 System.out.println("输出内容为："+builder.toString());//输入sout后按Tab键会自动生成 } }catch(Exception e){ e.printStackTrace(); } } protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException { doGet(httpServletRequest,httpServletResponse); } } 我已经将两种方式的不一样的点全部标注出来了，大家可以对比下，使用自己比较能接受的那种方式；