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 相关文章推荐
JQuery AJAX 中文乱码问题解决
Jun 05 Javascript
jquery实现ajax提交form表单的方法总结
Mar 03 Javascript
Jquery焦点与失去焦点示例应用
Jun 10 Javascript
jquery简单实现幻灯片的方法
Aug 03 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
Dec 02 Javascript
原生JS实现拖拽图片效果
Aug 27 Javascript
jQuery Validate插件实现表单验证
Aug 19 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
Dec 18 Javascript
Vuejs 组件——props数据传递的实例代码
Mar 07 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
vue实现在data里引入相对路径
Jun 05 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
一个程序下载的管理程序(一)
2006/10/09 PHP
关于Intype一些小问题的解决办法
2008/03/28 PHP
PHP生成迅雷、快车、旋风等软件的下载链接代码实例
2014/05/12 PHP
Linux系统递归生成目录中文件的md5的方法
2015/06/29 PHP
CI(Codeigniter)的Setting增强配置类实例
2016/01/06 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
php数据序列化测试实例详解
2017/08/12 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
JQUERY的属性选择符和自定义选择符使用方法(二)
2011/04/07 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
2014/06/04 Javascript
nodejs中使用多线程编程的方法实例
2015/03/24 NodeJs
JavaScript Length 属性的总结
2015/11/02 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
浅谈angular.copy() 深拷贝
2017/09/14 Javascript
详解tween.js的使用教程
2017/09/14 Javascript
jquery animate动画持续运动的实例
2017/11/29 jQuery
react-native-video实现视频全屏播放的方法
2018/03/19 Javascript
浅析Vue.js 中的条件渲染指令
2018/11/19 Javascript
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
Vue数据绑定实例写法
2019/08/06 Javascript
浅谈layui里的上传控件问题
2019/09/26 Javascript
[03:55]显微镜下的DOTA2特别篇——430灰烬之灵神级操作
2014/06/24 DOTA
解析Python编程中的包结构
2015/10/25 Python
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
编写多线程Python服务器 最适合基础
2018/09/14 Python
深度辨析Python的eval()与exec()的方法
2019/03/26 Python
Django urls.py重构及参数传递详解
2019/07/23 Python
Pytorch基本变量类型FloatTensor与Variable用法
2020/01/08 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
如何真正的了解python装饰器
2020/08/14 Python
浅谈html5标签css3的常用样式
2016/10/20 HTML / CSS
业务员的岗位职责
2014/03/15 职场文书
平面设计师岗位职责
2014/09/18 职场文书
2016年党员公开承诺书范文
2016/03/24 职场文书
人生感悟经典句子
2019/08/20 职场文书