Ajax学习笔记，原生Ajax，使用XMLHttpRequest读取xml内容

最新推荐文章于 2021-01-03 12:29:24 发布

CoderBruis

最新推荐文章于 2021-01-03 12:29:24 发布

阅读量588

点赞数

分类专栏：《前端》

本文链接：https://blog.csdn.net/CoderBruis/article/details/76695247

版权

《前端》专栏收录该内容

12 篇文章 2 订阅

订阅专栏

allarea.xml文件

<?xml version="1.0" encoding="GBK"?>
<allarea>
	<area>
		<id>1</id>
		<title>北京</title>
	</area>
	<area>
		<id>2</id>
		<title>上海</title>
	</area>
	<area>
		<id>3</id>
		<title>广州</title>
	</area>
</allarea>

AjaxOpXML.html文件

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Ajaxxml</title>
 </head>
 <script language="javascript">
	var xmlHttp;
	function createXMLHTTP() {
		if(window.XMLHttpRequest){		
			xmlHttp = new XMLHttpRequest() ;
		} else {	//表示IE内核的浏览器
			xmlHttp = new ActiveXOject("Microsoft.XMLHTTP") ;
		}
	}
	function getCity(){
		createXMLHTTP();
		//xmlHttp.open("POST","SelectServlet") ;
		xmlHttp.open("POST","allarea.xml") ;
		xmlHttp.onreadystatechange = getCityCallback;
		xmlHttp.send(null) ;
	}
	function getCityCallback(){	//定义回调函数
		if(xmlHttp.readyState == 4){
			if(xmlHttp.status == 200){
				var area = xmlHttp.responseXML.getElementsByTagName("area") ;
				var select = document.getElementById("city") ;
				select.length = 1;	//表示只能选中一个
				select.options[0].selected = true ;	//表示第一个为选中状态
				for(var i=0;i<area.length;i++){
					var option = document.createElement("option");
					var id = area[i].getElementsByTagName("id")[0].childNodes[0].nodeValue;
					var title = area[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
					option.setAttribute("value",id) ;
					option.appendChild(document.createTextNode(title)) ;
					select.appendChild(option) ;
				}
			}
		}
	}

 </script>
 <body οnlοad="getCity()">
	<form action="" method="post">
		请选择喜欢的城市:
			<select id="city">
				<option value="0">-请选择城市</option>
			</select>
	</form>
 </body>
</html>

然后运行tomcat，运行AjaxOpXML.html。

结果如图：

Ajax和dom解析，动态设置xml内容。

一：定义CitySelectServlet.class

package cn.ajax;
import java.io.*;
import org.w3c.dom.*;
import javax.xml.parsers.*;
import javax.xml.parsers.DocumentBuilder;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.xml.transform.*;
import javax.xml.transform.dom.*;
import javax.xml.transform.stream.*;


public class CitySelectServlet extends HttpServlet {
	public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
		this.doPost(request,response) ;
	}
	public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
		//防止页面乱码，可以在此设置charset为GBK
		response.setContentType("text/xml;charset=GBK") ;
		PrintWriter out = response.getWriter() ;
		//调用内存流
		ByteArrayOutputStream bos = new ByteArrayOutputStream() ;
		try {
			DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance() ;
			DocumentBuilder builder = factory.newDocumentBuilder() ;
			Document doc = builder.newDocument() ;

			String data[] = {"北京1","上海1","广州1"} ;
			Element allarea = doc.createElement("allarea") ;
			for(int x=0;x<data.length;x++){
				Element area = doc.createElement("area") ;
				Element id = doc.createElement("id") ;
				Element title = doc.createElement("title") ;
				id.appendChild(doc.createTextNode("" + (x+1))) ;
				title.appendChild(doc.createTextNode(data[x])) ;
				area.appendChild(id) ;
				area.appendChild(title) ;
				allarea.appendChild(area) ;
			}
			doc.appendChild(allarea) ;
			TransformerFactory tf = TransformerFactory.newInstance() ;
			Transformer t = tf.newTransformer() ;
			t.setOutputProperty(OutputKeys.ENCODING,"GBK") ;
			DOMSource source = new DOMSource(doc) ;
			StreamResult result = new StreamResult(bos) ;
			t.transform(source,result) ;
			/*测试内存流，看数据是否在内存中
			System.out.println(bos) ;
			可以在tomcat服务器上看到输出结果，
			输出了xml中的数据。
			
			*/
			out.println(bos) ;
			out.close() ;

		} catch(Exception e){e.printStackTrace();}
	
	}
}

编译完成后，在web.xml中设置Servlet映射路径

web.xml文件：

...
 <servlet>
	<servlet-name>SelectServlet</servlet-name>
	<servlet-class>cn.ajax.CitySelectServlet</servlet-class>
  </servlet>
  <servlet-mapping>
	<servlet-name>SelectServlet</servlet-name>
	<url-pattern>/AjaxDemo/SelectServlet</url-pattern>
  </servlet-mapping>
...

然后，在AjaxOpXML.html中修改

xmlHttp.open("POST","SelectServlet") ;

然后重新打开tomcat服务器，运行AjaxOpXML.html，运行结果如下图：

CoderBruis

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax学习笔记，原生Ajax，使用XMLHttpRequest读取xml内容

allarea.xml文件 1 北京 2 上海 3 广州 AjaxOpXML.html文件 Ajaxxml var xmlHttp; function createXMLHTTP() { if(window.XMLHttpRequest){ xmlHttp = new XMLHttpRequ
复制链接

扫一扫

专栏目录