AJAX实现简单的读取文本文档内容到网页--AJAX
2024-10-11 18:54:44
效果图:
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
最新文章
- 第二篇 Entity Framework Plus 之 Query Future
- 移动端浏览器和微信浏览器上禁止body的滚动条
- MyEclipse开发Java Web项目步骤
- Loadrunner开发测试脚本
- 单元测试写cookie
- golang笔记——包
- Sharepoint 2013 网站集的删除与还原
- cryptDB安装分析
- php实现的太平洋时间和北京时间互转的自定义函数
- 极客时间|AI技术内参
- 51Nod 1264 线段相交(计算几何)
- Oracle重新获取统计信息以及SQLSERVER重建索引
- CHAP认证(双向)
- RAC7——vip的理解
- 小朋友学Java(1):Mac系统安装JDK
- IntelliJ IDEA 2018.2.2及以下版本破解方法
- 将已有的项目提交到GitHub
- 腾讯旗下网站的很多URL都包含“cgi-bin”,是什么意思?他们后台用什么语言?
- OpenGL位图函数
- 科猫网项目总结(基于SSM框架)
热门文章
- 2018/2/14 设计模式学习笔记(一) 自己实现ArrayList,LinkedList和Iterator,以及在此过程中对于面向对象,面向接口,还有抽象类的一些思考感悟
- 《第一行代码 android》 读书笔记:找出当前界面对应的Activity
- 一个.net专业户转Spring Boot V2.0开发的体会
- error: Autoconf version 2.67 or higher is required
- JSP基础使用
- 基于MATLAB2016b图形化设计自动生成Verilog语言的积分模块及其应用
- WinServer2012 R2忘记密码的解决方案+远程连接另一种莫名其妙故障
- 高性能javascript笔记
- Asp.Net Core Identity+EFCore + Mysql踩坑记录
- SpringBoot idea maven打包war