Ajax学习札记02-利用xml数据格式进行数据交互

Ajax学习笔记02-利用xml数据格式进行数据交互
以xml数据格式来与服务器进行数据交互：分别用XmlHttpRequest对象和jquery两种方式进行数据交互：
Demo3：

页面端代码：与index.html相同，只需要修改引入的js文件即可：

服务器端代码：AjaxXmlServer

   import .../** * Created by IntelliJ IDEA. * User: 赵光鹏 * Date: 2011-11-16 * Time: 15:35:55 * Alt+enter 导入包修复的功能 * To change this template use File | Settings | File Templates. */public class AjaxXmlServer extends HttpServlet {    protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {            //解决乱码问题,一定要在获取getWriter对象之前            httpServletResponse.setCharacterEncoding("utf-8");            //修改点1-响应的content-Type必须是text/xml            httpServletResponse.setContentType("text/xml;charset-utf-8");            PrintWriter out = httpServletResponse.getWriter();            //1.取页面端传过来的页面信息             String old =  httpServletRequest.getParameter("name");  //name是从js中定义的url中参数获取的            // String name = new String(old.getBytes("iso8859-1"),"utf-8");            String name = URLDecoder.decode(old,"UTF-8");            System.out.println("转换编码前"+old);             System.out.println("转换编码后"+name);            //2.检查参数是否有问题             //将数据封装成xml格式             StringBuilder builder = new StringBuilder();             builder.append("&lt;message&gt;");             if(name==null||name.length()==0){                 builder.append("用户名不能为空");             }else{                  //3.  校验操作                 //修改点2-返回的格式做个简单的修改                if(name.equals("guangpeng")){              //4 .和传统应用不同，这一步是将用户感兴趣的数据返回给页面段，而不是将新的页面传递给用户                   builder.append("用户名["+name+"]已经存在，请使用其他用户名").append("&lt;/message&gt;");                 } else{                     builder.append("用户名["+name+"]尚未存在，可以使用该用户名注册").append("&lt;/message&gt;");                    // out.println(name+"--11用户尚未注册，请先注册！");                     //out.println(name.equals("guangpeng"));                 }                 out.println(builder.toString());             }}  protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {       doGet(httpServletRequest, httpServletResponse);    }}

Js文件：方式一：使用XmlHttpRequest对象实现ajax异步数据交互：

//这个方法将使用XmlHttpRequest对象进行ajax异步数据交互var xmlhttp;function verify(){    //var xmlhttp;    //使用dom的方式获取文本框中的值    var userName = document.getElementById("userName").value;    if(window.XMLHttpRequest){    //针对firefox，mozillor opera safari ie7.8        xmlhttp = new XMLHttpRequest();    //修正某些浏览器bug的代码,能正确的返回xml格式的数据        if(xmlhttp.overrideMimeType){            xmlhttp. overrideMimeType("text/xml");        }    }else if(window.ActiveXObject){     //针对ie6,5     //两个可以用于创建XMLHttpRequest对象的控件名称，保存在一个js中    //排在前面的版本较新 ，控件版本不一样，要尝试性的去创建        var activeNeme = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];        for(var i=0; i&lt;activeNeme.length; i++){            try{            xmlhttp = new ActiveXObject(activeNeme[i]);            break;                }catch(e){            }        }    }    //验证对象是否创建成功    if(!xmlhttp){        alert("XMLHttpRequest对象创建失败");    }else{        alert("创建成功了："+xmlhttp);    }    //2.回调函数的注册    //只是需要函数名，不要加括号，如果加上括号，会把函数的返回值注册上    xmlhttp.onreadystatechange = callback;//这里写的是函数名    //3.设置连接信息  Get方式实现    //第一个参数表示http的请求方式，支持所有的http的请求方式，主要使用get和post    //第二个参数表示请求的url地址，get参数也在url中    //第三个参数表示采用异步还是同步方式交互，true表示异步   // xmlhttp.open("GET","AjaxServer?name="+userName, true);    //4.发送数据，开始和服务器进行交互    //   同步方式下，send这句话会在服务器端数据回来后才执行    //异步方式下，send这句话会立即完成执行    //xmlhttp.send(null);    //post方式请求的的代码     xmlhttp.open("POST","AjaxXmlServer", true);    //自己设置http请求头    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");    //post方式发送数据    xmlhttp.send("name="+userName);}//回调函数function callback(){    //5.接收响应数据  //判断对象的状态是交互完成 4表示交互完成 ,XMLHttpRequest共有五种状态0-4    if(xmlhttp.readyState == 4){        //判断http的交互是否成功        if(xmlhttp.status == 200){          //使用responseXml的方式来接受xml数据            var domObj = xmlhttp.responseXML;            if(domObj){            //&lt;message&gt;1234567&lt;/message&gt; 获取该元素的节点,返回数组            var messageNodes = domObj.getElementsByTagName("message");            if(messageNodes.length &gt;0){                // message标签中的文本在dom中时message标签对应的元素节点的子节点，firstChild可以获取到当前节点的第一个子节点           // 通过以下方式就可以获取文本内容所对应的节点            var textNode = messageNodes[0].firstChild;           var responseMessage = textNode.nodeValue;          //将数据显示在页面上            var divNode = document.getElementById("result");            divNode.innerHTML = responseMessage;            }  else{                   alert("XML数据格式错误，原始文本内容为："+xmlhttp.responseText);                    }            } else{                 alert("XML数据格式错误，原始文本内容为："+xmlhttp.responseText);                   }        } else{            alert("出错了！！！");        }    }}

实现方式二：利用jquery实现：js文件代码：

//定义用户名校验的方法,使用【jquery】以xml的数据格式传输，function verify(){    //jquery返回都是jquery对象，可以继续在上面执行其他的方法       var jqueryObj = $("#userName");       //获取节点的值       var userName =  jqueryObj.val();    //javascript简单对象定义的方法    var obj = {name:"123",age:20}    $.ajax({        type: "POST",  //Http请求方式        url: "AjaxXmlServer",   //服务器端URL地址        data: "name="+userName,   //发送给服务器的数据        dataType: "xml", //告诉Jquery返回的数据格式        success: callback  //定义交互完成，并且服务器正确返回数据时调用的回调函数    });}//回调函数，是数据异步交互的一个体现function callback(data){    var jqueryObj = $(data); //首先需要将dom对象转换成jquery的对象    var message = jqueryObj.children();//获取message节点    var text = message.text();  //获取文本内容    $("#result").html(text);  //将服务器端返回的数据动态的显示在页面上    alert("数据返回成功");}

Ajax学习札记02-利用xml数据格式进行数

热点推荐