Ajax获取数据

1 首先引入Ajax的封装包（ajax.js需要自己写）

/**
 *   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);

猜你喜欢