效果图：

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. c语言中的#ifdef和#ifndef

    #include "stdio.h"#include "conio.h"#define MAX#define MAXIMUM(x,y) (x>y)?x:y ...

  2. 简单DNA序列组装（非循环子图）

    生物信息学原理作业第四弹:DNA序列组装(非循环子图) 原理:生物信息学(孙啸) 大致思想: 1. 这个算法理解细节理解比较困难,建议看孙啸的生物信息学相关章节. 2. 算法要求所有序列覆盖整个目标D ...

  3. 2018/1/9 redis学习笔记(一)

    本文不涉及redis基本命令以及javaapi的解释操作; 首先介绍下redis,一个nosql非关系型数据库,运行在缓存中,特点就是可存储的数据结构类型很多,做为KEY-VALUE数据库,它的键只能 ...

  4. CNN网络架构演进：从LeNet到DenseNet

    卷积神经网络可谓是现在深度学习领域中大红大紫的网络框架,尤其在计算机视觉领域更是一枝独秀.CNN从90年代的LeNet开始,21世纪初沉寂了10年,直到12年AlexNet开始又再焕发第二春,从ZF ...

  5. 常见dos命令总结

    常用的内部命令有MD.CD.RD.DIR.PATH.COPY.TYPE.EDIT.REN.DEL.CLS.VER.DATE.TIME.PROMPT. 常用的外部命令有DELTREE.FORMAT.DI ...

  6. 关于Git的版本问题

    问题的起源 我在IDEA上不小心修改了文件(加了一行空行)并且被保存了,在GitHub Desktop桌面工具上可以看到changes中有修改记录,并且使用命令行git status也可以看到文件的修 ...

  7. 洛谷P1783 海滩防御 分析+题解代码

    洛谷P1783 海滩防御 分析+题解代码 题目描述: WLP同学最近迷上了一款网络联机对战游戏(终于知道为毛JOHNKRAM每天刷洛谷效率那么低了),但是他却为了这个游戏很苦恼,因为他在海边的造船厂和 ...

  8. JMeter性能测试入门--偏重工具的使用

    1.JMeter整体简介 Apache JMeter是Apache组织开发的基于Java的压力测试工具.用于对软件做压力测试,它最初被设计用于Web应用测试,但后来扩展到其他测试领域. 它可以用于测试 ...

  9. Shiro 核心功能案例讲解 基于SpringBoot 有源码

    Shiro 核心功能案例讲解 基于SpringBoot 有源码 从实战中学习Shiro的用法.本章使用SpringBoot快速搭建项目.整合SiteMesh框架布局页面.整合Shiro框架实现用身份认 ...

  10. 《android开发艺术探索》读书笔记（十）--Android的消息机制

    接上篇<android开发艺术探索>读书笔记(九)--四大组件 No1: 消息队列MessageQueue的内部存储结构并不是真正的队列,而是采用单链表的数据结构来存储消息列表,因为单链表 ...