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

ゝ一纸荒年。 2024-02-18 11:03 24阅读 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);
>         }
>     }