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 插件学习(一)
Aug 06 Javascript
JavaScript中的console.assert()函数介绍
Dec 29 Javascript
常用jQuery选择器汇总
Feb 02 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
Feb 20 Javascript
关于vue.js发布后路径引用的问题解决
Aug 15 Javascript
动态Axios的配置步骤详解
Jan 12 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
May 23 Javascript
微信二次分享报错invalid signature问题及解决方法
Apr 01 Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 Javascript
解决layer图标icon不加载的问题
Sep 04 Javascript
微信小程序常用的3种提示弹窗实现详解
Sep 19 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
Sep 21 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 中的类
2006/10/09 PHP
在PHP里得到前天和昨天的日期的代码
2007/08/16 PHP
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
PHP中数组转换为SimpleXML教程
2019/01/27 PHP
ie和firefox中img对象区别的困惑
2006/12/27 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
2013/07/10 Javascript
document.write()及其输出内容的样式、位置控制
2013/08/12 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
2014/05/04 Javascript
Jquery倒计时源码分享
2014/05/16 Javascript
解析javascript瀑布流原理实现图片滚动加载
2016/03/10 Javascript
jQuery实现简单的tab标签页效果
2016/09/12 Javascript
JavaScript与java语言有什么不同
2016/09/22 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
2016/10/15 Javascript
BootStrap便签页的简单应用
2017/01/06 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
localstorage实现带过期时间的缓存功能
2019/06/28 Javascript
Vue项目中Api的组织和返回数据处理的操作
2019/11/04 Javascript
Python中使用tarfile压缩、解压tar归档文件示例
2015/04/05 Python
python使用matplotlib绘制柱状图教程
2017/02/08 Python
基于python中的TCP及UDP(详解)
2017/11/06 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
Django使用Mysql数据库已经存在的数据表方法
2018/05/27 Python
对python的bytes类型数据split分割切片方法
2018/12/04 Python
Python子类继承父类构造函数详解
2019/02/19 Python
简单了解Python生成器是什么
2019/07/02 Python
Python实现基于SVM的分类器的方法
2019/07/19 Python
python之PyQt按钮右键菜单功能的实现代码
2019/08/17 Python
Python3并发写文件与Python对比
2019/11/20 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
css3动画事件—webkitAnimationEnd与计时器time事件
2013/01/31 HTML / CSS
电气技术员岗位职责
2013/11/19 职场文书
《秋游》教学反思
2014/04/24 职场文书
电工技术比武方案
2014/05/11 职场文书
高考标语大全
2014/06/05 职场文书
教师考核表个人总结
2015/02/12 职场文书
趣味运动会广播稿
2015/08/19 职场文书