Ajax初识_通过ajax校验数据（xml）

最新推荐文章于 2022-08-20 21:22:48 发布

javaho

最新推荐文章于 2022-08-20 21:22:48 发布

阅读量268

点赞数

分类专栏： Java_WEB

本文链接：https://blog.csdn.net/linux_he/article/details/8263008

版权

Java_WEB 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Ajax/XML

AjaxXml.html

<!DOCTYPE html>
<html>
<head>
<title>AjaxXml.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

<script type="text/javascript" src="js/verifyXML.js"></script>

</head>

<body>
	用户名校验:
	<input type="text" id="wd" οnblur="verify()">
	<div id="result"></div>
</body>
</html>

AjaxXMLServlet Servlet代码

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


public class AjaxXMLServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		//响应Content-Type的t必须为text/xml
		response.setContentType("text/xml;charset=utf-8");
		PrintWriter out = response.getWriter();
		//取参数
		String old = request.getParameter("wd");
		//定义拼接xml数据的StringBuilder
		StringBuilder stringBuilder = new StringBuilder();
		stringBuilder.append("<message>");
		//对参数值得检查
		if(old == null || old.length() == 0){
			stringBuilder.append("用户名不能为空");
			stringBuilder.append("</message>");
		}else{
			//参数校验
			String name = old;
			if(name.equals("wang")){
				//返回数据
				stringBuilder.append("用户名："+ name + "已经存在！ ");
				stringBuilder.append("</message>");
			}else{
				//返回数据
				stringBuilder.append("用户名："+ name + "可以使用！ ");
				stringBuilder.append("</message>");
			}
		}
		out.println(stringBuilder.toString());
	}

	public void init() throws ServletException {
		// Put your code here
	}

}

JS脚本文件

var xmlHttp;
function verify() {
	// 1通过Document对象获取文本框中的数据
	var userName = document.getElementById("wd").value;
	// 2获取xmlHttpRequest对象
	
		// 2.1针对不同的浏览器通过不同的方式创建XMLHttpRequest对象
	if (window.XMLHttpRequest) {
		// 2.1.1适配FireFox,Mozillar,Opera,Safari,IE7,IE8
		xmlHttp = new XMLHttpRequest();
		// 2.1.2针对Mozillar浏览器的Bug进行修改
		if (xmlHttp.overrideMimeType) {
			xmlHttp.overrideMimeType("text/xml");
		}

	} else if (window.ActiveXObject) {
		// 2.1.3针对IE6、IE5.5、IE5等浏览器创建XMLHttpRequest对象的控件

		var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
		for ( var i = 0; i < activexName.length; i++) {
			try {
				xmlHttp = new ActiveXObject(activexName[i]);
				break;
			} catch (e) {

			}
		}
	}
		//2.2对XMLHttpRequest对象进行校验
	if (!xmlHttp) {
		alert("XMLHttpRequest创建失败");
	} else {
		
	}
	// 3设置回调函数
	xmlHttp.onreadystatechange = callback;
	// 4设置连接信息
		// 4.1设置数据提交的方式（post/get）
		// 4.2设置连接URL
		// 4.3设置采用同步还是异步形式，true为异步。
	xmlHttp.open("get", "AjaxXMLServlet?wd="+userName, true);
	
	//O_Opost 方式
	/*	
	xmlHttp.open("post", "AjaxXMLServlet", true);
	//O_O设置http头部信息
	xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xmlHttp.send("wd="+userName);
	*/
	
	// 5.发送数据
		//5.1同步时，该语句执行完毕后（服务器端数据返回时）才开始往下面执行
		//5.2异步时，执行该方法后立即往下执行
	xmlHttp.send(null);
	
}
//回调函数
function callback(){
	//判断xmlHttp对象是否交互完成
	if(xmlHttp.readyState==4){
		//判断http请求是否成功
		if(xmlHttp.status==200){
			//使用responseXML来接收xml数据对象的DOM对象
			var domObj = xmlHttp.responseXML;
			//利用dom的getElementsByTagName方法可以根据标签名来获取元素节点，返回的是一个数组
			var messageNodes = domObj.getElementsByTagName("message");
			
			if(messageNodes.length>0){
				//获取message节点中的文版内容
				//message标签中的文本在dom中是message标签所对应的元素节点的文本几点，firstChild可以获取到当前节点的第一节点
				//通过以下方式可以得到文本内容所对应的节点
			var textNode = messageNodes[0].firstChild;
			//对于文本节点来说，可以通过nodeValue来得到其内容
			var responseText = textNode.nodeValue;
			
			
			//设置前段页面显示
			document.getElementById("result").innerHTML=responseText;
			}else{
				alert("数据请求错误！"+xmlHttp.responseText);
			}
			
		}
	}
}

web.xml文档

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <display-name></display-name>
 	 <!-- 注册servlet -->
  <servlet>
    <servlet-name>AjaxXMLServlet</servlet-name>
    <servlet-class>AjaxXMLServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>AjaxXMLServlet</servlet-name>
    <url-pattern>/AjaxXMLServlet</url-pattern>
  </servlet-mapping>	
	
  <welcome-file-list>
    <welcome-file>AjaxXml.html</welcome-file>
  </welcome-file-list>
</web-app>

—— 2012年12月05日

javaho

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax初识_通过ajax校验数据（xml）

Ajax/XML AjaxXml.htmlAjaxXml.html--> 用户名校验: AjaxXMLServlet Servlet代码import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;impor
复制链接

扫一扫

专栏目录