使用XML传递数据

HTML

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>itcast.cn 用户名校验ajax实例</title>

     <script type="text/javascript" src="/Lesson5_AJAX_Demo1/jslib/jquery-2.1.4.min.js"></script>

     <script type="text/javascript" src="/Lesson5_AJAX_Demo1/jslib/ajax.js"></script>

 </head>

 <body>

     itcast.cn 用户名校验的ajax实例，请输入用户名：<br/>

     <!-- ajax方式下，不需要使用表单提交数据 -->

     <input type="text" id="userName" value=""/>

     <input type="button" value="校验" onclick="verify('userName')"/><br/>

     <!-- div空间用于显示ajax处理结果  -->

     <div id="result"></div>

 </body>

 </html>

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("<message>");

            if(name == null || name.length() == 0){

                stringBuilder.append("用户名不能为空").append("</message>");

            } else{

                //逻辑校验与业务处理

                if(name.equals("wangxingkui")){

                    stringBuilder.append("用户名[" + name + "]已经存在，请使用其他用户名").append("</message>");

                } else{

                    stringBuilder.append("用户名[" + name + "]尚未存在，可以使用该用户名注册").append("</message>");

                }

                out.println(stringBuilder.toString());

            }

        } catch(Exception e){

            e.printStackTrace();

        }

        //返回更新数据（而不是跳转到新的视图）

    }

}

/**

 * 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) {

                //<message>123123123</message>

                //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代码

 function verify(id){

     var jqueryObj = $("#"+id);

     var username = jqueryObj.val();

     $.ajax({

         type:"POST",/*请求方式*/

         url:"/Lesson5_AJAX_Demo1/AjaxServletDo.do",/*请求地址*/

         data:"name="+username,/*请求数据*/

         dataType:"xml",/*接收返回数据格式*/

         success:function(data){/*请求成功调用函数*/

             var jqueryObj = $(data);

             var message = jqueryObj.children();

             var text = message.text();

             $("#result").html(text);

         }

     });

 };

巴特西

使用XML传递数据

最新文章

热门文章