AJAX——基于JSON的数据交换、基于XML的数据交换、AJAX乱码问题

胖虎不秃头

已于 2022-09-20 19:02:42 修改

阅读量434

点赞数 3

分类专栏： AJAX 文章标签： json ajax xml

于 2022-08-13 21:17:50 首次发布

本文链接：https://blog.csdn.net/m0_61163395/article/details/126324488

版权

AJAX 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

📄个人主页：胖虎不秃头
✨个人简介：Java领域新星创作者，随时准备跑路的大二学生
🔥精品专栏：有这一个就够了
🌈个人名言：知道的越多，不知道的越多
💥刷题神器：推荐一款算法刷题网站Nowcoder👉点击跳转刷题网站进行注册学习

文章目录

基于JSON的数据交换

在WEB前端中，如何将一个json格式的字符串转换成json对象

var jsonStr = "{\"username\" : \"zhangsan\", \"password\" : \"1233344\"}"
var jsonObj = JSON.parse(jsonStr)
console.log(jsonObj.username)
console.log(jsonObj.password)

在后端拼接JSON格式的字符串，响应给前端的浏览器

json.append("[");
while (rs.next()) {
    // 获取每个学生的信息
    String name = rs.getString("name");
    String age = rs.getString("age");
    String addr = rs.getString("addr");
    // 拼接json格式的字符串
    // {"name":"   王五    ","age":    20      ,"addr":"      北京大兴区     "},
    json.append("{\"name\":\"");
    json.append(name);
    json.append("\",\"age\":");
    json.append(age);
    json.append(",\"addr\":\"");
    json.append(addr);
    json.append("\"},");
}
jsonStr = json.substring(0, json.length() - 1) + "]";

拼接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);

注意：使用fastjson需要引入fastjson-1.2.2.jar

基于XML的数据交换

注意：如果服务器端响应XML的话，响应的内容类型需要写成：
```
response.setContentType("text/xml;charset=UTF-8");
```
xml和JSON都是常用的数据交换格式
- XML体积大，解析麻烦。较少用。
- JSON体积小，解析简单，较常用。

基于XML的数据交换，前端代码

<!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) {
                        // 服务器端响应了一个XML字符串，这里怎么接收呢？
                        // 使用XMLHTTPRequest对象的responseXML属性，接收返回之后，可以自动封装成document对象（文档对象）
                        var xmlDoc = this.responseXML
                        //console.log(xmlDoc)
                        // 获取所有的<student>元素，返回了多个对象，应该是数组。
                        var students = xmlDoc.getElementsByTagName("student")
                        //console.log(students[0].nodeName)
                        var html = "";
                        for (var i = 0; i < students.length; i++) {
                            var student = students[i]
                            // 获取<student>元素下的所有子元素
                            html += "<tr>"
                            html += "<td>"+(i+1)+"</td>"
                            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 += "<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)
                    }
                }
            }
            // 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">
    <!--<tr>
        <td>1</td>
        <td>zhangsan</td>
        <td>20</td>
    </tr>
    <tr>
        <td>2</td>
        <td>lisi</td>
        <td>22</td>
    </tr>-->
    </tbody>
</table>
</body>
</html>

基于XML的数据交换，后端java程序：

package com.bjpowernode.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;

/**
 * @program: 代码
 * @ClassName: AjaxRequest6Servlet
 * @version: 1.0
 * @description: 服务器端返回XML字符串
 * @author: bjpowernode
 * @create: 2022-05-15 11:48
 **/
@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();

        /*
        <students>
            <student>
                <name>zhangsan</name>
                <age>20</age>
            </student>
            <student>
                <name>lisi</name>
                <age>22</age>
            </student>
        </students>
         */

        StringBuilder xml = new StringBuilder();
        xml.append("<students>");
        xml.append("<student>");
        xml.append("<name>zhangsan</name>");
        xml.append("<age>20</age>");
        xml.append("</student>");
        xml.append("<student>");
        xml.append("<name>lisi</name>");
        xml.append("<age>22</age>");
        xml.append("</student>");
        xml.append("</students>");

        out.print(xml);
    }
}

AJAX乱码问题

测试内容：
- 发送ajax get请求
  - 发送数据到服务器，服务器获取的数据是否乱码？
  - 服务器响应给前端的中文，会不会乱码？
- 发送ajax post请求
  - 发送数据到服务器，服务器获取的数据是否乱码？
  - 服务器响应给前端的中文，会不会乱码？
包括还要测试tomcat服务器的版本：
- tomcat10和tomcat9都要进行测试。
测试结果：
- 对于tomcat10来说，关于字符集，我们程序员不需要干涉，不会出现乱码。
- 对于tomcat9来说呢？
  - 响应中文的时候，会出现乱码，怎么解决？
```
response.setContentType("text/html;charset=UTF-8");
```
  - 发送ajax post请求的时候，发送给服务器的数据，服务器接收之后乱码，怎么解决？
```
request.setCharacterEncoding("UTF-8");
```