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. ABAP术语-Document Number

    Document Number 原文:http://www.cnblogs.com/qiangsheng/archive/2008/01/28/1055636.html Key which ident ...

  2. python字符串的格式化输出

    很多时候我们在打印输入内容时希望有简单格式而不是拼接 一般做法: name = input("name:").strip() age = input("age:" ...

  3. 解决 Android sdk content loader 0%

    第一次遇到这种情况,真的很头痛,没办法 ,是问题就要解决,在网上找了一些方法,归纳了下来. 方法一(关闭后重启): 遇到Eclipse右下角一直显示“Android sdk content loade ...

  4. Docker（三）：部署软件

    Docker的镜像文件可以在镜像仓库中进行搜索. 部署软件目录导航: 常用命令 部署 Tomcat 部署 MySQL 部署 Oracle 常用命令 docker的常用命令如下: docker -v , ...

  5. linux 用户 用户组

    useradd -m -G sudo zhangxiao passwd zhangxiao

  6. Flask初学者：视图函数和类视图

    当一个url请求进入后台时,一般有两种方式来进行处理:视图函数和类视图.视图函数直接使用一个函数来进行处理并返回数据给浏览器,类视图则是使用类来进行处理并返回的,所以当需要进行的处理比较简单,则可以考 ...

  7. HashMap源码注释翻译

    HashMap.java(JDK1.8) 如有错误翻译的地方,欢迎评论指出. 介绍:对于HashMap及其子类而言,它们采用Hash算法来决定集合中元素的存储位置.当系统开始初始化HashMap时,系 ...

  8. 20160120使用myeclipse一年开始转IntelliJ IDEA 15做以下总结

    20160120使用myeclipse一年开始费元星转IntelliJ IDEA 15做以下总结 1.输入psv就会看到一个psvm的提示,此时点击tab键一个main方法就写好了.psvm 也就是p ...

  9. Linux 下 PHP 扩展Soap 编译安装

    1.进入 PHP 的软件包 pdo 扩展目录中(注:不是 PHP 安装目录) [root@tester /]# /home/tdweb/php-5.4.34/ext/soap 执行 phpize 命令 ...

  10. How to find your web part

         When we deploy a web part, we can find it on any pages through the follow steps:      Firstly, ...