1 首先引入Ajax的封装包(ajax.js需要自己写)
<script type="text/javascript" src="Ajax.js"></script>
/**
* Ajax 封装包
* Created by LL on 2019-02-27.
*/
//url:读取的文件路径
// fnSucc:读取成功操作
// fnFaild:读取失败返回状态码
function Ajax(url,fnSucc,fnFaild) {
//1 创建Ajax对象
//在ie6下没有XMLHttpRequest这个属性,因此XMLHttpRequest属于未定义,需要用window.XMLHttpRequest
if (window.XMLHttpRequest) {
var oAjax = new XMLHttpRequest();
} else {
//IE6
var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
//2 连接服务器
//open(方法,文件名,异步传输)
oAjax.open('GET', url, true);
//3 发送请求
oAjax.send();
//4 从服务器接收返回
oAjax.onreadystatechange = function () {
/*readyState属性:请求状态(表示浏览器和服务器,进行到哪一步了)
*0 (未初始化)还没有调用open()方法
*1 (载入)已调用send()方法,正在发送请求
*2 (载入完成)send()方法完成,已收到全部响应内容
*3 (解析)正在解析响应内容
*4 (完成)响应内容解析完成,可以在客户端调用了
* */
if (oAjax.readyState == 4) {//读取完成(不知道是否成功)
if (oAjax.status == 200) {//成功
fnSucc(oAjax.responseText);
} else {
if(fnFaild)
{
fnFaild(oAjax.status);
}
}
}
}
}
2 将data.txt文件部署到本地web服务器上
data.txt内容:
[{user: 'blue', pass: '123456'},{user: '张三', pass: '654321'},{user: '李四', pass: '789456'},{user: '王五', pass: '7777'}]
3 读取数据
ajax('data.txt?t='+new Date().getTime(), function (str){
//String 数据直接读
//eval将一个语句的内容解析成js可识别的内容,在这里eval出来就是一个数组
var arr=eval(str);
for(var i=0;i<arr.length;i++)
{
var oLi=document.createElement('li');
oLi.innerHTML='用户名:<strong>'+arr[i].user+'</strong>密码:<span>'+arr[i].pass+'</span>';
oUl.appendChild(oLi);