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 相关文章推荐
FF IE兼容性的修改小结
Sep 02 Javascript
调试Node.JS的辅助工具(NodeWatcher)
Jan 04 Javascript
JQuery选择器绑定事件及修改内容的方法
Jan 23 Javascript
jQuery toggle 代替方法
Mar 22 Javascript
老生常谈js动态添加事件--- 事件委托
Jul 19 Javascript
jquery+Jscex打造游戏力度条
Sep 12 Javascript
Bootstarp基本模版学习教程
Feb 01 Javascript
vue.js实现单选框、复选框和下拉框示例
Jul 18 Javascript
angular4模块中给标签添加背景图的实现方法
Sep 15 Javascript
vue实现可视化可拖放的自定义表单的示例代码
Mar 20 Javascript
Layui表格行工具事件与数据回填方法
Sep 13 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
Jun 24 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 session 错误
2009/05/21 PHP
PHP CKEditor 上传图片实现代码
2009/11/06 PHP
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
Windows中使用计划任务自动执行PHP程序实例
2014/05/09 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
2013/05/27 Javascript
jQuery移除元素自动解绑事件实现思路及代码
2014/05/31 Javascript
jquery对复选框(checkbox)的操作汇总
2016/01/13 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
vue子组件使用自定义事件向父组件传递数据
2017/05/27 Javascript
JavaScript设计模式之策略模式详解
2017/06/09 Javascript
详解vue渲染函数render的使用
2017/12/12 Javascript
微信小程序文章列表功能完整实例
2020/06/03 Javascript
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
详解Vue2的diff算法
2021/01/06 Vue.js
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
[01:00:12]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第一场
2018/04/09 DOTA
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
Python里disconnect UDP套接字的方法
2015/04/23 Python
Python在图片中添加文字的两种方法
2017/04/29 Python
python实现寻找最长回文子序列的方法
2018/06/02 Python
python算法与数据结构之单链表的实现代码
2019/06/27 Python
python进程间通信Queue工作过程详解
2019/11/01 Python
Python日志处理模块logging用法解析
2020/05/19 Python
运行Python编写的程序方法实例
2020/10/21 Python
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
《长城》教学反思
2014/02/14 职场文书
群众路线批评与自我批评发言稿
2014/10/16 职场文书
社区学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
毕业生个人总结
2015/02/28 职场文书
2015年会计个人工作总结
2015/04/02 职场文书
2015年学校办公室主任工作总结
2015/07/20 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书
Redis如何一键部署脚本
2021/04/12 Redis
CPU不支持Windows11系统怎么办
2021/11/21 数码科技