ajax 简单方法封装

/*
         * ajax() 作用 向服务器发送请求
         参一 url
         参二 请求参数
         参三 请求方法
         参四 请求成功的响应处理函数
         参五 请求失败的处理函数
        */
        var parms = {
            page: 1,
            num: 1000
        }
        ajax('http://musicapi.leanapp.cn/artist/list', parms, 'GET', true, success, error);
        function ajax(url, parm, method, async, success, error) {
            // 实例化请求对象
            var xhr = new XMLHttpRequest();
            var url = url; // 接受请求地址

            if (method === "GET") { // 如果是 get 
                // 1: 处理请求参数,将请求参数拼接到url地址上
                url += "?";
                for (var x in parm) { // 拼接字符串
                    url += x + "=" + parm[x] + "&";
                }
                url = url.slice(0, url.length - 1); // 去掉最后一个&
                // 2:准备发送请求
                xhr.open(method, url, async);
                //3:发送请求
                xhr.send();
            } else if (method === "POST") {
                // 1:对post 请求的请求参数处理
                var str = ''   // 初始化请求参数
                xhr.open(method, url, async); // 准备发送请求
                // 设置请求头
                xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
                // 请求参数处理
                for (var x in parm) {
                    str += x + '=' + parm[x] + '&'
                }
                str = str.slice(0, str.length - 1);
                // 将请求参数传给 send 发送post 请求
                xhr.send(str);
            }
            // 4:监听服务器响应事件
            xhr.onreadystatechange = function () {
                // 接受服务器响应的数据
                var data = xhr.responseText;
                // console.log(data);
                
                if (xhr.status === 200 & xhr.readyState === 4) {
                    // 请求成功了
                    // 将请求成功后数传入给success 回调函数
                    success(data); // 请求成功的处理的函数
                } else if (xhr.status === 404 || xhr.status === 500) {
                    // 请求失败的处理函数
                    error(data)
                }
            }
        }

        function success(data) {
            console.log('请求成功了');
            console.log('这里是请求成功的业务处理函数');
        }
        function error(data) {
            console.log('请求失败了');
            console.log('这里是请求失败的业务处理函数');

        }

  /**
   * ajax() 发送请求
   * @param {*} url   接口地址
   * @param {*} parm  请求参数
   * @param {*} method  请求方式 GET POST
   * @param {*} async  异步true 同步 false
   * @param {*} success  请求成功的回调函数处理
   * @param {*} error   请求失败的回调函数处理
   */

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值