前端封装XmlHttpRequest超级实用

前端封装XMLHttpRequest超级实用

​ 很多时候我们只需要开发一个简单地页面，不需要引入任何js库，这时接口请求用到 XMLHttpRequest 对象必不可少，那么封装一个好用的请求方法是理所应当的了。以下是我个人封装使用的的请求方式 .

XMLHttpRequest 用于在后台与服务器交换数据。创建 XMLHttpRequest 对象的方法如下：

   function senRequest(urls, method, param) {
        //    获取请求
        const http = new XMLHttpRequest();
        const url = "${pageContext.request.contextPath}" + urls
        //遍历参数
        let data = '';
        let num = 1;
        //遍历对象进行处理
        if (param != null) {
            for (let key in param) {
                //数据为多个时拼接
                if (num !== 1) {
                    data = data + '&' + key + "=" + param[key];
                } else {
                    data = key + "=" + param[key];
                    num++;
                }
            }
        }
        // post请求 处理请求参数 返回数据
        if (method === 'get' || method === 'GET') {
            data = '?' + data;
            http.open(method, url + data, false);
            http.send(null);
            return JSON.parse(http.responseText);
        }
        http.open(method, url, false);
        //如果是post方法则增加请求头
        if (method === 'post' || method === 'POST') http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        //发送请求
        http.send(data);
        return JSON.parse(http.responseText);
    }

至此, 简易版的封装就完成了 去页面试一试

 //获取表格数据
    function getTableData() {
        //获取数据前先清空
        $("#data").empty();
        //调用封装之后的方法 提供url,请求方法以及参数(请求参数为空可不写或写null)
        const data = senRequest("/api/getAll", "post", {name: 'asd', password: 'asdasd'});
        //打印一下数据
        console.log(data);
        //遍历数组
        data.forEach(item => {
            $("#data").append(`
            <tr>
                <td>` + item.uid + `</td>
                <td>` + item.name + `</td>
                <td>` + item.age + `</td>
                <td>` + item.registDate + `</td>
                <td>
                <button onclick="update('` + item.uid + `')">修改</button>
                <button onclick="remove('` + item.uid + `')">删除</button>
                </td>
            </tr>
            `)
        })
    }

• 页面演示