使用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