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 相关文章推荐
ASP 过滤数组重复数据函数(加强版)
May 31 Javascript
如何使用jquery动态加载js,css文件实现代码
Apr 03 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 Javascript
js获取当前页面路径示例讲解
Jan 08 Javascript
javascript实现依次输入input自动定焦
Dec 23 Javascript
js使用心得分享
Jan 13 Javascript
javascript实时显示当天日期的方法
May 20 Javascript
Webpack实现按需打包Lodash的几种方法详解
May 08 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 Javascript
使用pm2部署node生产环境的方法步骤
Mar 09 Javascript
Vue3 中的数据侦测的实现
Oct 09 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
Jan 07 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错误、异常处理机制(补充)
2012/05/07 PHP
解析php中call_user_func_array的作用
2013/06/07 PHP
php设置session值和cookies的学习示例
2014/03/21 PHP
php启用sphinx全文搜索的实现方法
2014/12/24 PHP
PHP实现动态web服务器方法
2015/07/29 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
php实现的中文分词类完整实例
2017/02/06 PHP
PHP实现图的邻接矩阵表示及几种简单遍历算法分析
2017/11/24 PHP
JavaScript中的Array对象使用说明
2011/01/17 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
sails框架的学习指南
2014/12/22 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
JS使用post提交的两种方式
2015/12/03 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
2016/01/04 Javascript
Node.js 数据加密传输浅析
2016/11/16 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
Python使用Socket(Https)Post登录百度的实现代码
2012/05/18 Python
Python+django实现文件上传
2016/01/17 Python
利用Python循环(包括while&amp;for)各种打印九九乘法表的实例
2017/11/06 Python
如何使用Python的Requests包实现模拟登陆
2018/04/27 Python
python GUI实现小球满屏乱跑效果
2019/05/09 Python
简单了解Python生成器是什么
2019/07/02 Python
Django项目后台不挂断运行的方法
2019/08/31 Python
通过HTML5规范搞定i、em、b、strong元素的区别
2017/03/04 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
Dyson加拿大官方网站:购买戴森吸尘器,风扇,冷热器及配件
2016/10/26 全球购物
写自荐信要注意什么
2013/12/26 职场文书
20岁生日感言
2014/01/13 职场文书
师德学习感言
2014/01/31 职场文书
分公司总经理岗位职责
2014/07/30 职场文书
副主任竞聘演讲稿
2014/08/18 职场文书
道德与公民自我评价
2015/03/09 职场文书
2016春季幼儿园大班开学寄语
2015/12/03 职场文书
Win11怎么解除儿童账号限制?Win11解除微软儿童账号限制方法
2022/07/07 数码科技