AJAX之数据交换

1.前言

在AJAX中，最常用的就是JSON，XML因为比较冗杂所以用的比较少。所以我们先来说基于JSON的数据交换。最后我们还会提到在数据交换中出现乱码的形式。

2.基于JSON的数据交换

2.1 前端

前端接收到来自后端的JSON格式的字符串以后，需要将字符串转换为JSON对象：

var jsonStr = "{\"username\" : \"zhangsan\", \"password\" : \"1233344\"}"
// 第一种方法
var jsonObj = JSON.parse(jsonStr)
// 第二种方法
var jsonObj =  eval('(' + jsonStr + ')')
1
2
3
4
5

第二种方法中加括号的原因是：

加圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式（expression）转化为对象，而不是作为语句（statement）来执行。举一个例子，例如对象字面量{}，如若不加外层的括号，那么eval会将大括号识别为JavaScript代码块的开始和结束标记，那么{}将会被认为是执行了一句空语句。

2.2 后端

后端需要将需要传给前端的数据拼接成JSON格式的字符串。一个一个拼接太麻烦，我们选择使用阿里巴巴的fastjson组件，它可以将java对象转换成json格式的字符串

List<Student> studentList = new ArrayList<>();
while (rs.next()) {
    // 取出数据
    String name = rs.getString("name");
    int age = rs.getInt("age");
    String addr = rs.getString("addr");
    // 将以上数据封装成Student对象
    Student s = new Student(name, age, addr);
    // 将Student对象放到List集合
    studentList.add(s);
}
// 将List集合转换成json字符串
jsonStr = JSON.toJSONString(studentList);

// 响应JSON格式的字符串给前端。
 out.print(jsonStr);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3.基于XML的数据交换

3.1 前端

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(){
            // 1.创建XMLHTTPRequest对象
            var xhr = new XMLHttpRequest();
            // 2.注册回调函数
            xhr.onreadystatechange = function () {
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        // 使用XMLHTTPRequest对象的responseXML属性，接收返回之后，可以自动封装成document对象（文档对象）
                        var xmlDoc = this.responseXML
                        //console.log(xmlDoc)
                        // 获取所有的元素，返回了多个对象，应该是数组。
                        var students = xmlDoc.getElementsByTagName("student")
                        //console.log(students[0].nodeName)
                        var html = "";
                        for (var i = 0; i < students.length; i++) {
                            var student = students[i]
                            // 获取元素下的所有子元素
                            html += ""
                            html += ""+(i+1)+""
                            var nameOrAge = student.childNodes
                            for (var j = 0; j < nameOrAge.length; j++) {
                                var node = nameOrAge[j]
                                if (node.nodeName == "name") {
                                    //console.log("name = " + node.textContent)
                                    html += ""+node.textContent+""
                                }
                                if (node.nodeName == "age") {
                                    //console.log("age = " + node.textContent)
                                    html += ""+node.textContent+""
                                }
                            }
                            html += ""
                        }
                        document.getElementById("stutbody").innerHTML = html
                    }else{
                        alert(this.status)
                    }
                }
            }
            // 3.开启通道
            xhr.open("GET", "/ajax/ajaxrequest6?t=" + new Date().getTime(), true)
            // 4.发送请求
            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">
    
    tbody>
table>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

这里要注意，我们接受XML数据的方式不再是调用XMLHttpRequest对象的responseText属性，而是调用responseXML属性。

然后再通过getElementsByTagName方法获得标签进行遍历拼接。

3.2 后端

如果服务器响应的是XML数据的话，那么Servlet中的

response.setContentType("text/html;charset=UTF-8");
1

需要换成

response.setContentType("text/xml;charset=UTF-8");
1

至于XML数据字符串串的拼接这里不赘述了。

4.乱码问题

对于tomcat10来说，关于字符集，我们程序员不需要干涉，不会出现乱码。
对于tomcat9及以下版本来说呢？
- 响应中文的时候，会出现乱码，怎么解决？
```
response.setContentType("text/html;charset=UTF-8");
1
```
- 发送ajax post请求的时候，发送给服务器的数据，服务器接收之后乱码，怎么解决？
```
request.setCharacterEncoding("UTF-8");
1
```

相关阅读:
Python之并发编程
 如何在麒麟上安装 ONLYOFFICE 桌面编辑器
 WuThreat身份安全云-TVD每日漏洞情报-2023-10-10
Vue 组件及组件间的通信
 【操作系统 | Linux】终端切换与帮助命令
 Python教程之正则表达式实现拼音与中文提取并存储excel（教程含源码）
【总结】助力2022年全国大学生数学建模 — 优化模型总结篇（万字总结）
linux centos运行C语言程序
 封装自己的jq myFullPage插件
 laravel6 邮件发送注意事项
原文地址：https://blog.csdn.net/qq_52002412/article/details/126342795