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 动态添加事件代码
Nov 30 Javascript
asp 取文本框名称代码
Dec 02 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
Oct 23 Javascript
详解JavaScript ES6中的模板字符串
Jul 28 Javascript
jquery+ajax实现注册实时验证实例详解
Dec 08 Javascript
JavaScript动态添加css样式和script标签
Jul 19 Javascript
js基础之DOM中元素对象的属性方法详解
Oct 28 Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 Javascript
前端开发之CSS原理详解
Mar 11 Javascript
JavaScript订单操作小程序完整版
Jun 23 Javascript
可能被忽略的一些JavaScript数组方法细节
Feb 28 Javascript
小程序富文本提取图片可放大缩小
May 26 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实现自动识别Restful API的返回内容类型
2015/02/07 PHP
隐藏Nginx或Apache以及PHP的版本号的方法
2016/01/03 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
Jquery Autocomplete 结合asp.net使用要点
2010/10/29 Javascript
Javascript处理DOM元素事件实现代码
2012/05/23 Javascript
JQuery加载图片自适应固定大小的DIV
2013/09/12 Javascript
封装的jquery翻页滚动(示例代码)
2013/11/18 Javascript
JavaScript利用HTML DOM进行文档操作的方法
2016/03/28 Javascript
JavaScript动态生成二维码图片
2016/04/20 Javascript
jQuery实现摸拟alert提示框
2016/05/22 Javascript
AngularJS指令中的绑定策略实例分析
2016/12/14 Javascript
vue 组件使用中的一些细节点
2018/04/25 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
2019/05/12 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
2020/07/27 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
[47:20]DAC2018 4.4 淘汰赛 Optic vs Mineski 第一场
2018/04/05 DOTA
[01:04:32]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第二场 2月23日
2021/03/11 DOTA
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
python任务调度实例分析
2015/05/19 Python
python 环境变量和import模块导入方法(详解)
2017/07/11 Python
python使用KNN算法手写体识别
2018/02/01 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
Python 中字符串拼接的多种方法
2018/07/30 Python
python 为什么说eval要慎用
2019/03/26 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
Win10下用Anaconda安装TensorFlow(图文教程)
2020/06/18 Python
python正则表达式 匹配反斜杠的操作方法
2020/08/07 Python
苹果Mac升级:MacSales.com
2017/11/20 全球购物
会计系中文个人求职信
2013/12/24 职场文书
名人演讲稿范文
2013/12/28 职场文书
临床医师专业个人自我评价
2014/01/08 职场文书
2014年双拥工作总结
2014/11/21 职场文书
入党积极分子个人总结
2015/03/02 职场文书
试用期旷工辞退通知书
2015/04/17 职场文书
护士长2015年终工作总结
2015/04/24 职场文书
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技