32.ajax数据读取和绑定

Posted 2020-11-01 Z-DL

 

 

    <script>
        var oTab = document.getElementById("tab")
        var tHead = oTab.tHead;
        var oThs = tHead.rows[0].cells
        var tBody = oTab.tBodies[0];
        var oRows = tBody.rows;
        var data = null;
        //Ajax(async javascript and xml)
        // 1)首先创建一个ajax对象
        var xhr = new XMLHttpRequest;
        // 2)打开我们需要请求数据的那个文件地址
        xhr.open("get","data.text",true);//参数一：请求方式，参数二：接口，参数三：true为异步请求
        // 3)监听请求状态
        xhr.onreadystatechange = function () {
            if(xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)){
                var val = xhr.responseText // val就是请求到的数据
                data = JSON.parse(val) //得到的是json格式的字符串，需要转成json格式的对象
            }
        }
        // 4)发送请求
        xhr.send(null);
    </script>

 

<table id="tab">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>武力</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <tr>张三</tr>
            <tr>25</tr>
            <tr>88</tr>
            <tr>男</tr>
        </tbody>
    </table>