AJAX--基于json格式和xml格式的数据交换

一、概述

json和xml都是常用的数据交换格式

XML体积大，解析麻烦，比较少用

JSON体积小，解析简单，比较常用

二、json格式

前端代码

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取信息列表</title>
</head>
<body>
    
    <script>
        window.onload = function(){
            document.getElementById("btn").onclick = function(){
                var xhr = new XMLHttpRequest()
                xhr.onreadystatechange = function(){
                    if(this.readyState == 4){
                        if (this.status == 200) {
                            // document.getElementById("stutbody").innerHTML = this.responseText
                            // 将json格式的字符串转换成json对象
                            var stuList = JSON.parse(this.responseText)
                            var html = ""
                            for (let i = 0; i < stuList.length; i++) {
                                const stu = stuList[i];
                                html += "<tr>"
                                html += "    <td>"+stu.name+"</td>"
                                html += "    <td>"+stu.age+"</td>"
                                html += "    <td>"+stu.address+"</td>"
                                html += "</tr>"
                            }
                            document.getElementById("stutbody").innerHTML = html
                        }else{
                            alert(this.status)
                        }
                    }
                }
                xhr.open("GET","/URL?t="+Math.random(),true)
                xhr.send()
            }
        }
    </script>
 
    <input type="button" value="显示信息" id="btn">
    <table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>住址</th>
        </tr>
        <tbody id="stutbody">
            <!-- <tr>
                <td>zhangsan</td>
                <td>20</td>
                <td>sh</td>
            </tr> -->
        </tbody>
    </table>
 
</body>
</html>

后端代码

 // 后端代码
声明HttpServletResponse
// 连接数据库
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
// 循环数据
out.print();
 
// 把数据给前端，然后把页面展示让前端展示
// 可以采用json格式或者xml格式
<!-- String jsonstr = "[{
    \"name\":\"zhangsan\",
    \"age\":20,
    \"address\":\"shan\"
},{
    \"name\":\"zhangsan\",
    \"age\":20,
    \"address\":\"shan\"
}]"; -->
// 动态拼接json字符串
StringBuilder json = new StringBuilder();
json.append("[");
json.append("{\"name\":\"");
json.append(name);
json.append("\",\"age\":");
json.append(age);
json.append(",\"address\":\"");
json.append(address);
json.append("\"},");
json.substring(0,json.length()-1+"]");
 
out.print(jsonstr)

三、xml格式

前端代码

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>post请求 xml数据格式</title>
</head>
<body>
 
    <script>
        window.onload = function(){
            document.getElementById("btn").onclick = function(){
                var xhr = new XMLHttpRequest()
                xhr.onreadystatechange = function(){
                    if(this.readyState == 4){
                        if (this.status == 200) {
                            // 服务器响应一个xml字符串
                            var xmlDoc = this.responseXML
                            // 获取所有的student元素，返回的是一个数组
                            var students = xmlDoc.getElementsByTagName("student")
                            var html = ""
                            for (let i = 0; i < students.length; i++) {
                                const student = students[i];
                                html += "<tr>"
                                html += "<td>"+(i+1)+"</td>"
                                // 获取<student>元素下的所有子元素
                                var nameOrAge = student.childNodes
                                for (let j = 0; j < nameOrAge.length; j++) {
                                    const node = nameOrAge[j];
                                    if(node.nodeName == "name"){
                                        // node.textContent
                                        html += "<td>"+node.textContent+"</td>"
 
                                    }
                                    if(node.nodeName == "age"){
                                        // node.textContent
                                        html += "<td>"+node.textContent+"</td>"
                                    }
                                }
                                html += "</tr>"
                                
                            }
                            document.getElementById("stutbody").innerHTML = html
                        }else{
                            alert(this.status)
                        }
                    }
                }
                xhr.open("GET","/URL?t="+Math.random(),true)
                xhr.send()
            }
        }
    </script>
 
    <input type="button" value="显示学生信息" id="btn">
    <table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tbody id="stutbody">
            <!-- <tr>
                <td>zhangsan</td>
                <td>20</td>
            </tr> -->
        </tbody>
    </table>
