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 相关文章推荐
从阶乘函数对比Javascript和C#的异同
May 31 Javascript
Jvascript学习实践案例(开发常用)
Jun 25 Javascript
js原型链原理看图说明
Jul 07 Javascript
JavaScript中的typeof操作符用法实例
Apr 05 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
Apr 26 Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
May 27 Javascript
微信小程序实现多个按钮toggle功能的实例
Jun 13 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
Oct 19 Javascript
浅谈vue中组件绑定事件时是否加.native
Nov 09 Javascript
解决Vue打包上线之后部分CSS不生效的问题
Nov 12 Javascript
原生JS实现相邻月份日历
Oct 13 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
thinkphp实现面包屑导航(当前位置)例子分享
2014/05/10 PHP
PHP排序算法类实例
2015/06/17 PHP
ThinkPHP删除栏目(实现批量删除栏目)
2017/06/21 PHP
Yii2框架操作数据库的方法分析【以mysql为例】
2019/05/27 PHP
javascript+xml技术实现分页浏览
2008/07/27 Javascript
javascript ajax 仿百度分页函数
2013/10/29 Javascript
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
终于实现了!精彩的jquery弹幕效果
2016/07/18 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
关于Vue实现组件信息的缓存问题
2017/08/23 Javascript
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
[01:01:29]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第一场
2018/04/05 DOTA
解决Python传递中文参数的问题
2015/08/04 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
python循环输出三角形图案的例子
2019/11/22 Python
Pytorch 实现sobel算子的卷积操作详解
2020/01/10 Python
tensorflow如何继续训练之前保存的模型实例
2020/01/21 Python
基于Python的OCR实现示例
2020/04/03 Python
Tensorflow中的降维函数tf.reduce_*使用总结
2020/04/20 Python
用html5的canvas画布绘制贝塞尔曲线完整代码
2013/08/14 HTML / CSS
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
this关键字的作用
2016/01/30 面试题
管理心得体会
2013/12/28 职场文书
小饰品店的创业计划书范文
2013/12/28 职场文书
创业融资计划书
2014/04/25 职场文书
社区党建工作汇报材料
2014/10/27 职场文书
全国法制宣传日活动总结2014
2014/11/01 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
大学开学感言
2015/08/01 职场文书
查看nginx配置文件路径和资源文件路径的方法
2021/03/31 Servers
雄兵连:第三季先行图公开,天使恶魔联合,银河之力的新力量
2021/06/11 国漫
javascript数组includes、reduce的基本使用
2021/07/02 Javascript
Java中Dijkstra(迪杰斯特拉)算法
2022/05/20 Java/Android