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监听浏览器的问题
Jun 23 Javascript
自用js开发框架小成 学习js的朋友可以看看
Nov 16 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
Dec 18 Javascript
Angular2表单自定义验证器的实现
Oct 19 Javascript
jQuery倒计时代码(超简单)
Feb 27 Javascript
详解vue.js的事件处理器v-on:click
Jun 27 Javascript
Vue Socket.io源码解读
Feb 07 Javascript
Vue一个案例引发的递归组件的使用详解
Nov 15 Javascript
微信小程序实现多选删除列表数据功能示例
Jan 15 Javascript
vue组件传值的实现方式小结【三种方式】
Feb 05 Javascript
原生javascript如何实现共享onload事件
Jul 03 Javascript
vue内置组件keep-alive事件动态缓存实例
Oct 30 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中的日期处理方法集锦
2007/01/02 PHP
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
Session保存到数据库的php类分享
2011/10/24 PHP
PHP中的print_r 与 var_dump 输出数组
2016/06/13 PHP
PHP运用foreach神奇的转换数组(实例讲解)
2018/02/01 PHP
jquery移除button的inline onclick事件(已测试及兼容浏览器)
2013/01/25 Javascript
浅谈Javascript中深复制
2014/12/01 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
2015/08/24 Javascript
详解jquery事件delegate()的使用方法
2016/01/25 Javascript
Bootstrap基本组件学习笔记之分页(12)
2016/12/08 Javascript
基于JavaScript定位当前的地理位置
2017/04/11 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
nodeJS实现路由功能实例代码
2017/06/08 NodeJs
javascript高级模块化require.js的具体使用方法
2017/10/31 Javascript
Node.js npm命令运行node.js脚本的方法
2018/10/10 Javascript
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
jquery实现掷骰子小游戏
2019/10/24 jQuery
Vue.js仿Select下拉框效果
2020/02/18 Javascript
JavaScript实现密码强度实时验证
2020/03/18 Javascript
python使用urllib2提交http post请求的方法
2015/05/26 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
selenium+python环境配置教程详解
2019/05/28 Python
利用CSS3的3D效果制作正方体
2020/03/10 HTML / CSS
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
2014/04/10 HTML / CSS
抽象方法、抽象类怎样声明
2014/10/25 面试题
CSS代码检查工具stylelint的使用方法详解
2021/03/27 HTML / CSS
小小商店教学反思
2014/04/27 职场文书
机电系毕业生求职信
2014/07/11 职场文书
三方股份合作协议书
2014/10/13 职场文书
技术支持岗位职责
2015/02/13 职场文书
2014年底个人工作总结
2015/03/10 职场文书
搞笑婚庆主持词
2015/06/29 职场文书
交流会主持词
2015/07/02 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis
Win11 Beta 预览版 22621.575 和 22622.575更新补丁KB5016694发布(附更新内容大全)
2022/08/14 数码科技