原生ajax的封装

手写原生ajax

       ajax(url, data, method, success) {

        // 异步对象
            let ajax = new XMLHttpRequest();

            // get 跟post  需要分别写不同的代码
            if (method == 'get') {

            // get请求
                if (data) {

                // 如果有值
                    url += '?';
                    url += data;
                } else {

                }

            // 设置 方法 以及 url
                ajax.open(method, url);

                // send即可
                ajax.send();
            } else {

            // post请求
                // post请求 url 是不需要改变
                ajax.open(method, url);

                // 需要设置请求报文
                ajax.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

                // 判断data send发送数据
                if (data) {

                // 如果有值 从send发送
                    ajax.send(data);
                } else {

                // 木有值 直接发送即可
                    ajax.send();
                }
            }

    // 注册事件
    ajax.onreadystatechange = function() {

            // 在事件中 获取数据 并修改界面显示
                if (ajax.readyState == 4 && ajax.status == 200) {

                // console.log(ajax.responseText);

                    // 将 数据 让 外面可以使用
                    // return ajax.responseText;

                    // 当 onreadystatechange 调用时 说明 数据回来了
                    // ajax.responseText;

                    // 如果说 外面可以传入一个 function 作为参数 success
                    success(ajax.responseText);
                }
            }

        }

猜你喜欢

转载自blog.csdn.net/qq_37339364/article/details/83824912