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 相关文章推荐
JQuery CSS样式控制 学习笔记
Jul 23 Javascript
2010年最佳jQuery插件整理
Dec 06 Javascript
jQuery对html元素取值与赋值的方法
Nov 20 Javascript
jquery checkbox实现单选小例
Nov 27 Javascript
javascript页面加载完执行事件代码
Feb 11 Javascript
jquery实现可拖拽弹出层特效
Jan 04 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 Javascript
不想让浏览器运行javascript脚本的方法
Nov 20 Javascript
vue 打包后的文件部署到express服务器上的方法
Aug 09 Javascript
详解Vue中localstorage和sessionstorage的使用
Dec 22 Javascript
vue中使用props传值的方法
May 08 Javascript
详解如何提升JSON.stringify()的性能
Jun 12 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
国产动画《伍六七》原声大碟大卖,啊哈娱乐引领音乐赋能IP的新尝试
2020/03/08 国漫
php数组函数序列之each() - 获取数组当前内部指针所指向元素的键名和键值,并将指针移到下一位
2011/10/31 PHP
php抓取页面的几种方法详解
2013/06/17 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
jquery之empty()与remove()区别说明
2010/09/10 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
2013/01/11 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
2014/04/16 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
详解jQuery的Cookie插件
2016/11/23 Javascript
node.js实现回调的方法示例
2017/03/01 Javascript
VUE重点问题总结
2018/03/19 Javascript
webpack 3.X学习之多页面打包的方法
2018/09/04 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
2020/02/06 Javascript
python实现通过shelve修改对象实例
2014/09/26 Python
python对象及面向对象技术详解
2016/07/19 Python
深入理解 Python 中的多线程 新手必看
2016/11/20 Python
Python 判断是否为质数或素数的实例
2017/10/30 Python
Python制作exe文件简单流程
2019/01/24 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
Python基于当前时间批量创建文件
2020/05/07 Python
详解Django中异步任务之django-celery
2020/11/05 Python
HTML5 Canvas API中drawImage()方法的使用实例
2016/03/25 HTML / CSS
html5用video标签流式加载的实现
2020/05/20 HTML / CSS
Puccini乌克兰:购买行李箱、女士手袋网上商店
2020/08/06 全球购物
运动会方阵解说词
2014/02/12 职场文书
异地年检委托书范本
2014/09/24 职场文书
工作失职造成投诉的检讨书范文
2014/10/05 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
死亡证明书样本说明
2014/10/18 职场文书
施工员岗位职责
2015/02/10 职场文书
2015年高校教师个人工作总结
2015/05/25 职场文书
开学典礼校长致辞
2015/07/29 职场文书
tensorflow+k-means聚类简单实现猫狗图像分类的方法
2021/04/28 Python
PHP获取学生成绩的方法
2021/11/17 PHP
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers