AJAX实现简单的读取文本文档内容到网页--AJAX

时间:2024-01-23 19:02:01

AJAX实现简单的读取文本文档内容到网页--AJAX

效果图:

 

Demo.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="keywords" content=""/>
  <meta name="description" content=""/>
  <title>AJAX实现读取文本文档内容到网页</title>
  <style type="text/css">
  section{height: 100px;box-shadow: 0 0 5px #666;margin-top: 15px;}
</style>
</head>
<body>
  <section id="container"></section>
  <br/>
  <input type="button" value="查看读取到的内容" onclick="readTxt()"/>
<script language="JavaScript">
  var jsContainer = document.getElementById('container');
  function readTxt() {
  var xhr = new XMLHttpRequest();
  xhr.open('get','txt/ajax_info.txt',true);
  xhr.send();
  xhr.onreadystatechange = function () {
  if (xhr.readyState == 4&&xhr.status == 200){
    alert("请求服务器数据成功且返回数据成功!");
    jsContainer.innerHTML = xhr.responseText;
  }
//  else {
//    console.log(xhr.status);
//   }
  };

  }
</script>
</body>
</html>

编辑器模式下:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="keywords" content=""/>
 6     <meta name="description" content=""/>
 7     <title>AJAX实现读取文本文档内容到网页</title>
 8     <style type="text/css">
 9         section{height: 100px;box-shadow: 0 0 5px #666;margin-top: 15px;}
10     </style>
11 </head>
12 <body>
13 <section id="container"></section>
14 <br/>
15 <input type="button" value="查看读取到的内容" onclick="readTxt()"/>
16 <script language="JavaScript">
17     var jsContainer = document.getElementById('container');
18     function readTxt() {
19         var xhr = new XMLHttpRequest();
20         xhr.open('get','txt/ajax_info.txt',true);
21         xhr.send();
22         xhr.onreadystatechange = function () {
23             if (xhr.readyState == 4&&xhr.status == 200){
24                 alert("请求服务器数据成功且返回数据成功!");
25                 jsContainer.innerHTML = xhr.responseText;
26             }
27 //            else {
28 //                console.log(xhr.status);
29 //            }
30         };
31 
32     }
33 </script>
34 </body>
35 </html>

源码文件下载: AJAX实现读取文本文档内容到网页.zip