</body>
</html>

后端代码

 // xml格式后端代码
/*
    <students>
        <student>
            <name>zhanghsan</name>
            <age>20</age>
        </student>
        <student>
            <name>lisia</name>
            <age>21</age>
        </student>
    </students>
*/
注意使用xml格式这里需要写xml
response.setContentType("text/xml;charset=UTF-8");
PrintWriter out = response.getWriter();
 
// 动态拼接xml字符串
StringBuilder xml = new StringBuilder();
xml.append("[");
xml.append("{\"name\":\"");
xml.append(name);
xml.append("\",\"age\":");
xml.append(age);
xml.append("\"},");
xml.substring(0,xml.length()-1+"]");
out.print(xml);

posted @ 2023-07-30 18:13 洛小依ovo 阅读(32) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· jQuery--ajax请求

· AJAX--ajax的post请求

· 数据交换格式

公告

昵称：洛小依ovo
园龄： 4年5个月
粉丝： 1
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

AJAX--基于json格式和xml格式的数据交换

一、概述

二、json格式

三、xml格式

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

评论排行榜

最新评论

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>获取信息列表</title>
	</head>
	<body>

	<script>
	window.onload = function(){
	document.getElementById("btn").onclick = function(){
	var xhr = new XMLHttpRequest()
	xhr.onreadystatechange = function(){
	if(this.readyState == 4){
	if (this.status == 200) {
	// document.getElementById("stutbody").innerHTML = this.responseText
	// 将json格式的字符串转换成json对象
	var stuList = JSON.parse(this.responseText)
	var html = ""
	for (let i = 0; i < stuList.length; i++) {
	const stu = stuList[i];
	html += "<tr>"
	html += " <td>"+stu.name+"</td>"
	html += " <td>"+stu.age+"</td>"
	html += " <td>"+stu.address+"</td>"
	html += "</tr>"
	}
	document.getElementById("stutbody").innerHTML = html
	}else{
	alert(this.status)
	}
	}
	}
	xhr.open("GET","/URL?t="+Math.random(),true)
	xhr.send()
	}
	}
	</script>

	<input type="button" value="显示信息" id="btn">
	<table>
	<tr>
	<th>姓名</th>
	<th>年龄</th>
	<th>住址</th>
	</tr>
	<tbody id="stutbody">
	<!-- <tr>
	<td>zhangsan</td>
	<td>20</td>
	<td>sh</td>
	</tr> -->
	</tbody>
	</table>

	</body>
	</html>

	// 后端代码
	声明HttpServletResponse
	// 连接数据库
	response.setContentType("text/html;charset=UTF-8");
	PrintWriter out = response.getWriter();
	// 循环数据
	out.print();

	// 把数据给前端，然后把页面展示让前端展示
	// 可以采用json格式或者xml格式
	<!-- String jsonstr = "[{
	\"name\":\"zhangsan\",
	\"age\":20,
	\"address\":\"shan\"
	},{
	\"name\":\"zhangsan\",
	\"age\":20,
	\"address\":\"shan\"
	}]"; -->
	// 动态拼接json字符串
	StringBuilder json = new StringBuilder();
	json.append("[");
	json.append("{\"name\":\"");
	json.append(name);
	json.append("\",\"age\":");
	json.append(age);
	json.append(",\"address\":\"");
	json.append(address);
	json.append("\"},");
	json.substring(0,json.length()-1+"]");

	out.print(jsonstr)

	// xml格式后端代码
	/*
	<students>
	<student>
	<name>zhanghsan</name>
	<age>20</age>
	</student>
	<student>
	<name>lisia</name>
	<age>21</age>
	</student>
	</students>
	*/
	注意使用xml格式这里需要写xml
	response.setContentType("text/xml;charset=UTF-8");
	PrintWriter out = response.getWriter();

	// 动态拼接xml字符串
	StringBuilder xml = new StringBuilder();
	xml.append("[");
	xml.append("{\"name\":\"");
	xml.append(name);
	xml.append("\",\"age\":");
	xml.append(age);
	xml.append("\"},");
	xml.substring(0,xml.length()-1+"]");
	out.print(xml);