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之dhDataGrid Ver2.0.0代码
Jul 01 Javascript
Jquery 扩展方法
May 06 Javascript
js页面跳转常用的几种方式
Nov 25 Javascript
jquery实现省市select下拉框的替换(示例代码)
Feb 22 Javascript
node.js中的buffer.toString方法使用说明
Dec 14 Javascript
基于Node的React图片上传组件实现实例代码
May 10 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
微信小程序开发之tabbar图标和颜色的实现
Oct 17 Javascript
详解javascript 变量提升(Hoisting)
Mar 12 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
Jun 24 Javascript
Angular6项目打包优化的实现方法
Dec 15 Javascript
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
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将字符串全部转换成大写或者小写的方法
2015/03/17 PHP
看了就知道什么是JSON
2007/12/09 Javascript
Javascript倒计时页面跳转实例小结
2013/09/11 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
2016/09/14 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
2017/02/16 Javascript
基于Angular.js实现的触摸滑动动画实例代码
2017/02/19 Javascript
ES6教程之for循环和Map,Set用法分析
2017/04/10 Javascript
详解如何让Express支持async/await
2017/10/09 Javascript
nodejs调取微信收货地址的方法
2017/12/20 NodeJs
angularjs使用gulp-uglify压缩后执行报错的解决方法
2018/03/07 Javascript
ng-alain表单使用方式详解
2018/07/10 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
2019/09/28 Javascript
vant实现购物车功能
2020/06/29 Javascript
详解js中的几种常用设计模式
2020/07/16 Javascript
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python中的对象,方法,类,实例,函数用法分析
2015/01/15 Python
Python3实现Web网页图片下载
2016/01/28 Python
python如何在终端里面显示一张图片
2016/08/17 Python
python requests 使用快速入门
2017/08/31 Python
Python 保存矩阵为Excel的实现方法
2019/01/28 Python
Pandas之排序函数sort_values()的实现
2019/07/09 Python
CSS3教程:新增加的结构伪类
2009/04/02 HTML / CSS
乌克兰时尚鞋子和衣服购物网站:Born2be
2018/05/24 全球购物
亚马逊海外购:亚马逊美国、英国、日本、德国直邮
2021/03/18 全球购物
奠基仪式主持词
2014/03/20 职场文书
环保标语大全
2014/06/12 职场文书
个人合伙协议书范本
2014/10/14 职场文书
2015年南京大屠杀纪念日活动总结
2015/03/24 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书
交通安全月活动总结
2015/05/08 职场文书
团结主题班会
2015/08/13 职场文书
2016党员三严三实心得体会
2016/01/15 职场文书
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android