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 相关文章推荐
QQ登录简单实现代码
Mar 09 Javascript
js小技巧--自动隐藏红叉叉
Aug 13 Javascript
javascript之更有效率的字符串替换
Aug 02 Javascript
jQuery toggle()设置CSS样式
Nov 05 Javascript
有关DOM元素与事件的3个谜题
Nov 11 Javascript
Javascript玩转继承(一)
May 08 Javascript
Javascript中数组方法汇总(推荐)
Apr 01 Javascript
Javascript缓存API
Jun 14 Javascript
详解JavaScript常量定义
Jan 03 Javascript
Vue使用vue-cli创建项目
Sep 01 Javascript
javascript实现简易的计算器
Jan 17 Javascript
jQuery实现穿梭框效果
Jan 19 jQuery
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中设置index.php文件为只读的方法
2013/02/06 PHP
关于PHP递归算法和应用方法介绍
2013/04/15 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
JS+PHP实现用户输入数字后显示最大的值及所在位置
2017/06/19 PHP
tp5.1 框架查询表达式用法详解
2020/05/25 PHP
javascript时间自动刷新实现原理与步骤
2013/01/06 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
2016/08/24 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
2017/05/20 jQuery
详解Webpack-dev-server的proxy用法
2018/09/08 Javascript
[00:33]2016完美“圣”典风云人物:Sccc宣传片
2016/12/03 DOTA
python使用PIL缩放网络图片并保存的方法
2015/04/24 Python
python创建和删除目录的方法
2015/04/29 Python
Python实现的将文件每一列写入列表功能示例【测试可用】
2018/03/19 Python
对python中执行DOS命令的3种方法总结
2018/05/12 Python
Python字符串匹配之6种方法的使用详解
2019/04/08 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
Python 占位符的使用方法详解
2019/07/10 Python
TensorFlow Autodiff自动微分详解
2020/07/06 Python
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
美国波西米亚风格服装品牌:Show Me Your Mumu
2018/01/05 全球购物
英国顶级足球鞋的领先零售商:Lovell Soccer
2019/08/27 全球购物
《千年梦圆在今朝》教学反思
2014/02/24 职场文书
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
质量整改通知单
2015/04/21 职场文书
军训结束新闻稿
2015/07/17 职场文书
生日祝酒词大全
2015/08/10 职场文书
2016年优秀班主任先进事迹材料
2016/02/26 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书
Python如何利用正则表达式爬取网页信息及图片
2021/04/17 Python
python井字棋游戏实现人机对战
2022/04/28 Python
Java异常体系非正常停止和分类
2022/06/14 Java/Android