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 删除/替换DOM元素的几种方式
May 20 Javascript
JavaScript数据类型详解
Apr 01 Javascript
jQuery插件jPaginate实现无刷新分页
May 04 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
Jul 27 Javascript
Jquery中attr与prop的区别详解
May 27 jQuery
JavaScript实现图片切换效果
Aug 12 Javascript
微信小程序中setInterval的使用方法
Sep 29 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
Nov 05 Javascript
VueCli3构建TS项目的方法步骤
Nov 07 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
Jan 30 Javascript
vue的路由映射问题及解决方案
Oct 14 Javascript
在vue中动态添加class类进行显示隐藏实例
Nov 09 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
apache2.2.4+mysql5.0.77+php5.2.8安装精简
2009/04/29 PHP
PHP中使用正则表达式提取中文实现笔记
2015/01/20 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
PHP中使用substr()截取字符串出现中文乱码问题该怎么办
2015/10/21 PHP
JavaScript入门教程 Cookies
2009/01/31 Javascript
js实现网站首页图片滚动显示
2013/02/04 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
jQuery中$(function() {});问题详解
2015/08/10 Javascript
js实现的黑背景灰色二级导航菜单效果代码
2015/08/24 Javascript
深入浅析javascript立即执行函数
2015/10/23 Javascript
全面详细的jQuery常见开发技巧手册
2016/02/21 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
原生JavaScript实现Tooltip浮动提示框特效
2017/03/07 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
javascript实现遮罩层动态效果实例
2019/05/14 Javascript
JS严格模式原理与用法实例分析
2020/04/27 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
2020/05/28 Javascript
vue实现图片上传到后台
2020/06/29 Javascript
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
Python使用Django实现博客系统完整版
2020/09/29 Python
python 实现将字典dict、列表list中的中文正常显示方法
2018/07/06 Python
Django命名URL和反向解析URL实现解析
2019/08/09 Python
美国最大的万圣节服装网站:HalloweenCostumes.com
2017/10/12 全球购物
国家助学金获奖感言
2014/01/31 职场文书
校运会入场式解说词
2014/02/10 职场文书
宿舍违规用电检讨书
2014/02/16 职场文书
物流专业自荐信
2014/05/23 职场文书
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
向女朋友道歉的话
2015/01/20 职场文书
小学中队活动总结
2015/05/11 职场文书
2015财务年终工作总结范文
2015/05/22 职场文书
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL
nginx服务器的下载安装与使用详解
2021/08/02 Servers
alibaba seata服务端具体实现
2022/02/24 Java/Android
JavaScript架构搭建前端监控如何采集异常数据
2022/06/25 Javascript