Ajax获取数据

朴灿烈づ我的快乐病毒、 2022-03-16 12:13 225阅读 0赞

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