• 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

  • 相关阅读:
    vue组件上绑定原生事件
    vue中sync的使用原来这么简单
    vscode快捷键
    justify-content: space-between能够对齐的解决办法
    day_01:__all__、__init__、推导式
    单元测试框架pytest
    ELK从入门到实战
    HTB::Return
    Codeforces Round #752 (Div. 2) ABCD
    动态神经网络综述阅读笔记
  • 原文地址:https://www.cnblogs.com/qikeyishu/p/7986897.html
Copyright © 2020-2023  润新知