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 相关文章推荐
Array对象方法参考
Oct 03 Javascript
用 Javascript 验证表单(form)中多选框(checkbox)值
Sep 08 Javascript
jQuery Ajax之$.get()方法和$.post()方法
Oct 12 Javascript
Extjs单独定义各组件的实例代码
Jun 25 Javascript
JavaScript中的apply和call函数详解
Jul 20 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
Nov 08 Javascript
jQuery取消特定的click事件
Feb 29 Javascript
Javascript字符串常用方法详解
Jul 21 Javascript
深入理解js中的加载事件
Feb 08 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
Jun 28 Javascript
iSlider手机端图片滑动切换插件使用详解
Dec 24 Javascript
JS实现盒子拖拽效果
Feb 06 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来检测proxy
2006/10/09 PHP
PHP安全防范技巧分享
2011/11/03 PHP
浅析php单例模式
2014/11/25 PHP
PHP实用函数分享之去除多余的0
2015/02/06 PHP
PHP后台微信支付和支付宝支付开发
2017/04/28 PHP
PHP实现的简单排列组合算法应用示例
2017/06/20 PHP
超级退弹代码
2008/07/07 Javascript
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
2009/11/26 Javascript
让IE8支持DOM 2(不用框架!)
2009/12/31 Javascript
Jquery时间验证和转换工具小例子
2013/07/01 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
jquery浏览器滚动加载技术实现方案
2014/06/03 Javascript
Visual Studio中js调试的方法图解
2014/06/30 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
微信小程序支付前端源码
2018/08/29 Javascript
vue多层嵌套路由实例分析
2019/03/19 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
python实现颜色空间转换程序(Tkinter)
2015/12/31 Python
Android应用开发中Action bar编写的入门教程
2016/02/26 Python
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
python如何从文件读取数据及解析
2019/09/19 Python
解决Jupyter notebook中.py与.ipynb文件的import问题
2020/04/21 Python
用python 绘制茎叶图和复合饼图
2021/02/26 Python
Oroton中国官网:澳洲知名奢侈配饰品牌
2017/03/26 全球购物
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
会计找工作求职信范文
2013/12/09 职场文书
教职工代表大会主持词
2014/04/01 职场文书
高中生评语大全
2014/04/25 职场文书
综治目标管理责任书
2015/05/11 职场文书
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL