效果图：

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>

编辑器模式下：

 <!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>

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

AJAX实现简单的读取文本文档内容到网页--AJAX的更多相关文章

  1. c#读取文本文档实践4-读入到list泛型集合计算后写入新文档

    商品 数量 单价英语 66 100语文 66 80数学 66 100化学 66 40物理 66 60 上面截图是要处理的文本文档内容,目的是计算出总价并加在最后一列. 这一篇与上一篇比较类似,目的相同 ...

  2. c#读取文本文档实践1-File.ReadAllLines()

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.I ...

  3. 编写Java程序，读取文本文档的内容，去除文本中包含的“广告”字样，把更改后的内容保存到一个新的文本文档中

    查看本章节 查看作业目录 需求说明: 读取文本文档的内容,去除文本中包含的"广告"字样,把更改后的内容保存到一个新的文本文档中 实现思路: 在main() 方法中,使用 new F ...

  4. c#读取文本文档实践3-写入到文本本文档

    首先通过File.ReadAllLines()方法读入文本文档中内容并返回字符串数组contents,这样每行数据就成为了这个字符串数组contents的一个元素,再利用split()方法将每一个元素 ...

  5. C# 读取文本文档（转）

    1.添加命名空间 System.IO; System.Text; 2.文件的读取 (1).使用FileStream类进行文件的读取,并将它转换成char数组,然后输出. byte[] byData = ...

  6. Java 单字节、多字节读取文本文档中的内容

    文本文档位于工程下. 鼠标右击工程,选择“new - File”,即可创建. 文本文档的格式:GBK 单字节读取 import java.io.File; import java.io.FileInp ...

  7. c#读取文本文档实践2-计算商品价格

    商品 数量 单价英语 66 100语文 66 80数学 66 100化学 66 40物理 66 60 上面是文本文档中读入的数据. using System; using System.Collect ...

  8. c读取文本文档

    想数一下文本文档一共有多少行,写了个小程序 1.用fopen()以只读方式打开文件 2.用fgetc()获取文件流中的字符内容 3.如果字符内容为'\n'换行符,count++ 最后输出count的值 ...

  9. 读取FTP上的某个文本文档内容到本地

    /// <summary> /// 读取FTP服务器文本内容 /// </summary> /// <param name="strPath"> ...

随机推荐

  1. 安装基于 Linux 发行版的重要事项（流程指引）

    安装基于 Linux 发行版的重要事项(Install important issues based on the Linux distribution. (Process guidance)) 1. ...

  2. Orleans入门例子

    Orleans入门例子 这是Orleans系列文章中的一篇.首篇文章在此  一.铺垫. 虽然是个入门例子,还是需要一些铺垫. Orleans的最小完全体,应该分为2个部分.一个是Orleans客户端, ...

  3. Gentoo(贱兔)Linux安装笔记

      网上对于Gentoo Linux 的教程少之又少,所以这里我将自己的安装记录贴出来 希望对正在研究Gentoo 的小伙伴们有帮助! 1.确认连接到互联网,使用net-setup工具配置网络 roo ...

  4. 【linux之设备，分区，文件系统】

    一.设备 IDE磁盘的设备文件采用/dev/hdx来命名,分区则采用/dev/hdxy来命名,其中x表示磁盘(a是第一块磁盘,b是第二块磁盘,以此类推), y代表分区的号码(由1开始,..3以此类推) ...

  5. EntityFrameWork实现部分字段获取和修改(含源码)

    EntityFrameWork类库,是微软推出的ORM组件,它是基于Ado.Net的,个人感觉还是非常 好用的.以下介绍的2个功能点分别是部分字段更新和获取 解决部分字段Update.本方案采用仓储模 ...

  6. selenium自动化测试配置工具整理

    firefox浏览器历史版本 网址通道:http://ftp.mozilla.org/pub/firefox/releases/ chromedriver历史版本 网址通道:http://chrome ...

  7. 变态的IE

    1.IE7及更早版本, unshift()方法总是返回undefined而不是数组的新长度.2.IE8及之前版本, 在catch语句中捕获的错误对象会被添加到执行环境的变量对象, 而不是catch语句 ...

  8. 搭建VUE项目的准备（利用vue-cli来构建项目）

    首先需要明确的是:Vue.js 不支持 IE8 及其以下 IE 版本,一般用与移动端,基础:开启最高权限的DOS命令(否则会出现意外的错误提示)   注意:个人小推荐如果我们不知道如何才能开启最高权限 ...

  9. 对于文件File类型中的目录分隔符

    当我们在使用File f=new File(path); 对于这个path来说是一个很痛苦的事情,在不同的系统上面的分隔符号是不一样的 在windows下面的话是一个"\"而在un ...

  10. php的ob函数实现页面静态化

    首先介绍一下php中ob缓存常用到的几个常用函数ob_start():开启缓存机制ob_get_contents():获取ob缓存中的内容ob_clean()清除ob缓存中的内容,但不关闭缓存ob_e ...