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 28 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
javascript正则匹配汉字、数字、字母、下划线
Apr 10 Javascript
JS实现文字掉落效果的方法
May 06 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
Nov 11 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
May 09 Javascript
Node 自动化部署的方法
Oct 17 Javascript
基于Vue实现拖拽功能
Jul 29 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
Sep 03 Javascript
基于element-ui组件手动实现单选和上传功能
Dec 06 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
Apr 17 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
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
一个捕获函数输出的函数
2007/02/14 PHP
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
javascript cookie解码函数(兼容ff)
2008/03/17 Javascript
JavaScript 事件对象的实现
2009/07/13 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
2014/09/22 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
2015/10/23 Javascript
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
2016/08/24 Javascript
微信开发 微信授权详解
2016/10/21 Javascript
js生成随机数方法和实例
2017/01/17 Javascript
canvas的神奇用法
2017/02/03 Javascript
基于daterangepicker日历插件使用参数注意的问题
2017/08/10 Javascript
mongoose更新对象的两种方法示例比较
2017/12/19 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
2017/12/22 Javascript
Vue.js递归组件实现组织架构树和选人功能
2019/07/04 Javascript
[47:48]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第三局
2016/02/28 DOTA
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
浅析python中SQLAlchemy排序的一个坑
2017/02/24 Python
Python3.遍历某文件夹提取特定文件名的实例
2018/04/26 Python
python实现两张图片的像素融合
2019/02/23 Python
pyinstaller打包opencv和numpy程序运行错误解决
2019/08/16 Python
python如何使用jt400.jar包代码实例
2019/12/20 Python
俄罗斯香水和化妆品网上商店:NOTINO.ru
2019/12/17 全球购物
WEB控件及HTML服务端控件能否调用客户端方法?如果能,请解释如何调用?
2015/08/25 面试题
什么是三层交换,说说和路由的区别在那里
2014/09/01 面试题
AJAX的优缺点都有什么
2015/08/18 面试题
临床医学专业个人的自我评价
2013/09/27 职场文书
奖学金自我鉴定范文
2013/10/03 职场文书
技术入股合作协议书
2014/10/07 职场文书
2014报到证办理个人委托书
2014/10/08 职场文书
工程进度款催款函
2015/06/24 职场文书
呐喊读书笔记
2015/06/30 职场文书
工作建议书范文
2019/07/08 职场文书
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python