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去除字符串左右两端的空格
Feb 05 Javascript
JS给超链接加确认对话框的方法
Feb 24 Javascript
avalon js实现仿微博拖动图片排序
Aug 14 Javascript
Javascript的表单与验证-非空验证
Mar 18 Javascript
xtemplate node.js 的使用方法实例解析
Aug 22 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
Nov 09 Javascript
AngularJS路由实现页面跳转实例
Mar 03 Javascript
JS中mouseup事件丢失的原因与解决办法
Jun 14 Javascript
微信小程序支付及退款流程详解
Nov 30 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
Jul 18 Javascript
Iview Table组件中各种组件扩展的使用
Oct 20 Javascript
JS实现吸顶特效
Jan 08 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读取TXT文件向数据库导入海量数据的方法
2013/04/23 PHP
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
在win7中搭建Linux+PHP 开发环境
2014/10/08 PHP
JS+PHP实现用户输入数字后显示最大的值及所在位置
2017/06/19 PHP
BOOM vs RR BO5 第一场 2.14
2021/03/10 DOTA
javascript FormatNumber函数实现方法
2008/12/30 Javascript
Javascript 中的类和闭包
2010/01/08 Javascript
常用Extjs工具:Extjs.util.Format使用方法
2012/03/22 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
JS防止用户多次提交的简单代码
2013/08/01 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
浅谈javascript原型链与继承
2015/07/13 Javascript
js轮播图代码分享
2016/07/14 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
2018/09/07 jQuery
vue实现点击按钮下载文件功能
2019/10/11 Javascript
python实现dict版图遍历示例
2014/02/19 Python
Python 列表list使用介绍
2014/11/30 Python
详解Python的Django框架中Manager方法的使用
2015/07/21 Python
解析Python中的生成器及其与迭代器的差异
2016/06/20 Python
详解Python计算机视觉 图像扭曲(仿射扭曲)
2019/03/27 Python
python3+PyQt5 创建多线程网络应用-TCP客户端和TCP服务器实例
2019/06/17 Python
Django的models中on_delete参数详解
2019/07/16 Python
Python定时任务APScheduler的实例实例详解
2019/07/22 Python
vim自动补全插件YouCompleteMe(YCM)安装过程解析
2019/10/21 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
基于python实现可视化生成二维码工具
2020/07/08 Python
实习医生自我评价
2013/09/22 职场文书
青年创业培训欢迎词
2014/01/10 职场文书
销售员岗位职责范本
2014/02/03 职场文书
资金主管岗位职责范本
2014/03/04 职场文书
2014两会学习心得:榜样精神伴我行
2014/03/17 职场文书
中秋寄语大全
2014/04/11 职场文书
三八红旗手事迹材料
2014/12/26 职场文书
Go语言实现Snowflake雪花算法
2021/06/08 Golang