效果图：

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. SpringBoot学习之Json数据交互

    最近在弄监控主机项目,对javaweb又再努力学习.实际的项目场景中,前后分离几乎是所以项目的标配,全栈的时代的逐渐远去,后端负责业务逻辑处理,前端负责数据展示成了一种固定的开发模式.像thymele ...

  2. 随机手机号和身份证号码(python)

    在使用selenium2 python自动化过程中,用户添加的时候程序设置的手机号和身份证号码是唯一的,这方面python代码可以实现,以下是调试成功,可以实现的. 具体代码如下 身份证需要下载dis ...

  3. Gitbucket—快速建立自己的Github

    GitBucket是一个用Scala语言编写的类似Github的应用,界面非常相似.它非常容易安装–容易到你只需要把它的war文件扔到tomcat中,然后启动tomcat就直接可以访问了.或者直接ja ...

  4. 分布式代码管理系统Git实践

    1.1 版本管理工具介绍   什么是版本管理工具   为什么要使用版本管理工具?   老板要求小明写一个可行性报告,当他写完给老板看后,结果--     Git简介   早先linux内核代码托管在B ...

  5. jq自定义多选下拉列表框

    多选选择国家插件 https://gitee.com/richard1015/dropDownList

  6. 【学习笔记】Struts2 类型转换

    为什么需要类型转换 在基于HTTP协议的Web应用中 客户端请求的所有内容(表单中提交的内容等)都以文本编码的方式传输到服务器端但服务器端的编程语言(如Java)有着丰富的数据类型 如 int boo ...

  7. DxPackNet 3.音频捕捉（录音）

    用DxpackNet捕捉音频其实很简单 1.初始化控件 IDxMicrophCapture microphone; private void Form1_Load(object sender, Eve ...

  8. FZU 2234

    题目为中文,题意略. 这个题目我开始用贪心做bfs两次,这样做是错的,因为两次局部的最优解并不能得出全局的最优解,以下面样例说明: 3 0   10   -1 10   10   10 1   0  ...

  9. EmguCv“线段” 结构类型学习

    1. 文件所在 Namespace: Emgu.CV.Structure Assembly: Emgu.CV (in Emgu.CV.dll) Version: 3.0.0.2157 (3.0.0.2 ...

  10. String、StringBuffer、与StringBuilder的区别

    转载自博客园,原文链接:String.StringBuffer.与StringBuilder的区别 相信大家都知道StringBuffer.StringBuilder,但是这两个的用法都差不多,到底有 ...