前端封装XMLHttpRequest超级实用!

81 阅读 0 评论 54 点赞

我是靠谱客的博主洁净小懒猪，这篇文章主要介绍前端封装XMLHttpRequest超级实用!，现在分享给大家，希望可以做个参考。

前端封装XMLHttpRequest超级实用

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

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 function senRequest(urls, method, param) {
        //    只读变量 获取请求
        const http = new XMLHttpRequest();
        const url = "${pageContext.request.contextPath}" + urls
        http.open(method, url, false);
        //遍历参数
        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 === 'post'||method==='POST') http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        //发送请求
        http.send(data);
     //将结果返回给调用者;
        return JSON.parse(http.responseText);
    }

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 //获取表格数据
    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 οnclick="update('` + item.uid + `')">修改</button>
                <button οnclick="remove('` + item.uid + `')">删除</button>
                </td>
            </tr>
            `)
        })
    }