Ajax的一个简单例子--从一个文件文件中读取数据显示到页面中_用ajax读取数据txt文件,然后更新到页面-CSDN博客

本文链接：https://blog.csdn.net/clovejava/article/details/5543243

该博客通过一个简单的Ajax例子展示了如何从data.txt文件中读取数据，并将内容动态显示在网页的<div id='console'></div>部分。利用XMLHttpRequest对象，实现了异步请求数据，当请求状态变为 READY_STATE_COMPLETE 时，将接收到的数据文本显示到页面上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

源文件：

var req=null;
var console=null;
var READY_STATE_UNINITIALIZED=0;
var READY_STATE_LOADING=1;
var READY_STATE_LOADED=2;
var READY_STATE_INTERACTIVE=3;
var READY_STATE_COMPLETE=4;

function loadXMLDoc(url) {

    if(window.XMLHttpRequest && !(window.ActiveXObject)) {
try {
   req = new XMLHttpRequest();
    } catch(e) {
   req = false;
    }
// branch for IE/Windows ActiveX version
} else if(window.ActiveXObject) {
    try {
    req = new ActiveXObject("Msxml2.XMLHTTP");
   } catch(e) {
    try {
       req = new ActiveXObject("Microsoft.XMLHTTP");
    } catch(e) {
       req = false;
    }
  }
}
    if (req) {
        req.onreadystatechange = processReqChange;
req.open("GET",url,true);
        req.send(null);
    }

}

function processReqChange(){
var ready=req.readyState;
var data=null;
if (ready==READY_STATE_COMPLETE){
data=req.responseText;
}else{
data="loading...["+ready+"]";
}
toConsole(data);
}

function toConsole(data){
if (console!=null){
    var newline=document.createElement("div");
    console.appendChild(newline);
    var txt=document.createTextNode(data);
    newline.appendChild(txt);
}
}

window.οnlοad=function(){
console=document.getElementById('console');
loadXMLDoc("data.txt");
}
</script>

</head>
<body>
<div id='console'></div>
</body>
</html>

数据文件：

--文件名是data.txt，保存到源文件同目录下

qq
22
44
55
66
gg
df
xx
dd

页面显示结果是：

loading...[1]

loading...[3]

qq22445566ggdfxxdd