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 日期计算算法
Sep 11 Javascript
基于jQuery的history历史记录插件
Dec 11 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
Aug 01 Javascript
Three.js学习之网格
Aug 10 Javascript
Vue键盘事件用法总结
Apr 18 Javascript
react-router4 嵌套路由的使用方法
Jul 24 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
Sep 19 Javascript
详解vue-loader在项目中是如何配置的
Jun 04 Javascript
微信小程序websocket聊天室的实现示例代码
Feb 12 Javascript
12个提高JavaScript技能的概念(小结)
May 09 Javascript
JavaScript this在函数中的指向及实例详解
Oct 14 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
Aug 19 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
windows下配置php5.5开发环境及开发扩展
2014/12/25 PHP
PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
2016/05/06 PHP
传智播客学习之java 反射
2009/11/22 Javascript
js 屏蔽鼠标右键脚本附破解方法
2009/12/03 Javascript
jQuery LigerUI 使用教程入门篇
2012/01/18 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
仿新浪微博登陆邮箱提示效果的js代码
2013/08/02 Javascript
javaScript如何处理从java后台返回的list
2014/04/24 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
2014/06/20 Javascript
javascript从定义到执行 你不知道的那些事
2016/01/04 Javascript
JS实现iframe自适应高度的方法示例
2017/01/07 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
详解Eslint 配置及规则说明
2018/09/10 Javascript
详解angular2.x创建项目入门指令
2018/10/11 Javascript
JS实现图片拖拽交换效果
2018/11/30 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
2020/05/31 Javascript
python计算圆周长、面积、球体体积并画出圆
2014/04/08 Python
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
Python学习笔记之os模块使用总结
2014/11/03 Python
Python MySQLdb Linux下安装笔记
2015/05/09 Python
CentOS6.5设置Django开发环境
2016/10/13 Python
纯python实现机器学习之kNN算法示例
2018/03/01 Python
Django ModelForm组件使用方法详解
2019/07/23 Python
pytorch实现Tensor变量之间的转换
2020/02/17 Python
python如何实时获取tcpdump输出
2020/09/16 Python
前端面试必备之CSS3的新特性
2017/09/05 HTML / CSS
儿科护士自我鉴定
2013/10/14 职场文书
市场营销毕业生自荐信
2013/11/23 职场文书
幼教简历自我评价
2014/01/28 职场文书
幽默自我介绍演讲稿
2014/08/21 职场文书
家庭贫困证明范本(经典版)
2014/09/22 职场文书
先进学校事迹材料
2014/12/30 职场文书
嘉宾邀请函
2015/01/31 职场文书
python如何正确使用yield
2021/05/21 Python
大型强子对撞机再次重启探索“第五种自然力”
2022/04/29 数码科技
Win10多屏显示如何设置?Win10电脑多屏显示设置操作方法
2022/07/07 数码科技