• AJAX基于XML的数据交换、XML和JSON的区别


    • 注意:如果服务器端响应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
  • 相关阅读:
    (原创)【B4A】一步一步入门05:控件、公有属性、水平锚定、垂直锚定(控件篇01)
    猿创征文|JVM之图解垃圾收集器2-Shenandoah和ZGC
    如何搭建一个好的知识库管理系统?
    跨境电商:外贸企业做海外社媒营销的优势
    【一起来学C++】————(6)C++中的继承
    Entity Framework Core 7批量数据插入实现高速化
    数字集成电路设计(五、仿真验证与 Testbench 编写)(二)
    网络安全专业应届生必备的几个实用工具,快收藏
    深度解析C#数组对象池ArrayPool<T>底层原理
    常用设计模式
  • 原文地址:https://blog.csdn.net/m0_53881899/article/details/126690488