JavaScript调用ajax获取文本文件内容实现代码
更新时间：2014年03月28日 14:45:47 作者：
这篇文章主要介绍了JavaScript调用ajax获取文本文件内容的方法,需要的朋友可以参考下
这几年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>
演示效果：
复制代码 代码如下:
<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的一等对象，想要学好javascript，就必须深刻理解函数。本文对javascript函数参数与闭包进行详细分析介绍。需要的朋友一起来看下吧2016-12-12
本篇文章主要是对js中的select option对象进行了总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要介绍了js表达式与运算符简单操作,结合实例形式分析了JavaScript表达式与运算符的基本算数运算、逻辑运算、比较运算等相关操作技巧,需要的朋友可以参考下2020-02-02
这篇文章主要介绍了Javascript中的对象和继承，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
在 JavaScript 编程中,我们经常需要对不同类型的变量进行判断和处理,其中,判断一个变量是否是数组是一项基本且常见的任务,在本篇博客中,我们将介绍几种常用的方式来判断一个变量是否是数组,并探讨它们的优缺点以及适用场景,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了简单谈谈javascript中的变量、作用域和内存问题的相关资料,需要的朋友可以参考下2015-08-08
JavaScript中实现数组的排序、乱序和搜索，其实所有这些功能，用一个sort()就可以完成了2011-11-11
这篇文章主要介绍了javascript实现前端成语点击验证优化，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
js中AppendChild与insertBefore的用法详细解析
这篇文章主要是对js中AppendChild与insertBefore的用法进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
TypeScript 是一种由微软开发的开源、跨平台的编程语言。它是 JavaScript 的超集，最终会被编译为 JavaScript 代码，关于TypeScript的安装、使用、自动编译很多朋友不是很清楚，今天抽空给大家普及下，感兴趣的朋友一起看看吧2021-06-06
最新评论