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 相关文章推荐
js实现DIV的一些简单控制
Jun 04 Javascript
JavaScript XML实现两级级联下拉列表
Nov 10 Javascript
js获取当前地址 JS获取当前URL的示例代码
Feb 26 Javascript
jquery图形密码实现方法
Mar 11 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
Aug 10 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
Mar 08 Javascript
AngulaJS路由 ui-router 传参实例
Apr 28 Javascript
JS使用贪心算法解决找零问题示例
Nov 27 Javascript
react-navigation之动态修改title的内容
Sep 26 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
Oct 24 Javascript
JavaScript计算正方形面积
Nov 26 Javascript
js实现自动锁屏功能
Jun 02 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
新闻分类录入、显示系统
2006/10/09 PHP
PHP日期时间函数的高级应用技巧
2009/05/16 PHP
php 连接mysql连接被重置的解决方法
2011/02/15 PHP
php常用数学函数汇总
2014/11/21 PHP
常见php数据文件缓存类汇总
2014/12/05 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
JS跨域代码片段
2012/08/30 Javascript
cookie的secure属性详解
2015/04/08 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
jQuery右下角旋转环状菜单特效代码
2015/08/10 Javascript
快速学习JavaScript的6个思维技巧
2015/10/13 Javascript
js实现滚动条滚动到页面底部继续加载
2015/12/19 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
2017/02/28 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
前端构建工具之gulp的配置与搭建详解
2017/06/12 Javascript
vue-resource调用promise取数据方式详解
2017/07/21 Javascript
webpack3+React 的配置全解
2017/08/21 Javascript
vue计算属性和监听器实例解析
2018/05/10 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
解决vue 项目引入字体图标报错、不显示等问题
2018/09/01 Javascript
vue微信分享的实现(在当前页面分享其他页面)
2019/04/16 Javascript
Jquery如何使用animation动画效果改变背景色的代码
2020/07/20 jQuery
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
pywinauto自动化操作记事本
2019/08/26 Python
python计算导数并绘图的实例
2020/02/29 Python
Python中BeautifulSoup通过查找Id获取元素信息
2020/12/07 Python
详解Open Folder as PyCharm Project怎么添加的方法
2020/12/29 Python
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
介绍Java的内部类
2012/10/27 面试题
如何向接受结构参数的函数传入常数值
2016/02/17 面试题
公司员工的自我评价范例
2013/11/01 职场文书
设计师个人求职信范文
2014/02/02 职场文书
酒店员工职业生涯规划
2014/02/25 职场文书
商务邀请函
2015/01/30 职场文书
人为什么会“幸灾乐祸”?
2019/08/06 职场文书
「魔法少女伊莉雅」美游粘土人开订
2022/03/21 日漫