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 相关文章推荐
不用ajax实现点击文字即可编辑的方法
Dec 16 Javascript
JavaScript中的View-Model使用介绍
Aug 11 Javascript
css值转换成数值请抛弃parseInt
Oct 24 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
Jul 21 Javascript
jquery模拟进度条实现方法
Aug 03 Javascript
Function.prototype.apply()与Function.prototype.call()小结
Apr 27 Javascript
jQuery中的一些常见方法小结(推荐)
Jun 13 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
Jul 01 Javascript
js仿百度切换皮肤功能(html+css)
Jul 10 Javascript
微信小程序 条件渲染详解
Oct 09 Javascript
Vue声明式渲染详解
May 17 Javascript
Vue响应式原理Observer、Dep、Watcher理解
Jun 06 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
Yii操作数据库的3种方法
2014/03/11 PHP
php去除字符串中空字符的常用方法小结
2015/03/17 PHP
JQUERY对单选框(radio)操作的小例子
2013/04/25 Javascript
javascript自动给文本url地址增加链接的方法分享
2014/01/20 Javascript
jQuery中position()方法用法实例
2015/01/16 Javascript
有关Promises异步问题详解
2015/11/13 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
浅谈JavaScript中promise的使用
2017/01/11 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
2017/03/19 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
JS实现简易留言板增删功能
2020/02/08 Javascript
从零使用TypeScript开发项目打包发布到npm
2020/02/14 Javascript
Python实现图像几何变换
2015/07/06 Python
Android应用开发中Action bar编写的入门教程
2016/02/26 Python
Python基于opencv实现的简单画板功能示例
2019/03/04 Python
django删除表重建的实现方法
2019/08/28 Python
Windows+Anaconda3+PyTorch+PyCharm的安装教程图文详解
2020/04/03 Python
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
2018/07/02 HTML / CSS
html5的websockets全双工通信详解学习示例
2014/02/26 HTML / CSS
CheapTickets泰国:廉价航班,查看促销价格并预订机票
2019/12/28 全球购物
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
如何将一个描述日期或日期/时间的字符串转换为一个Date对象
2015/10/13 面试题
绿色环保标语
2014/06/12 职场文书
汽车服务工程专业自荐信
2014/09/02 职场文书
师德师风自我评价范文
2014/09/11 职场文书
超市开店计划书
2014/09/15 职场文书
2014年房地产工作总结范文
2014/11/19 职场文书
2014年教务处工作总结
2014/12/03 职场文书
小班上学期个人总结
2015/02/12 职场文书
民事申诉状范本
2015/05/20 职场文书
仓库管理制度范本
2015/08/04 职场文书
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers