JavaScript调用ajax获取文本文件内容实现代码


Posted in Javascript onMarch 28, 2014

这几年JQuery写多了,传统的的javascript已经很久不写了,不少东西都忘掉了,还有多少人记得javascript中实现ajax操作需要借助XMLHttpRequest对象,其实jquery的ajax本质也是这个,好了,今天就花点时间演示一下如何用传统javascript获取文本内容并展示在页面上,废话不多少,直接上代码,注释写的很详细,大家应该能看懂:

<script type="text/javascript"> 
//(A)①获取文本文件方法(传统javascript实现AJAX写法) 
function LoadXMLDoc1() 
{ 
var xmlhttp; 
if(window.XMLHttpRequest) 
{ 
// code for IE7+, Firefox, Chrome, Opera, Safari 
xmlhttp=new XMLHttpRequest(); 
} 
else 
{ 
// code for IE6, IE5 
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
} 
//onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。 
xmlhttp.onreadystatechange=function() 
{ 
//readyState 
//存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 
//0: 请求未初始化 
//1: 服务器连接已建立 
//2: 请求已接收 
//3: 请求处理中 
//4: 请求已完成,且响应已就绪 
//status 
//200: "OK" 
//404: 未找到页面 
if (xmlhttp.readyState==4 && xmlhttp.status==200) 
{ 
document.getElementById("myDiv1").innerHTML=xmlhttp.responseText; 
} 
} 
xmlhttp.open("GET","doc/test1.txt",true); 
xmlhttp.send(); 
}

html页面代码:
<body> 
<form id="form1" runat="server"> 
<%-- 获取服务器上的文本文件并显示--%> 
<div id="myDiv1"><h2>通过ajax改变内容</h2></div> 
<button id="btnChange1" type="button" onclick="LoadXMLDoc1()">通过 AJAX 改变内容(获取test1.txt上面的文本)</button> 
</form> 
</body>

演示效果:
JavaScript调用ajax获取文本文件内容实现代码
Javascript 相关文章推荐
js二维数组排序的简单示例代码
Jan 24 Javascript
Bootstrap每天必学之下拉菜单
Nov 25 Javascript
jquery 遍历数组 each 方法详解
May 25 Javascript
Bootstrap3下拉菜单的实现
Feb 22 Javascript
angularjs+bootstrap菜单的使用示例代码
Mar 07 Javascript
js实现一键复制功能
Mar 16 Javascript
JS实现小球的弹性碰撞效果
Nov 11 Javascript
微信小程序动态生成二维码的实现代码
Jul 25 Javascript
element-ui 中的table的列隐藏问题解决
Aug 24 Javascript
layui实现多图片上传并限制上传的图片数量
Sep 26 Javascript
express中static中间件的具体使用方法
Oct 17 Javascript
vue.config.js常用配置详解
Nov 14 Javascript
js如何调用qq互联api实现第三方登录
Mar 28 #Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
Mar 28 #Javascript
jquery获取颜色在ie和ff下的区别示例介绍
Mar 28 #Javascript
js中精确计算加法和减法示例
Mar 28 #Javascript
查找页面中所有类为test的结点的方法
Mar 28 #Javascript
js 验证身份证信息有效性
Mar 28 #Javascript
JS中怎样判断undefined(比较不错的方法)
Mar 27 #Javascript
You might like
php简单提示框alert封装函数
2010/08/08 PHP
iOS10推送通知开发教程
2016/09/19 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
2010/10/20 Javascript
javascript 中__proto__和prototype详解
2014/11/25 Javascript
window.onload使用指南
2015/09/13 Javascript
JavaScript数组去重的五种方法
2015/11/05 Javascript
javascript每日必学之继承
2016/02/23 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
2016/12/02 Javascript
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
Node解决简单重复问题系列之Excel内容的获取
2018/01/02 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
2018/08/31 Javascript
layui富文本编辑器前端无法取值的解决方法
2019/09/18 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
2019/11/12 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
2020/12/24 Javascript
react结合bootstrap实现评论功能
2020/05/30 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
python使用mysqldb连接数据库操作方法示例详解
2013/12/03 Python
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
Python读取sqlite数据库文件的方法分析
2017/08/07 Python
Python实现iOS自动化打包详解步骤
2018/10/03 Python
浅谈Python中(&amp;,|)和(and,or)之间的区别
2019/08/07 Python
PyTorch预训练的实现
2019/09/18 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
Python类成员继承重写的实现
2020/09/16 Python
python爬虫快速响应服务器的做法
2020/11/24 Python
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
介绍一下write命令
2012/09/24 面试题
护理助产毕业生的求职信
2014/03/02 职场文书
股份合作协议书范本
2014/04/14 职场文书
淘宝文案策划岗位职责
2015/04/14 职场文书
小学一年级数学教学反思
2016/02/16 职场文书
浅谈如何写好演讲稿?
2019/06/12 职场文书
JavaScript 语句之常用 for 循环详解
2021/03/29 Javascript