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 相关文章推荐
Track Image Loading效果代码分析
Aug 13 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
Jun 24 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
May 29 Javascript
JS中使用sort结合localeCompare实现中文排序实例
Jul 23 Javascript
sso跨域写cookie的一段js脚本(推荐)
May 25 Javascript
Google Maps基础及实例解析
Aug 06 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
Sep 04 Javascript
JS实现自定义状态栏动画文字效果示例
Oct 12 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
Apr 10 Javascript
小程序调用微信支付的方法
Sep 26 Javascript
jquery实现垂直手风琴菜单
Mar 04 jQuery
es6函数之rest参数用法实例分析
Apr 18 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树-不需要递归的实现方法
2016/06/21 PHP
PHP 文件上传后端处理实用技巧方法
2017/01/06 PHP
PHP实现的下载远程文件类定义与用法示例
2017/07/05 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
js实现DIV的一些简单控制
2007/06/04 Javascript
jquery 屏蔽一个区域内的所有元素,禁止输入
2009/10/22 Javascript
jquery中获得$.ajax()事件返回的值并添加事件的方法
2010/04/15 Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
2011/01/12 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
2013/11/25 Javascript
javascript移出节点removeChild()使用介绍
2014/04/03 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
浅谈JavaScript的函数及作用域
2016/12/30 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
Angularjs cookie 操作实例详解
2017/09/27 Javascript
vue实现分页组件
2020/06/16 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
2020/04/27 Javascript
python中使用urllib2伪造HTTP报头的2个方法
2014/07/07 Python
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
Python lambda函数基本用法实例分析
2018/03/16 Python
Python matplotlib通过plt.scatter画空心圆标记出特定的点方法
2018/12/13 Python
Python实现最常见加密方式详解
2019/07/13 Python
在Python中os.fork()产生子进程的例子
2019/08/08 Python
实例讲解CSS3中的box-flex弹性盒属性布局
2016/06/09 HTML / CSS
HTML5 中新的全局属性(整理)
2013/07/31 HTML / CSS
HTML5表单验证特性(知识点小结)
2020/03/10 HTML / CSS
荷兰时尚精品店:Labels Fashion
2020/03/22 全球购物
说一下Linux下有关用户和组管理的命令
2014/08/18 面试题
医院护士求职自荐信格式
2013/09/21 职场文书
网络专业学生个人的自我评价
2013/12/16 职场文书
廉洁使者实施方案
2014/03/29 职场文书
大学生见习总结报告
2015/06/24 职场文书
微信早安问候语
2015/11/10 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书
python实现简单石头剪刀布游戏
2021/10/24 Python