• Ajax——Ajax基于JSON和XML的数据交换格式以及乱码解决

    Ajax知识点总结目录

    • 说明：
          本篇文章总结的是Ajax对于来自服务器传递过来的JSON数据和XML两种数据格式的数据处理的方式，以及简单说明Ajax的乱码问题。

    1. Ajax基于JSON的数据交换

    • 基于JSON的数据交换：就是说对于服务器将往前端发送的数据包装成JSON类型，那么前端该如何从JSON类型的数据中调取自己需要的信息呢？这就是需要关注的两点

      • 服务器将返回的数据包装成json类型的数据：

        • 第一种方式：原始方式包装，使用拼接的方式，将数据以json的形式放到String类型的字符串中
        • 第二种方式：使用阿里巴巴的fastjson组件，它可以将java对象转换成json格式的字符串（所以这里需要新建一个Java类将用户信息封装到里面然后调用JSON.toJSONString(),将Java类传进去自动转化）

    第一种方式后端代码编写：【由于发文限制，所以将所有的密码改为pd】

          @Override
    protected void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {


        //设置响应格式
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();

        StringBuilder json = new StringBuilder();
        String jsonstr = "";

        Connection conn = null;
        PreparedStatement ps = null;
        ResultSet rs = null;
//        String str = "{\"username\":\"zhngsan\", \"pd\":\"123456\"}";

        try {
            conn = DBUtil.getConnection();
            String sql = "select * from t_user";
            ps = conn.prepareStatement(sql);
            rs = ps.executeQuery();

            json.append("[");
            while (rs.next()){

                String username = rs.getString("username");
                String pd = rs.getString("pd");
                //{"username":"  zhangsan  ", "pd":"  123456  "},

                json.append("{\"username\":\"");
                json.append(username);
                json.append("\", \"pd\":\"");
                json.append(pd);
                json.append("\"},");

            }
            jsonstr = json.substring(0,json.length()-1)+"]";
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            DBUtil.close(conn,ps,rs);
        }


        out.print(jsonstr);

    }


    • 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
    • 第二种方式后端代码编写：(由于含有多个用户所以需要建立一个List数组存储)
      @Override
    protected void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

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

        Connection conn = null;
        PreparedStatement ps = null;
        ResultSet rs = null;

        List<Student> studentList = new ArrayList<>();

        try {
            conn = DBUtil.getConnection();
            String sql = "select * from t_user";
            ps = conn.prepareStatement(sql);
            rs = ps.executeQuery();

            while (rs.next()) {
                String username = rs.getString("username");
                String password = rs.getString("password");
                Student student = new Student(username,password);
                studentList.add(student);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            DBUtil.close(conn,ps,rs);
        }

        String jsonString = JSON.toJSONString(studentList);
        out.print(jsonString);
    }

    • 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
    • 前端代码：（需要先取出json对象数组，人后遍历每一个对象，取出需要展示的属性）
    window.onload = function () {
     document.getElementById("btn").onclick = function (){
                //1.创建核心对象
     var xhr = new XMLHttpRequest();
                //2.获取服务器数据
     xhr.onreadystatechange = function () {
         var html = ""
         if (xhr.readyState == 4) {
             if (xhr.status == 200) {
                 var json = JSON.parse(this.responseText);
                    for (var i = 0; i < json.length; i++){
                        var stuJson = json[i];
                        html += ""
                        html +=stuJson.username
                        html +=""
                        html +=stuJson.password
                        html   +=""
                    }
                    document.getElementById("tbody").innerHTML = html
              }else{
                     alert(this.status)
               }
            }
         }
                //3.打开通道
                // xhr.open("GET","/ajax/request5",true);
                xhr.open("GET","/ajax/request6",true);
                //4.发送数据
                xhr.send();
            }
        }

    • 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

    2. Ajax基于XML的数据交换

    • 基于XML的数据交换格式的封装数据太大，一般都是选择使用JSON,但是偶尔也会使用，所以这种方式也需要知道。
    • 同样的问题，需要解决的就是后端封装，和前端解封装的问题
      • 后端实现：【在获取到数据之后，直接按照xml的数据方式进行拼接要发送到前端的数据即可】
        如：
     @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        //设置响应的数据类型为xml
        response.setContentType("text/xml;charset=UTF-8");
        PrintWriter out = response.getWriter();

        StringBuilder xml = new StringBuilder();

        Connection conn = null;
        PreparedStatement ps = null;
        ResultSet rs = null;

        try {
            conn = DBUtil.getConnection();
            String sql = "select * from t_user";
            ps = conn.prepareStatement(sql);
            rs = ps.executeQuery();

            xml.append("");

            while (rs.next()) {
                String username = rs.getString("username");
                String password = rs.getString("password");

                xml.append("");
                xml.append("");
                xml.append(username);
                xml.append("");
                xml.append("");
                xml.append(password);
                xml.append("");
                xml.append("");

            }

            xml.append("");
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            DBUtil.close(conn,ps,rs);
        }

        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

    • 前端对接受到的数据解封装：

      • 首先获取xml文件
      • 按找标签名找到每一个对象students
      • 遍历每一个对象student，获取需要的节点信息
     window.onload = function () {
        document.getElementById("btn").onclick = function (){
            //1.创建JSON核心对象
            var xhr = new XMLHttpRequest();
            //2.
            xhr.onreadystatechange = function () {

                if (this.readyState == 4) {
                    if (this.status == 200) {
                        //
                        var xmlDoc = this.responseXML;
                        // console.log(xmlDoc)
                        var html = "";


                        var students = xmlDoc.getElementsByTagName("student");
                        //遍历所有的student
                        for (var i = 0; i < students.length; i++){
                            //获取单个student
                            var student = students[i]
                            //获取student下的所有子节点

                            html += ""

                            var childNodes = student.childNodes;

                            for (var j = 0; j < childNodes.length; j++){
                                var node = childNodes[j];
                                if (node.nodeName == "username"){
                                    // console.log("name="+node.textContent)
                                    html += ""+node.textContent+""
                                }else {
                                    html += ""+node.textContent+""
                                }
                            }

                            html += ""

                        }

                        document.getElementById("tbody").innerHTML = html
                    }else{
                        alert(this.status)
                    }
                }
            }

            //3.打开通道
            xhr.open("GET","/ajax/ajaxrequest7",true)
            //4.发送数据
            xhr.send();


        }
    }

    • 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

    3. 对于Ajax乱码问题

    • 通过对一下问题的测试得出结论：tomcat10版本解决了乱码问题，后端程序不需要理会这个问题，Tomcat10之前的版本还没有解决，需要程序员设置编码方式

      • 发送ajax get请求

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

      • 发送ajax post请求

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

    • 对于Tomcfat9以及之前版本响应中文的时候，出现乱码解决？

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

      • 1

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

      request.setCharacterEncoding("UTF-8");

      • 1
  • 相关阅读:
    Keil软件仿真的方法: μVision2调试器
    安科瑞ANet通信管理机在电力监控系统中的应用-Susie 周
    如何理解go语言中的“为类型定义一个方法“?
    pgsql update select 查询并更新数据
    前端加密与解密
    【C++】priority_queue&&仿函数
    线性表的链式表示——单链表；头插，尾插，按值查找，按序号查找，插入，删除；
    C++中的继承
    petite-vue源码剖析-v-if和v-for的工作原理
    关于网络通讯的数据包是如何构造
  • 原文地址：https://blog.csdn.net/weixin_44606952/article/details/126358533