使用XML传递数据

HTML

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>itcast.cn 用户名校验ajax实例</title>
 6     <script type="text/javascript" src="/Lesson5_AJAX_Demo1/jslib/jquery-2.1.4.min.js"></script>
 7     <script type="text/javascript" src="/Lesson5_AJAX_Demo1/jslib/ajax.js"></script>
 8 </head>
 9 <body>
10     itcast.cn 用户名校验的ajax实例，请输入用户名：<br/>
11     <!-- ajax方式下，不需要使用表单提交数据 -->
12     <input type="text" id="userName" value=""/>
13     <input type="button" value="校验" onclick="verify('userName')"/><br/>
14     <!-- div空间用于显示ajax处理结果  -->
15     <div id="result"></div>
16 </body>
17 </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();
        }
        //返回更新数据（而不是跳转到新的视图）
    }
}

js

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

 

 1 function verify(id){
 2     var jqueryObj = $("#"+id);
 3     var username = jqueryObj.val();
 4     $.ajax({
 5         type:"POST",/*请求方式*/
 6         url:"/Lesson5_AJAX_Demo1/AjaxServletDo.do",/*请求地址*/
 7         data:"name="+username,/*请求数据*/
 8         dataType:"xml",/*接收返回数据格式*/
 9         success:function(data){/*请求成功调用函数*/
10             var jqueryObj = $(data);
11             var message = jqueryObj.children();
12             var text = message.text();
13             $("#result").html(text);
14         }
15     });
16 };

 

posted @ 2015-06-14 00:55  csnmd  阅读(1910)  评论(0)  编辑  收藏  举报