• 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

  • 相关阅读:
    接口测试总结
    Jmeter教程索引贴
    [转] 配置Log4j
    Jmeter报告优化之New XSL stylesheet
    Jmeter默认报告优化
    iOS 自动移除KVO观察者
    iPhone X 适配 ( iOS 11适配 )
    iOS中自动登录的设计
    iOS APP 安全测试
    APP安全测评checklist---Android
  • 原文地址:https://www.cnblogs.com/qikeyishu/p/7986897.html
Copyright © 2020-2023  润新知