AJAX实现简单的读取文本文档内容到网页--AJAX
2017-12-05 15:05
555 查看
效果图:
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
相关文章推荐
- c/c++: 读取配置文件(文本)内容的简单实现
- C# 实现简单打印(二)-打印一个文本文档,打印的内容是多行的
- Java读取网页内容并生成静态页面的简单实现
- 读取配置文件(文本)内容的简单实现
- Javascript Ajax异步读取RSS文档具体实现
- 利用AJAX实现简单的用户登录程序(处理服务端返回的文本数据)
- C#简单实现读取txt文本文件并分页存储到数组
- 通过js简单实现将一个文本内容转译成加密文本
- jQuery结合ajax实现动态加载文本内容
- 用jQuery向div中添加Html文本内容的简单实现
- 简单的实现爬虫爬取网页文本和图片
- 用iTextSharp读取PDF文档中文本内容的探索
- 搜索文本内容——Java代码的简单实现(修改版)
- Lucene3.1 之读取txt文本文档内容
- 用jQuery向div中添加html文本内容的简单实现
- java发送邮件附件.网页.文本类型的实现(Content的内容设计)
- 网页设计,本页面内左侧菜单导航右侧显示内容简单实现方法
- 使用Selenium+PhantomJS实现网页内容加载(包括网页后期Ajax出来的结果)
- C#编程实现Excel文档中搜索文本内容的方法及思路