ajax的使用以及封装

看见代码就要慌

已于 2023-03-27 17:52:47 修改

阅读量150

点赞数

文章标签： ajax javascript 前端

于 2023-03-27 17:50:10 首次发布

本文链接：https://blog.csdn.net/m0_53910290/article/details/129800275

版权

文章介绍了如何使用AJAX进行GET请求，包括创建XMLHttpRequest对象、发送请求以及处理响应。同时，展示了如何将JSON格式的响应数据解析为JavaScript对象，并进行了AJAX请求的封装，以供后续调用。在示例中，封装后的函数接受回调函数，以便在请求成功时处理数据。

摘要由CSDN通过智能技术生成

1.ajax的使用

 var xhr = new XMLHttpRequest();
     xhr.open('GET', 'http://api.aulence.com/??????', true); //接口地址请慎用
     xhr.send();
     xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                // 接受json格式文本字符串
                var jsons = JSON.parse(xhr.responseText);
                console.log(jsons)
            }
        }
        // 将json文件解析成js对象
        var jsObj = JSON.parse(jsons);

2.ajax封装

        // 封装Ajax
        function getByAjax(type, URL, callback) {
            var xhr;
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject('Microsoft.XMLHTTP')
            };
            xhr.open(type, URL, true);
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // 接受json格式文本字符串
                    var jsons = JSON.parse(xhr.responseText);
                    // console.log(jsons)
                    callback(jsons)
                }
            }
        }
        //调用
        getByAjax('GET', 'http://api.aulence.com/????', fn);
        function fn(role) {
            console.log(role,'元数据');
        }