对比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("<message>"); //XML的返回内容要包含在<message></message> if(old==null||old.length()==0){//要验证接受的文本框内容是否为空 builder.append("用户名不能为空！").append("</message>"); } else{ String name=old; //3.校验操作 if(name.equals("123")){ //4.与传统应用不同的是，这一步将用户感兴趣的数据返回给页面端。而不是将一个新的页面返回给页面端 //写法没有改变，本质变化了 builder.append("用户名【"+name+"】已经存在，请使用其他的用户名！").append("</message>"); // out.println("用户名【"+name+"】已经存在，请使用其他的用户名！"); } else{ // out.println("用户名【"+name+"】未存在，您可以使用该用户名！"); builder.append("用户名【"+name+"】未存在，您可以使用该用户名！").append("</message>"); } 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); } }
我已经将两种方式的不一样的点全部标注出来了，大家可以对比下，使用自己比较能接受的那种方式；