版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/HHH_LLL/article/details/89360374
进入正题
先给各位看一下我的整体结构：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，注意参数前面的空格！若仍然没有解决，点击这里。
结果：
初始页面：
点击后：
| 属性 | 描述 |
|---|---|
| onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
| readyState |  |
| status |  |