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 10 Javascript
easyui Draggable组件实现拖动效果
Aug 19 Javascript
Bootstrap Table使用方法详解
Aug 01 Javascript
如何提高Dom访问速度
Jan 05 Javascript
BOM之navigator对象和用户代理检测
Feb 10 Javascript
详解Vue 2.0封装axios笔记
Jun 22 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
原生JS实现列表子元素顺序反转的方法分析
Jul 02 Javascript
js+html5实现手机九宫格密码解锁功能
Jul 30 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
Jun 10 Javascript
Javascript组合继承方法代码实例解析
Apr 02 Javascript
关于JS中的作用域中的问题思考分享
Apr 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
咖啡历史、消费和行业趋势
2021/03/03 咖啡文化
PHPMailer 中文使用说明小结
2010/01/22 PHP
PHP的命令行命令使用指南
2015/08/18 PHP
PHP实现的构造sql语句类实例
2016/02/03 PHP
微信 开发生成带参数的二维码的实例
2016/11/23 PHP
PHP基于GD2函数库实现验证码功能示例
2019/01/27 PHP
一个很酷的拖动层的js类,兼容IE及Firefox
2009/06/23 Javascript
简单常用的幻灯片播放实现代码
2013/09/25 Javascript
ExtJS的拖拽效果示例
2013/12/09 Javascript
javascript实现限制上传文件大小
2015/02/06 Javascript
js用拖动滑块来控制图片大小的方法
2015/02/27 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
2016/08/15 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
2017/07/31 Javascript
JS字符串和数组如何实现相互转化
2020/07/02 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
[00:34]拔城逐梦,热血永恒!2020(秋)完美世界城市挑战赛报名开启
2020/10/09 DOTA
python计算最大优先级队列实例
2013/12/18 Python
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
使用python编写udp协议的ping程序方法
2018/04/22 Python
对python中大文件的导入与导出方法详解
2018/12/28 Python
python3使用matplotlib绘制条形图
2020/03/25 Python
python3实现斐波那契数列(4种方法)
2019/07/15 Python
Python线上环境使用日志的及配置文件
2019/07/28 Python
Jupyter notebook无法导入第三方模块的解决方式
2020/04/15 Python
浅谈keras 模型用于预测时的注意事项
2020/06/27 Python
Python基于template实现字符串替换
2020/11/27 Python
分享全球十款超强HTML5开发工具
2014/05/14 HTML / CSS
StubHub智利:购买和出售您的门票
2016/11/23 全球购物
应届生法律顾问求职信
2013/11/19 职场文书
党员党性分析材料
2014/02/17 职场文书
小学三年级学生评语
2014/04/22 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
幼儿园家长反馈意见
2015/06/03 职场文书
公司欠款证明
2015/06/24 职场文书
参观监狱警示教育心得体会
2016/01/15 职场文书