LOFTER-网易轻博

第一种：原生Js代码

 <script>

        let xhr = new XMLHttpRequest;

        xhr.open("get", "../server/02.getData.php", true);

        xhr.send();

        xhr.onreadystatechange = function() {

            if (xhr.readyState == 4) {

                if (xhr.status == 200) {

                    // console.log(`成功` + xhr.responseText);

                    var data = JSON.parse(xhr.responseText);

                    let manager = new Manager(data);

                    manager.init();

                } else {

                    console.log(`失败` + xhr.statusText);

                }

            }

        }

    </script>

---

<script>

(function(){

let xhr=new XMLHttpRequest;

xhr.open("get","https://127.0.0.1/code/day-23/test/server/03.data.php",true);

xhr.send();

xhr.onload=function(){

    if(xhr.status == 200){

        /* 解析服务器返回的JSON数据 */

        let data = JSON.parse(xhr.responseText);

        /* 根据得到的JSON数据来渲染UI界面 */

        console.log(data);

    }

}

})();

</script>

---

利用jquery框架

<script src="jquery-3.4.1.js"></script>

<script>

    $("#btn").click(function (event) {

        //利用事件委托为按钮添加点击事件

        event = event || window.event;

        /* 事件对象的兼容处理 */

        let ele = event.target || event.srcElement;

        

        let val = ele.getAttribute("name");

        let xhr = new XMLHttpRequest;

        xhr.open("get","https://127.0.0.1/code/day-24/test/server/02.json.php?type="+val,true);

        xhr.send();

        xhr.onload=function(){

            if(xhr.status == 200){

                /* 解析服务器返回的JSON数据 */

                let data = JSON.parse(xhr.responseText);

                 /* 根据得到的JSON数据来渲染UI界面 */

                 

                 $("h3").text(data.title);

                 $("h4").text(data.des);

                 $("img").attr("src", data.src);

                 

            }

        }

    })

</script>