• AJAX——基于JSON的数据交换、基于XML的数据交换、AJAX乱码问题、AJAX的异步与同步

    活动地址：CSDN21天学习挑战赛

    文章目录

    基于JSON的数据交换

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

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

      • 1
      • 2
      • 3
      • 4

    • 在后端拼接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) + "]";

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17

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

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13

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

    基于XML的数据交换

    • 注意：如果服务器端响应XML的话，响应的内容类型需要写成：

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

      • 1

    • 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)
                        // 获取所有的元素，返回了多个对象，应该是数组。
                        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
      • 80

    • 基于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();

        /*
        
            
                zhangsan
                20
            
            
                lisi
                22
            
        
         */

        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);
    }
}


      • 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

    AJAX乱码问题

    • 测试内容：

      • 发送ajax get请求
        • 发送数据到服务器，服务器获取的数据是否乱码？
        • 服务器响应给前端的中文，会不会乱码？
      • 发送ajax post请求
        • 发送数据到服务器，服务器获取的数据是否乱码？
        • 服务器响应给前端的中文，会不会乱码？

    • 包括还要测试tomcat服务器的版本：

      • tomcat10和tomcat9都要进行测试。

    • 测试结果：

      • 对于tomcat10来说，关于字符集，我们程序员不需要干涉，不会出现乱码。

      • 对于tomcat9来说呢？

        • 响应中文的时候，会出现乱码，怎么解决？

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

          • 1

        • 发送ajax post请求的时候，发送给服务器的数据，服务器接收之后乱码，怎么解决？

          request.setCharacterEncoding("UTF-8");

          • 1
  • 相关阅读:
    react antd下拉选择框选项内容换行
    docker安装
    基于ArcGIS的Python数据处理、空间分析和可视化
    安卓用户当心： CERT-IN 发布高危漏洞警告
    QT的补充知识
    Spring Cloud Alibaba 容器化部署最佳实践 | 本地部署版本 | Seata服务端组件安装
    【lwip】06-网络接口层分析
    《最新出炉》系列初窥篇-Python+Playwright自动化测试-20-处理鼠标拖拽-下篇
    【Electron】在 WSL2 中 打包 electron Linux 版本应用及运行
    京东低代码平台：浅谈水滴拖拽画布的设计与实现
  • 原文地址：https://blog.csdn.net/m0_61163395/article/details/126324488