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函数、方法、对象代码
Oct 29 Javascript
JavaScript URL参数读取改进版
Jan 16 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
Jul 02 Javascript
鼠标经过显示二级菜单js特效
Aug 13 Javascript
JQuery实现鼠标滑过显示导航下拉列表
Sep 12 Javascript
调试JavaScript中正则表达式中遇到的问题
Jan 27 Javascript
javascript中sort()的用法实例分析
Jan 30 Javascript
javascript函数式编程实例分析
Apr 25 Javascript
学习JavaScript事件流和事件处理程序
Jan 25 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
Feb 27 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 Javascript
在antd Table中插入可编辑的单元格实例
Oct 28 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
destoon各类调用汇总
2014/06/20 PHP
php实现专业获取网站SEO信息类实例
2015/04/02 PHP
PHP实现文件上传下载实例
2016/10/18 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
浏览器脚本兼容 文本框中,回车键触发事件的兼容
2010/06/21 Javascript
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
2013/12/02 Javascript
JS网页图片按比例自适应缩放实现方法
2014/01/15 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
2014/08/27 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
vue-music关于Player播放器组件详解
2017/11/28 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
js实现带箭头的进度流程
2020/03/26 Javascript
[33:17]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[02:53]2018年度DOTA2最佳战队-完美盛典
2018/12/17 DOTA
深入解析Python小白学习【操作列表】
2019/03/23 Python
在python shell中运行python文件的实现
2019/12/21 Python
Pytorch 多块GPU的使用详解
2019/12/31 Python
Python装饰器如何实现修复过程解析
2020/09/05 Python
Python如何利用Har文件进行遍历指定字典替换提交的数据详解
2020/11/05 Python
纪伊国屋新加坡网上书店:Kinokuniya新加坡
2017/12/29 全球购物
Whittard官方海外旗舰店:英国百年茶叶品牌
2018/02/22 全球购物
Nike香港官网:Nike HK
2019/03/23 全球购物
美国精油公司:Plant Therapy
2019/05/17 全球购物
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
输入N,打印N*N矩阵
2012/02/20 面试题
药品促销活动方案
2014/02/14 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
2015年高三年级组工作总结
2015/07/21 职场文书
使用Python脚本对GiteePages进行一键部署的使用说明
2021/05/27 Python
threejs太阳光与阴影效果实例代码
2022/04/05 Javascript
Mysql中mvcc各场景理解应用
2022/08/05 MySQL