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 相关文章推荐
jQuery之选择组件的深入解析
Jun 19 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
Jul 17 Javascript
实用框架(iframe)操作代码
Oct 23 Javascript
自制微信公众号一键排版工具
Sep 22 Javascript
jQuery实现立体式数字动态增加(animate方法)
Dec 21 Javascript
浅谈javascript的闭包
Jan 23 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
Apr 10 Javascript
BootStrap selectpicker后台动态绑定数据的方法
Jul 28 Javascript
微信小程序数字滚动插件使用详解
Feb 02 Javascript
微信小程序与公众号卡券/会员打通的问题
Jul 25 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
Aug 20 Javascript
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
Apr 03 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 字符串加密函数(在指定时间内加密还原字符串,超时无法还原)
2010/04/28 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
jquery $.getJSON()跨域请求
2011/12/21 Javascript
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
AngularJS数据源的多种获取方式汇总
2016/02/02 Javascript
基于jquery实现简单的分页控件
2016/03/17 Javascript
DIV+CSS+jQ实现省市联动可扩展
2016/06/22 Javascript
JS打印组合功能
2016/08/04 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
2018/04/10 Javascript
JavaScript定时器设置、使用与倒计时案例详解
2019/07/08 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
2020/07/17 Javascript
Python的Twisted框架中使用Deferred对象来管理回调函数
2016/05/25 Python
Python实现JSON反序列化类对象的示例
2018/01/31 Python
Python OpenCV 使用滑动条来调整函数参数的方法
2019/07/08 Python
python实现一行输入多个值和一行输出多个值的例子
2019/07/16 Python
python递归法实现简易连连看小游戏
2020/03/25 Python
python线程信号量semaphore使用解析
2019/11/30 Python
Python实现word2Vec model过程解析
2019/12/16 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
Python爬虫获取页面所有URL链接过程详解
2020/06/04 Python
使用Dajngo 通过代码添加xadmin用户和权限(组)
2020/07/03 Python
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
Clarks鞋澳大利亚官方网站:Clarks Australia
2019/12/25 全球购物
临床医学专业个人的自我评价
2013/09/27 职场文书
英语翻译系毕业生求职信
2013/09/29 职场文书
秋季运动会通讯稿
2014/01/24 职场文书
大学生社团活动总结
2014/04/26 职场文书
节水口号标语
2014/06/19 职场文书
课外小组活动总结
2014/08/27 职场文书
弘扬焦裕禄精神走群众路线思想汇报
2014/09/12 职场文书
党支部三会一课计划
2014/09/24 职场文书
群众路线专项整治方案
2014/10/27 职场文书
第二批党的群众路线教育实践活动总结报告
2014/10/30 职场文书
新员工试用期工作总结2015
2015/05/28 职场文书
Python数据分析之绘图和可视化详解
2021/06/02 Python