前端学习---使用原生AJAX从本地txt文件中获取数据

最新推荐文章于 2021-08-05 14:30:35 发布

原创最新推荐文章于 2021-08-05 14:30:35 发布 · 4.1k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#AJAX #JS

前端学习专栏收录该内容

8 篇文章

订阅专栏

这篇博客介绍了如何使用原生AJAX从本地的TXT文件中读取数据。内容包括HTML和AJAX代码示例，以及在不同浏览器中进行本地测试的注意事项，特别是关于Chrome的限制和解决方案。

进入正题

先给各位看一下我的整体结构：data和js文件夹下分别存放着index.txt待读取文本和编写了ajax的index.js文件

在这里插入图片描述
index.txt文本里的内容：（记得使用UTF-8格式保存，不然可能会显示乱码）

HTML部分代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="container"></div>
	<button type="button" onclick="loadXMLDoc()">点击</button>
	<script src="js/index.js"></script>
</body>
</html>

AJAX部分代码：

function loadXMLDoc(){
	var xmlhttp;
	// 1，建立xmlHttpRequest对象
	if(window.XMLHttpRequest){
		xmlhttp = new XMLHttpRequest();
	}
	else{
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	// 2，设置回调函数
	xmlhttp.onreadystatechange=callback;
	// 3，使用open方法与服务器建立连接
	xmlhttp.open("GET","data/index.txt",true);
	// 4，向服务器端发送数据
	xmlhttp.send();
	// 5，在回调函数中针对不同呃响应状态进行处理
	function callback(){
		if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
		//注意： onreadystatechange 事件被触发 4 次（0 - 4）, 分别是： 0-1、1-2、2-3、3-4，对应着 readyState 的每个变化。
			document.getElementById("container").innerHTML = xmlhttp.responseText;
		}
	}
}

注意：本地file测试不要用谷歌浏览器测试，会出现以下类似错误，建议使用IE或者火狐浏览器测试。


Access to XMLHttpRequest at 'file:///C:/Users/WHL/Desktop/AJAX/data/index.txt' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

因为Chrome禁止本地浏览时加载本地其他文件，可以采用添加启动参数的方式来支持

添加参数为 --allow-file-access-from-files 或者　--disable-web-security，注意参数前面的空格！若仍然没有解决，点击这里。