AJAX解析后端回传的XML格式的字符串并获取信息展示到页面中------AJAX

旧约Alatus

已于 2023-11-16 00:00:08 修改

阅读量281

点赞数 5

分类专栏： AJAX JAVA 计算机网络文章标签： javascript ajax json js java java-ee tomcat

于 2023-11-15 15:56:18 首次发布

本文链接：https://blog.csdn.net/2201_75960169/article/details/134422303

版权

JAVA 同时被 3 个专栏收录

534 篇文章 3 订阅

订阅专栏

计算机网络

131 篇文章 0 订阅

订阅专栏

AJAX

45 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script type="text/javascript">
    window.onload = function ()
    {
      document.getElementById("btn").onclick = function ()
      {
        var ajax = new XMLHttpRequest();
        ajax.onreadystatechange = function ()
        {
          if(ajax.readyState === 4)
          {
            if(ajax.status === 200)
            {
              document.getElementById("mySpan").innerHTML = ajax.responseText;
            }
            else
            {
              alert(ajax.status);
            }
          }
        }
        //开启通道
        var username = document.getElementById("username").value;
        var userCode = document.getElementById("userCode").value;
        //设置时间戳
        var time = new Date();
        ajax.open("GET","/ajax/ajaxRequest2?username="+username+"&userCode=" + userCode + "&当前时间戳" + time.getTime(),true);
        //get请求提交数据是在请求行上提交,直接以URL?name=value&name=value&name=value格式提交
        ajax.send();
        //这个是HTTP协议规定的
      }
      document.getElementById("btn1s").onclick = function()
      {
          var uio = new XMLHttpRequest();
          uio.onreadystatechange = function()
          {
              if(uio.readyState === 4)
              {
                  if(uio.status === 200)
                  {
                    //XML和JSON都是常用的数据格式
                    //xml较死板,解析难
                    var xml = uio.responseXML;
                    //用responseXML来接收
                    console.log(xml);
                    //通过节点名取出节点称呼
                    var students = xml.getElementsByTagName("student");
                    console.log(students[0].nodeName);
                    var html = "";
                    for (var i = 0; i < students.length; i++)
                    {
                      html += "<tr>";
                      html += "<td>" + (i+1) + "</td>";
                        //获取student信息
                      var student = students[i];
                      var nameOrAge = student.childNodes;
                      for (var j = 0; j < nameOrAge.length; j++)
                      {
                        var node = nameOrAge[j];
                        console.log(node.nodeName);
                        if(node.nodeName === "age")
                        {
                          html += "<td>" + node.textContent + "</td>";
                        }
                        if(node.nodeName === "name")
                        {
                          html += "<td>" + node.textContent + "</td>";
                        }
                      }
                      html += "</tr>"
                    }
                    document.getElementById("tbody").innerHTML = html;
                  }
                  else
                  {
                      alert(uio.status);
                  }
              }
          }
          uio.open("GET","/ajax/ajaxRequest123?t=" + new Date().getTime(),true);
          uio.send();
      }
    }
  </script>
  用户名<input type="text" name="username" id="username">
  账号<input type="text" name="userCode" id="userCode">
  <br>
  <button id="btn">发送AJAX</button>
  <br>
  <span id="mySpan"></span>
  <br>
<input type="button" id="btn1s" value="按钮">
<br>
<table>
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  <tbody id="tbody"></tbody>
</table>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <script type="text/javascript">
    window.onload = function ()
    {
      document.getElementById("btn").onclick = function ()
      {
        var ajax = new XMLHttpRequest();
        ajax.onreadystatechange = function ()
        {
          if(ajax.readyState === 4)
          {
            if(ajax.status === 200)
            {
              document.getElementById("mySpan").innerHTML = ajax.responseText;
            }
            else
            {
              alert(ajax.status);
            }
          }
        }
        //开启通道
        var username = document.getElementById("username").value;
        var userCode = document.getElementById("userCode").value;
        //设置时间戳
        var time = new Date();
        ajax.open("GET","/ajax/ajaxRequest2?username="+username+"&userCode=" + userCode + "&当前时间戳" + time.getTime(),true);
        //get请求提交数据是在请求行上提交,直接以URL?name=value&name=value&name=value格式提交
        ajax.send();
        //这个是HTTP协议规定的
      }
      document.getElementById("btn1s").onclick = function()
      {
          var uio = new XMLHttpRequest();
          uio.onreadystatechange = function()
          {
              if(uio.readyState === 4)
              {
                  if(uio.status === 200)
                  {
                    //XML和JSON都是常用的数据格式
                    //xml较死板,解析难
                    var xml = uio.responseXML;
                    //用responseXML来接收
                    console.log(xml);
                    //通过节点名取出节点称呼
                    var students = xml.getElementsByTagName("student");
                    console.log(students[0].nodeName);
                    var html = "";
                    for (var i = 0; i < students.length; i++)
                    {
                      html += "<tr>";
                      html += "<td>" + (i+1) + "</td>";
                        //获取student信息
                      var student = students[i];
                      var nameOrAge = student.childNodes;
                      for (var j = 0; j < nameOrAge.length; j++)
                      {
                        var node = nameOrAge[j];
                        console.log(node.nodeName);
                        if(node.nodeName === "age")
                        {
                          html += "<td>" + node.textContent + "</td>";
                        }
                        if(node.nodeName === "name")
                        {
                          html += "<td>" + node.textContent + "</td>";
                        }
                      }
                      html += "</tr>"
                    }
                    document.getElementById("tbody").innerHTML = html;
                  }
                  else
                  {
                      alert(uio.status);
                  }
              }
          }
          uio.open("GET","/ajax/ajaxRequest123?t=" + new Date().getTime(),true);
          uio.send();
      }
    }
  </script>
  用户名<input type="text" name="username" id="username">
  账号<input type="text" name="userCode" id="userCode">
  <br>
  <button id="btn">发送AJAX</button>
  <br>
  <span id="mySpan"></span>
  <br>
<input type="button" id="btn1s" value="按钮">
<br>
<table>
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  <tbody id="tbody"></tbody>
</table>
</body>
</html>

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;

@WebServlet("/ajaxRequest123")
public class ajaxRequest123 extends HttpServlet
{
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
        //注意我们的响应对象需要设置为XML,不再是html了
        response.setContentType("text/xml;charset=UTF-8");
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        StringBuilder xml = new StringBuilder();
//        XML格式如下
        xml.append("<students>");
        xml.append("<student><name>Jack</name><age>20</age></student>");
        xml.append("<student><name>Rose</name><age>20</age></student>");
        xml.append("</students>");
        PrintWriter out = response.getWriter();
        out.println(xml);
    }
}

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;

@WebServlet("/ajaxRequest123")
public class ajaxRequest123 extends HttpServlet
{
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
        //注意我们的响应对象需要设置为XML,不再是html了
        response.setContentType("text/xml;charset=UTF-8");
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        StringBuilder xml = new StringBuilder();
//        XML格式如下
        xml.append("<students>");
        xml.append("<student><name>Jack</name><age>20</age></student>");
        xml.append("<student><name>Rose</name><age>20</age></student>");
        xml.append("</students>");
        PrintWriter out = response.getWriter();
        out.println(xml);
    }
}