使用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();
}
//返回更新数据（而不是跳转到新的视图）
}
}
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传递数据的更多相关文章
- OpenCV和Matlab 通过XML传递数据
因为现在下到的数据集大部分都使用了Matlab的Calibration toolbox 进行标定,其结构大部分是.mat结构的,所以它和opencv中数据传递需要一个中间过程,网上也有直接调用matl ...
- ajax 用xml传递数据
页面代码 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Index.aspx. ...
- Android中Service通信(一)——启动Service并传递数据
启动Service并传递数据的小实例(通过外界与服务进行通信): 1.activity_main.xml: <EditText android:layout_width="match_ ...
- activity与fragment之间传递数据
总结:无论是activity给fragment传递数据,还是fragment给activity传递数据,都把activity和fragment都当做一个普通的对象,调用它的方法,传递参数. 1.Fra ...
- 3.SpringMVC修改配置文件路径和给界面传递数据
1.修改配置文件路径 达到 配置多文件的目的 web.xml文件中基础配置有springMVC配置的servlet路径 <servlet-name>SpringMVC</serv ...
- 通过Application传递数据代码
使用Application传递数据步骤如下:创建新class,取名MyApp,继承android.app.Application父类,并在MyApp中定义需要保存的属性 在整个Android程 ...
- WCF分布式开发步步为赢(8):使用数据集(DataSet)、数据表(DataTable)、集合(Collection)传递数据
数据集(DataSet).数据表(DataTable).集合(Collection)概念是.NET FrameWork里提供数据类型,在应用程序编程过程中会经常使用其来作为数据的载体,属于ADO.NE ...
- MVC中前台如何向后台传递数据------$.get(),$post(),$ajax(),$.getJSON()总结
一.引言 MVC中view向controller传递数据的时候真心是一个挺让人头疼的一件事情.因为原理不是很懂只看一写Dome,按葫芦画瓢只能理解三分吧. 二.解读Jquery个Ajax函数 $.ge ...
- Android 消息广播Intent传递数据
1.创建布局文件activity_broadcast.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk ...
随机推荐
- 【学时总结】◆学时·IX◆ 整体二分
◆学时·IX◆ 整体二分 至于我怎么了解到这个算法的……只是因为发现一道题,明显的二分查找,但是时间会爆炸,被逼无奈搜题解……然后就发现了一些东西QwQ ◇ 算法概述 整体二分大概是把BFS与二分查找 ...
- Keepalived搭建主从架构、主主架构实例
实例拓扑图: DR1和DR2部署Keepalived和lvs作主从架构或主主架构,RS1和RS2部署nginx搭建web站点. 注意:各节点的时间需要同步(ntpdate ntp1.aliyun.co ...
- 关于linux命令的说明
开始前我们必须先认识绝对路径与相对路径 绝对路径是从盘符开始的路径 :例如:/etc/sysconfig/network (从根直接指到network) 相对路径是从当前自己所在位置开始的路径:例如我 ...
- YII2.0 表单验证手机号是否合法且唯一
[['phone'], 'unique'], ['phone','match','pattern'=>'/^1[345678]{1}\d{9}$/','message'=>'{attrib ...
- PHP中判断变量为空的几种方法小结
isset 主要用来判断变量是否被初始化过empty 可以将值为 "假"."空"."0"."NULL"." ...
- C语言实例解析精粹学习笔记——35（报数游戏）
实例35: 设由n个人站成一圈,分别被编号1,2,3,4,……,n.第一个人从1开始报数,每报数位m的人被从圈中推测,其后的人再次从1开始报数,重复上述过程,直至所有人都从圈中退出. 实例解析: 用链 ...
- shell重温---基础篇（printf命令&test命令）
在shell中还有一个输出的命令,那就是printf了.它模仿的是C程序库(library)里的printf()程序,是由POSIX标准所定义,所以嘞,使用printf脚本比echo移植性要好一点,它 ...
- python2.7练习小例子（二十三）
23):题目:求1+2!+3!+...+20!的和. 程序分析:此程序只是把累加变成了累乘. #!/usr/bin/python # -*- coding: UTF-8 -*- n = ...
- 单调队列优化dp
洛谷p3800(单调队列优化DP) 题目背景 据说在红雾异变时,博丽灵梦单身前往红魔馆,用十分强硬的手段将事件解决了. 然而当时灵梦在Power达到MAX之前,不具有“上线收点”的能力,所以她想要知道 ...
- VS2017 远程调试小记
VS2017 远程调试小记 支持windows\linux\macos, 直接连接项目点的上线版本代码进行调试.保证bug在同个环境下实时追踪. 注意点 双方的 msvsmon.exe版本需一致,最好 ...