1. 展示学生列表 19
- 注意：如果服务器端响应XML的话，响应的内容类型需要写成：
response.setContentType("text/xml;charset=UTF-8");
1.1 xml和JSON都是常用的数据交换格式 19
- XML体积大，解析麻烦。较少用。
- JSON体积小，解析简单，较常用。
代码在com.bjpoernode.ajax.servlet
AjaxRequest6Servlet
package com.bjpoernode.ajax.servlet;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
//使用XML完成数据交换 19
@WebServlet("/ajaxrequest6")
public class AjaxRequest6Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//注意响应的内容类型是xml
response.setContentType("text/xml;charset=UTF-8");
PrintWriter out = response.getWriter();
/*
zhangsan
20
lisi
22
*/
//这里我们就不连shujukule，直接写死
StringBuilder xml = new StringBuilder();
xml.append("");
xml.append("");
xml.append("zhangsan");
xml.append("20");
xml.append("");
xml.append("");
xml.append("lisi");
xml.append("22");
xml.append("");
xml.append("");
out.print(xml);
}
}E:\java学习\Ajax\course\course5\web
ajax7.html
<!--使用XML完成数据交换 19-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用XML完成数据交换</title>
</head>
<body>
<script type="text/javascript">
window.onload = function (){
document.getElementById("btn").onclick = function (){
//创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//注册回调函数
xhr.onreadystatechange = function (){
if(this.readyState==4){
if (this.status==200){
//服务器端响应了一个xml字符串，这里接收
// 使用XMLHTTPRequest对象的responseXML属性，接收返回之后，可以
// 自动封装成document对象（文档对象）
var xmlDoc = this.responseXML;
//console.log(xmlDoc)
//获取所有的<student>元素，返回对各对象，应该是数组
var students = xmlDoc.getElementsByTagName("student");
//console.log(students[0].nodeName)
var html = ""//拼串时用
//循环遍历students数组
for(var i = 0;i<students.length;i++){
//得到每个元素
var student = students[i]
html += "<tr>"
html += "<td>"+(i+1)+"</td>"
//获取<student>元素的所有子元素，这个nameOrAge也是个数组
// （因为有name和age元素）
var nameOrAge = student.childNodes;
//遍历nameOrAge数组
for (var j = 0; j < nameOrAge.length; j++) {
//取到的节点名字可能是name也可能是age所以判断
var node = nameOrAge[j];
if(node.nodeName=="name"){
//console.log("name="+node.textContent)
html += "<td>"+node.textContent+"</td>"
}
if(node.nodeName=="age"){
//console.log("age="+node.textContent)
html += "<td>"+node.textContent+"</td>"
}
}
html += "</tr>"
}
document.getElementById("stutbody").innerHTML = html
}else{
alert(this.status)
}
}
}
//开启通道
xhr.open("GET","/ajax/ajaxrequest6?t="+new Date().getTime(),true)
//发送请求
xhr.send()
}
}
</script>
<button id="btn">显示学生列表</button>
<table width="500px" border="1px">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody id="stutbody">
<!-- <tr>
<th>1</th>
<th>zhangsan</th>
<th>20</th>
</tr>
<tr>
<th>2</th>
<th>lisi</th>
<th>22</th>
</tr>-->
</tbody>
</table>
</body>
</html>
