效果图：

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. iOS学习——UIView的研究

    在iOS开发中,我们知道有一个共同的基类——NSObject,但是对于界面视图而言,UIView是非常重要的一个类,UIView是很多视图控件的基类,因此,对于UIView的学习闲的非常有必要.在iO ...

  2. SDN第5次上机作业

    SDN第5次上机作业 实验目的 1.搭建如下拓扑并连接控制器 2.下发相关流表和组表实现负载均衡 3.抓包分析验证负载均衡 实验步骤 1.建立以下拓扑,并连接上ODL控制器. 提交要求:ODL拓扑界面 ...

  3. JavaScript中涉及得运算符以及运算符的优先级

    在js中主要有三种运算符:算术运算符,逻辑与比较运算符,位运算符.在着三种运算符中,最常见的应该是算术与比较运算符,位运算符比较少见一些 *说到了运算符,就不得不说运算符的优先级.下面我来列一下这些运 ...

  4. qt实现一个简单的计算器

    1.计算器的界面如下图所示 dalog.cpp #include "dialog.h" #include "ui_dialog.h" #include<Q ...

  5. memcached安装与使用详解

    一.memcache的简介 memcache是高速,分布式的内存缓存服务器 php的缓存方式一般可以使用memcache技术和redis技术,其中各有优劣,因不同的情况而选择较为适合的缓存技术,其中m ...

  6. Eclipse Java，debug模式无法调试，调试按钮不可用时解决办法

    经常出现debug模式进入后,debug的几个按钮置灰,F5,6,8,没有任何反应时,这样操作: 退出 Eclipse.打开 Eclipse 目录下的 configuration 下的 org.ecl ...

  7. Zabbix Agent active主动模式监控

    zabbix_server端当主机数量过多的时候,由Server端去收集数据,Zabbix会出现严重的性能问题,主要表现如下: 1.当被监控端到达一个量级的时候,Web操作很卡,容易出现502 2.图 ...

  8. Apollo阿波罗配置中心docker

    前言 在分布式系统中,要改个配置涉及到很多个系统,一个一个改效率低下,吃力不讨好.用配置中心可以解决这个问题.当然配置中心有不少,以下对比的表格是照搬Apollo Wiki的. 功能点 Apollo ...

  9. 使用Python管理数据库

    使用Python管理数据库   这篇文章的主题是如何使用Python语言管理数据库,简化日常运维中频繁的.重复度高的任务,为DBA们腾出更多时间来完成更重要的工作.文章本身只提供一种思路,写的不是很全 ...

  10. selenium自动化测试学习（一）

    在学习selenium自动化测试前,我们需要先了解一点自动化测试的相关知识. (一)什么是自动化测试 (二)为什么要做自动化测试 (三)自动化测试优缺点 (1)什么是自动化测试 自动化测试是把以人为驱 ...