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 相关文章推荐
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
Sep 11 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
Jan 05 Javascript
学习使用jquery iScroll.js移动端滚动条插件
Mar 24 Javascript
浅谈js中的引用和复制(传值和传址)
Sep 18 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
Nov 28 Javascript
Bootstrap基本样式学习笔记之表单(3)
Dec 07 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 Javascript
AngularJS中下拉框的基本用法示例
Oct 11 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
Sep 07 Javascript
小程序实现层叠卡片滑动效果
Aug 26 Javascript
js实现盒子滚动动画效果
Aug 09 Javascript
vue中配置scss全局变量的步骤
Dec 28 Vue.js
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聊天室技术
2006/10/09 PHP
PHP的Yii框架中使用数据库的配置和SQL操作实例教程
2016/03/17 PHP
PHP打印输出函数汇总
2016/08/28 PHP
ThinkPHP5.0框架控制器继承基类和自定义类示例
2018/05/25 PHP
javascript 页面划词搜索JS
2009/09/28 Javascript
一样的table?不一样的table(可编辑状态table)
2012/09/19 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
2012/12/12 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
2013/04/27 Javascript
Bootstrap3制作图片轮播效果
2016/05/12 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
2016/05/12 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
2017/10/26 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
2018/03/10 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
[02:38]DOTA2亚洲邀请赛 IG战队巡礼
2015/02/03 DOTA
Python根据区号生成手机号码的方法
2015/07/08 Python
在Python中的Django框架中进行字符串翻译
2015/07/27 Python
python实现简易版计算器
2020/06/22 Python
Python unittest单元测试框架总结
2018/09/08 Python
对python3新增的byte类型详解
2018/12/04 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
Python 中的参数传递、返回值、浅拷贝、深拷贝
2019/06/25 Python
基于python+selenium的二次封装的实现
2020/01/06 Python
Python中内建模块collections如何使用
2020/05/27 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
Algenist奥杰尼官网:微藻抗衰老护肤品牌
2017/07/15 全球购物
网上卖盒饭创业计划书
2014/01/26 职场文书
村党支部书记承诺书
2014/05/29 职场文书
大学生考试作弊检讨书1000字
2014/10/14 职场文书
财务总监岗位职责
2015/02/03 职场文书
2016年小学圣诞节活动总结
2016/03/31 职场文书
浅谈如何提高PHP代码质量之端到端集成测试
2021/05/28 PHP