Ajax入门:响应内容为XML数据

Tin

2021-11-13

JavaWeb开发

响应内容为XML数据

*服务器端：

----设置响应头：ContentType，其值为：text/xml；charset=utf-8

*客服端：

---var doc = xmlHttp.responseXML； //得到的是Document对象

Xml1.java

package cn.xtnotes;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class Xml1 extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String xml = "<students>" +
	       "<student unmber='t1001'>"+
			"<name>zhangsan</name>" +
	       "<age>18</age>" +
			"<sex>male</sex>"+
	       "</student>"+
		"</students>";
		
		response.setContentType("text/xml;charset=utf-8");
		response.getWriter().print(xml);
	}
}

ajax4.jsp

<%@ page language="java" contentType="text/html; utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script type="text/javascript">
//创建异步对象
function createXMLHttpRequest(){
    try{
       return new XMLHttpRequest();
    }catch(e){
        try{
	   return new  ActiveXObject("Msxm12.XMLHTTP");
	}catch(e){
	   try{
	      return new AtiveXObject("Microsoft.XMLHTTP");
	   }catch(e){
	      alert("用的啥浏览器啊？");
	      throw e;
	   }
	}
    }
}
window.onload = function(){  //文档加载完毕后执行
	var btn = document.getElementById("btn");
	btn.onclick = function(){   //给按钮的点击事件注册监听
		//ajax的四步操作，得到服务器的响应
		//把响应结果显示到h1元素中
		// 1. 得到异步对象
		var xmlHttp = createXMLHttpRequest();
	//2.打开与服务器的链接 
	    // get 指定请求方式    指定请求url  指定是否为异步请求
	xmlHttp.open("GET","http://127.0.0.1:8080/U8/Xml1",true);
	//3.发送请求
	xmlHttp.send(null);// get请求没有请求体，但而要给出null 如果不给（null）可能会造成部分浏览器无法发送
	// 4.给异步对象的 onreadystatechange 事件注册监听器
	xmlHttp.onreadystatechange = function(){ //当xmlHttp的状态发生变化时执行
		//双重判断：xmlHttp的状态为4 （服务器响应结束)，以及服务器响应状态码为200（响应成功）
		if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
			//获取服务器响应结果

		    var doc = xmlHttp.responseXMl;
		    //查找文档下名为student的所有元素，得到数组，再取下标0
 		    var ele  = doc.getElementsByTagName("student")[0];
 		    var number = ele.getAttribute("number"); //获取元素点名为number的属性值
 		    var name;
 		    var age;
 		    var sex;
 		    
 		    //处理浏览器差异
 		    if(window.addEventListener){
 		        name =  ele.getElementsByTagName("name")[0].textContent; //其他浏览器
 		    }else{
 		        name = ele.getElementsByTagName("name")[0].text; //IE支持
 		    }
 		    if(window.addEventListener){
 		        age =  ele.getElementsByTagName("age")[0].textContent; //其他浏览器
 		    }else{
 		        age = ele.getElementsByTagName("age")[0].text; //IE支持
 		    }
 		    if(window.addEventListener){
 		        sex =  ele.getElementsByTagName("sex")[0].textContent; //其他浏览器
 		    }else{
 		        sex = ele.getElementsByTagName("sex")[0].text; //IE支持
 		    }
	    
 		    var text = number + ","+name+","+age+","+sex;
 		    document.getElementById("h1").innerHTML = text ;
		}
	};
	};
};
</script>
</head>
<body>
<button id="btn">点击这里</button>
<h1 id="h1"></h1>
</body>
</html>

阅读剩余

作者：Tin

链接：http://www.tinstu.com/740.html

文章版权归作者所有，未经允许请勿转载。

THE END