Ajax处理XML，XMLHttpRequest对象的创建和访问servlet并返回xml数据到页面展示

最新推荐文章于 2021-10-19 18:02:50 发布

丨深水蓝丨

最新推荐文章于 2021-10-19 18:02:50 发布

阅读量7.7k

点赞数 1

分类专栏： Ajax 文章标签： xml xmlhttprequest ajax servlet integer stylesheet

本文链接：https://blog.csdn.net/qq445422083/article/details/7965231

版权

Ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1，ajaxxml.js

//用户名检验方法
//这个方法将使用XMLHTTPRequest对象进行AJAX的异步数据交互
var xmlHttp;
function verify(){
	//使用dom的方式获取文本框中的值
	//.value可以获取一个元素节点的value属性
	var userName = document.getElementById("userName").value;
	
	//创建XMLHttprequest对象
	//需要针对IE和其他类型的浏览器建议这个对象的不同方式写不同的代码
	
	if(window.XMLHttpRequest){
		
		//针对FireFox,Mozillar,opera,safari,ie7,ie8
		xmlHttp = new XMLHttpRequest();
		//针对某些特定版本的moziller浏览器的BUG进行修正
		if(xmlHttp.overrideMimeType){
			xmlHttp.overrideMimeType("text/xml");
		}
	}else if(window.ActiveXObject){
		//针对IE6,ie5.5 ie5
		//两个可以用于创建XMLHTTPREQUEST对象控件名称，保存在一个JS数组中
		//排在前面的版本较新
		var activexName = new ActiveXObject["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
		for(var i=0; i<activexName.length; i++){
			try{
				//取出一个控件名进行创建，如果创建成功就终止循环
				//如果创建失败，会抛出异常，然后可以继续循环，继续尝试创建
				xmlHttp = new ActiveXObject(activexName[i]);
				break;
			}catch(e){
				
			}
		}
		
	}
	//确认XMLHTTPREQUEST对象创建成功
	/*if(!xmlHttp){
		alert("xmlhttprequest对象创建失败");
		return;
	}else{
		alert(xmlHttp);
	}*/
	
	//2.注册回调函数
	//注册回调函数时，只需要函数名，不要加括号
	//我们需要将函数名注册，如果加上括号，就会把函数的返回值注册上，这是错误的
	xmlHttp.onreadystatechange = callback;
	//3.设置连接信息
	//第一个参数表示http的请求方式，支持所有http的请求方式，主要是get和post
	//第二个表示请求的url地址，get方式请求的参数也是url中
	//第三个参数表示采用异步还是同步方式交互，true表示异步
	//xmlHttp.open("GET", "servlet/AjaxServlet?name=" + userName, true);
	
	//post方式请求的代码并访问servlet
	xmlHttp.open("POST", "servlet/AjaxXmlServlet", true);
	//post方式需要自己设置http的请求头
	xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	//post方式发送数据
	xmlHttp.send("name=" + userName);
	//4.发送数据，开始和服务器端进行交互
	//同步方式下，send这句话全在服务器端数据回来后才执行完
	//异步方式下，send这句话会立即完成执行
	//xmlHttp.send(null);
}
//回调函数 
function callback(){
	//5.接收响应数据
	//判断对象的状态 是交互完成
	if(xmlHttp.readyState == 4){
		//判断http的交互是否成功
		if(xmlHttp.status == 200){
			//使用responseXML的方式来接收xml数据对象的DOM对象
			var domObj = xmlHttp.responseXML;
			//<message>ggggg</message>
			//getElementsByTagName根据标签名获取元素节点,返回的是一个数组
			var messageNodes = domObj.getElementsByTagName("message");
			if(messageNodes.length >0){
			
			//获取message节点的文本内容
			var textNode = messageNodes[0].firstChild;
			var responseMessage = textNode.nodeValue;
			//将数据显示在页面上
			//通过dom的方式到div标签所对应的元素节点
			var divNode = document.getElementById("result");
			//设置元素节点中的html内容
			divNode.innerHTML = responseMessage;
			
			}else{
				alert("XML数据格式错误，原始文本内容为："+xmlHttp.responseText);
			}
		}else{
			alert("出错了");
		}
	}
}

2，AjaxXmlServlet.java

package com.panlong.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 {

	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		
			Integer total = (Integer) req.getSession().getAttribute("total");
			int temp = 0;
			if(total == null ){
				temp = 1;
			}else{
				temp = total.intValue() + 1;
			}
		req.getSession().setAttribute("total",total.intValue()+temp);
		try {
			//1.取参数
			resp.setContentType("text/xml;charset=GB2312");
			PrintWriter out = resp.getWriter();
			StringBuilder builder = new StringBuilder();
			
			String old = req.getParameter("name");
			
			//2、检查参数是否有问题
			String name = old;
			
		
			builder.append("<message>");
			if("".equals(old) || old == null){
				builder.append("用户名必须输入").append("</message>");
				
			}
			else	
				 {

			if("lila".equals(name)){
				builder.append("该用户名已经注册").append("</message>");
			}else{
					builder.append("该用户名未注册，您可以注册["+name+"]这个用户名").append("</message>");
				
			}
		 }
			out.println(builder.toString());
		
		}catch (Exception e) {
			e.printStackTrace();
		//3.检验操作
		}
	}

	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		doGet(req, resp);
	}

}

3，页面展示文件index.html

<!DOCTYPE html>
<html>
  <head>
    <title>AJAX实例</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=GB2312">
    <script type="text/javascript" src="js/ajaxxml.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
   		<font color="blue" size="2">请输入用户名：</font> 
   		 <input type="text" id="userName" /><font color="red" size="2"><span id="result" >*</span></font><br/><br/>
   		 <input type="submit" name="提交" value="提交"  οnclick="verify();"/>
   		 
  </body>
</html>

丨深水蓝丨

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
Ajax处理XML，XMLHttpRequest对象的创建和访问servlet并返回xml数据到页面展示

相关说明全在注释中：1，ajaxxml.js//用户名检验方法//这个方法将使用XMLHTTPRequest对象进行AJAX的异步数据交互var xmlHttp;function verify(){ //使用dom的方式获取文本框中的值 //.value可以获取一个元素节点的value属性 var userName = document.getElementById
复制链接

扫一扫