封装原生Ajax函数

先分享一篇优秀博文：Ajax函数的封装

ajax.js代码

      /*
      var options = {
        type:'', // 请求类型
        data:{}, // 请求参数
        header:{}, // 请求头，一般用于声明参数类型格式
        url:'',  // 请求地址
        success:function(data){}, // 成功回调
        error:function(data,xhr){} // 失败回调
      }
      */

function ajax(options) {
    // 1 创建Ajax对象
    let xhr = new XMLHttpRequest();
    // 拼接请求参数变量
    let params = '';
    for (let attr in options.data) {
        params += attr + '=' + options.data[attr] + '&';
    }

    // 对字符串进行截取
    // 将参数最后面的 & 截取掉
    // 将截取的结果重新赋值给params变量
    params = params.substring(0, params.length - 1);
    // console.log(params)

    // 判断请求方式
    if (options.type == 'get') {
        options.url = options.url + '?' + params;
    }

    // 告诉Ajax请求地址及其方式
    xhr.open(options.type, options.url);

    // 如果请求方式为post
    if (options.type == 'post') {
        // 用户希望的向服务器端传递的请求参数的类型
        let contentType = options.header['Content-Type'];
        // 设置请求参数格式的类型
        xhr.setRequestHeader('Content-Type', contentType);
        // 判断用户希望的请求参数格式的类型
        // 如果类型为json
        if (contentType == 'application/json') {
            // 向服务器端传递json数据格式的参数
            xhr.send(JSON.stringify(options.data));
        } else {
            // 向服务器端传递普通类型的请求参数
            xhr.send(params);
        }
    } else {
        // 3 发送请求 post请求要把请求参数放在请求体里面偶!
        xhr.send();
    }

    // 4 获取服务器端响应给客户端的数据[也就是监听onload事件！]
    xhr.onload = function() {
        // xhr.getResponseHeader()
        // 获取响应头中的数据!
        // 根据你请求方式不同而返回不一样的结果！
        let contentType = xhr.getResponseHeader('Content-Type');
        // 服务器端返回的数据
        let responseText = xhr.responseText;

        // 如果响应类型中包含json
        if (contentType.includes('application/json')) {
            // console.log('包含');
            // console.log(JSON.parse(responseText));
            //将json字符串转换为json对象
            responseText = JSON.parse(responseText);
        } else {

        }

        if (xhr.status == 200) {
            // 请求成功调用处理成功情况的函数
            options.success(responseText);
        } else {
            // 请求失败调用处理失败情况的函数
            options.error(responseText, xhr);
        }
    }
}

调用示例：

<body>
    <!-- <h1>## Ajax的实现步骤</br> -->
    <h1>测试页面！</h1>
    <button id="btn">Ajax错误处理</button>
    <script type="text/javascript">
        let btn = document.getElementById('btn');
        btn.onclick = function() {
            ajax({
                type: 'post',
                data: {
                    name: 'zrh',
                    age: 23
                },
                header: {
                    'Content-Type': 'application/json'
                },
                url: 'https://v1.alapi.cn/api/music/search?keyword=1',
                success: function(data) {
                    //data 服务器返回的数据实参
                    console.log("响应数据为：" + data);
                    console.log(data);
                },
                error: function(data, xhr) {
                    console.log('恭喜您收到了一个非200的状态码' + data);
                    console.log(xhr);
                }
            })
        }
    </script>
</body>

 

posted @ 2022-03-31 18:59  RHCHIK  阅读(165)  评论(0)  编辑  收藏  举报