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使用prototype定义对象类型
Feb 07 Javascript
用html+css+js实现的一个简单的图片切换特效
May 28 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
Mar 04 Javascript
javascript实现简单的二级联动
Mar 19 Javascript
JS获取Table中td值的方法
Mar 19 Javascript
vue的props实现子组件随父组件一起变化
Oct 27 Javascript
基于Node.js的WebSocket通信实现
Mar 11 Javascript
Angular项目中$scope.$apply()方法的使用详解
Jul 26 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
Jul 28 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
Oct 20 Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
Apr 28 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利用Mysql锁解决高并发的方法
2018/09/04 PHP
laravel 中某一字段自增、自减的例子
2019/10/11 PHP
Js event事件在IE、FF兼容性问题
2011/01/01 Javascript
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
asp.net中System.Timers.Timer的使用方法
2013/03/20 Javascript
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
基于jquery实现左右按钮点击的图片切换效果
2021/01/27 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
2015/11/19 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
webpack3之loader全解析
2017/10/26 Javascript
nodejs+mongodb+vue前后台配置ueditor的示例代码
2018/01/02 NodeJs
python中__call__内置函数用法实例
2015/06/04 Python
Python计算斗牛游戏概率算法实例分析
2017/09/26 Python
Python线程同步的实现代码
2018/10/03 Python
Python用字典构建多级菜单功能
2019/07/11 Python
使用python+whoosh实现全文检索
2019/12/09 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
详解Python设计模式之策略模式
2020/06/15 Python
图解Python中深浅copy(通俗易懂)
2020/09/03 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
四方通行旅游网:台湾订房、出国旅游
2017/09/20 全球购物
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
服务之星获奖感言
2014/01/21 职场文书
幼儿园父亲节活动方案
2014/03/11 职场文书
环保建议书200字
2014/05/14 职场文书
教师党员个人整改措施材料
2014/09/16 职场文书
2019森林防火宣传标语大全!
2019/07/03 职场文书
100句拼搏进取的名言警句,值得一读!
2019/10/07 职场文书
MySQL安装后默认自带数据库的作用详解
2021/04/27 MySQL
QT与javascript交互数据的实现
2021/05/26 Javascript
Oracle 死锁的检测查询及处理
2021/09/25 Oracle
Mysql 一主多从的部署
2022/05/20 MySQL