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

        }

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

    }

}

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

 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传递数据的更多相关文章

  1. OpenCV和Matlab 通过XML传递数据

    因为现在下到的数据集大部分都使用了Matlab的Calibration toolbox 进行标定,其结构大部分是.mat结构的,所以它和opencv中数据传递需要一个中间过程,网上也有直接调用matl ...

  2. ajax 用xml传递数据

    页面代码 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Index.aspx. ...

  3. Android中Service通信(一)——启动Service并传递数据

    启动Service并传递数据的小实例(通过外界与服务进行通信): 1.activity_main.xml: <EditText android:layout_width="match_ ...

  4. activity与fragment之间传递数据

    总结:无论是activity给fragment传递数据,还是fragment给activity传递数据,都把activity和fragment都当做一个普通的对象,调用它的方法,传递参数. 1.Fra ...

  5. 3.SpringMVC修改配置文件路径和给界面传递数据

    1.修改配置文件路径  达到  配置多文件的目的 web.xml文件中基础配置有springMVC配置的servlet路径 <servlet-name>SpringMVC</serv ...

  6. 通过Application传递数据代码

    使用Application传递数据步骤如下:创建新class,取名MyApp,继承android.app.Application父类,并在MyApp中定义需要保存的属性     在整个Android程 ...

  7. WCF分布式开发步步为赢(8):使用数据集(DataSet)、数据表(DataTable)、集合(Collection)传递数据

    数据集(DataSet).数据表(DataTable).集合(Collection)概念是.NET FrameWork里提供数据类型,在应用程序编程过程中会经常使用其来作为数据的载体,属于ADO.NE ...

  8. MVC中前台如何向后台传递数据------$.get(),$post(),$ajax(),$.getJSON()总结

    一.引言 MVC中view向controller传递数据的时候真心是一个挺让人头疼的一件事情.因为原理不是很懂只看一写Dome,按葫芦画瓢只能理解三分吧. 二.解读Jquery个Ajax函数 $.ge ...

  9. Android 消息广播Intent传递数据

    1.创建布局文件activity_broadcast.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk ...

随机推荐

  1. 让微信内置浏览器兼容clipboard.js 复制粘贴 ios 安卓

    <!--js copy事件--><script type="text/javascript" src="/static/js/clipboard.min ...

  2. thinkphp5 分页带参数的解决办法

    文档有说可以在paginate带参数,然后研究了下,大概就是这样的: $list=Db::name('member') ->where('member_name|member_mobile|se ...

  3. 清除input框的缓存

    html <div class="container"> <form class="parent" autocomplete="of ...

  4. php-7.2.3源代码和php-5.6.26源代码摘录，对比 “汇编php文件”和“执行opcode代码”

    php-7.2.3 在“汇编php文件”和“执行opcode代码”上做了大量改变php-5.6.26 没见到支持抽象语法树的相关代码,php-7.2.3 见到支持抽象语法树的相关代码php-5.6.2 ...

  5. Scrapy之Cookie和代理

    cookie cookie: 获取百度翻译某个词条的结果 一定要对start_requests方法进行重写. 两种解决方案: 1. Request()方法中给method属性赋值成post2. For ...

  6. ansible自动化运维入门

    1.ansible的安装 1)使用源码安装Python3.5 安装支持包 yum -y install lrzsz vim net-tools gcc gcc-c++ ncurses ncurses- ...

  7. 人人都会设计模式：观察者模式--Observer

    https://segmentfault.com/a/1190000012295887 观察者模式是抽像通知者和观察者,达到具体通知者跟具体观察者没有偶合.能达到不管是切换通知者,或者是切换观察者,都 ...

  8. 嵌入式框架Zorb Framework搭建七：任务的实现

    我是卓波,我是一名嵌入式工程师,我万万没想到我会在这里跟大家吹牛皮. 嵌入式框架Zorb Framework搭建过程 嵌入式框架Zorb Framework搭建一:嵌入式环境搭建.调试输出和建立时间系 ...

  9. node Cookie

    代码: const express = require('express'); const cookieParser = require('cookie-parser'); const app = e ...

  10. Kuernetes-设计架构（二）

    Kubernetes设计架构 Kubernetes集群包含有节点代理kubelet和Master组件(APIs,scheduler.etc),一切都基于分布式的存储系统.Kubernetes架构图: ...