使用JAVAScript的XMLHttpRequest()请求后端数据并显示在界面表格当中

使用XMLHttpRequest()请求后端数据并显示在界面表格当中

需求：前端界面当中的表格用于显示后端数据

基础：
1.XML是什么？和HTML的区别是什么？

XML 指可扩展标记语言
*XML和HTML的区别在于：
XML 不是 HTML 的替代。
XML 和 HTML 为不同的目的而设计：
XML 被设计为传输和存储数据，其焦点是数据的内容。
HTML 被设计用来显示数据，其焦点是数据的外观。
HTML 旨在显示信息，而 XML 旨在传输信息。

（需要更加系统的解释，请进入

https://www.w3school.com.cn/xml/index.asp

；不断的去回头看之前的一些基础的概念和知识，会有更深层次的理解，别有一番滋味的赶脚，哈哈~）

2.什么是 XMLHttpRequest 对象？
XMLHttpRequest 对象用于在后台与服务器交换数据。
（以上问题与解释均来自官方）

具体操作：

1.创建XMLHttpRequest对象
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
（这里这样子写的原因在于，牵扯到浏览器版本支不支持 XMLHttpRequest 对象的问题，所以把两种情况都写了）

2.向服务器发送请求
使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xmlhttp.open(“GET”,“test1.txt”,true);
xmlhttp.send();
下面是针对上两种方法官方网站给出的描述：

3.服务器响应
获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
其中，responseText，获得字符串形式的响应数据。
responseXML， 获得 XML 形式的响应数据。
以上就是一个大致的流程。

具体的代码如下：

  <script>
        function showSite(str) {
     
            if (str == "") {
     
                document.getElementById("txtHint").innerHTML = "";
                console.log("param missing!")
                return;
            }
            xmlhttp = new XMLHttpRequest();
            xmlselect = new XMLHttpRequest();

            xmlhttp.onreadystatechange = function () {
     
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
     
                    console.log(xmlhttp.readyState, xmlhttp.responseText)
                    renderTabel(xmlhttp);
                //为了结构不是很杂乱，把这个显示表格内容的函数放在了下面
                }
            }

            xmlhttp.open("GET", "111?table_name=" + str, true);
            //open()方法括号里面的对应分别是，method，url,async,上面的基础中有解释。
            //get是请求的类型，111是代表文件在服务器上的位置，table_name=一个值，这个值就是你请求的表的名称，按照这个表的名称让后端给你响应。
            xmlhttp.send();
            console.log(xmlhttp.responseText);
        }
        
        function renderTabel(_xmlhttp) {
     
            var data = JSON.parse(_xmlhttp.responseText);
            var div1 = document.getElementById('tbody23');
            //数据需要显示在你特定的table里面。
            //这个tbody23是的table里面的tbody的id，下面会附上table结构
            var tableData = ""
            for (var i = 0; i < data.length; i++) {
     
            //写成循环，因为后端数据应该不会是一条

                tableData += '';
                tableData += '' +
                    ' +
                    'type="checkbox" id="select"  class="table_check">';
                tableData += "" + data[i].device_id + "";
                tableData += "" + data[i].category_big+ "";
                tableData += "" + data[i].category_small + "";
                tableData += "" + data[i].type_energy + "";
                tableData += "" + data[i].type+ "";
                tableData += "" + data[i].company + "";
                tableData += "" + data[i].location + "";
                tableData += "" + data[i].overhaul + "";
                tableData += "";
            //以上的data[i].是与后端表格的属性一致，也与前端的表格的属性是属性是相对应的
            }
            div1.innerHTML = tableData;
        }
    </script>

以下附上前端表格结构

<table class="tj_table table table-hover" style="border: 0;margin-bottom: 0px;" >
                                        <thead>
                                            <tr>
                                                <td style="text-align:center"><span class="checkspan">span>td>
                                                <td onclick='chauxanji()'>设备编号td>
                                                <td>设备大类td>
                                                <td>设备小类td>
                                                <td>能源类型td>
                                                <td>设备状态td>
                                                <td>使用单位td>
                                                <td>安装地址td>
                                                <td>检修操作td>
                                            tr>
                                        thead>
                                        <tbody id="tbody23">
                                        <script>
                                            showSite("device")
                                            //device是向后端请求的表名
        //就是xmlhttp.open("GET", "111?table_name=" + str, true);向后端发送table_name=device的请求
                                        script>
                                        tbody>
                                    table>

xmlhttp.open(“GET”, “111?table_name=” + str, true);向后端发送table_name=device的请求如下：就说明已经请求，但是我的路径是错的，所以显示404。

最终显示出来就是这样子：

新手老可爱一枚，有什么问题请大家指出来呀，谢谢大家。