312 Ajax 函数封装

2020-02-22 14:03:20 阅读：218 来源： 互联网

标签：封装请求 312 json xhr Ajax 参数 defaults params

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script type="text/javascript">
        function ajax(options) {
            // 存储的是默认值
            var defaults = {
                type: 'get',
                url: '',
                data: {},
                header: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                success: function() {},
                error: function() {}
            };

            // 使用options对象中的属性覆盖defaults对象中的属性
            Object.assign(defaults, options);

            // 创建ajax对象
            var xhr = new XMLHttpRequest();
            // 拼接请求参数的变量
            var params = '';
            // 循环用户传递进来的对象格式参数
            for (var attr in defaults.data) {
                // 将参数转换为字符串格式
                params += attr + '=' + defaults.data[attr] + '&';
            }
            // 将参数最后面的&截取掉，将截取的结果重新赋值给params变量
            params = params.substr(0, params.length - 1);

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

            // {
            //  name: 'zhangsan',
            //  age: 20
            // }
            // name=zhangsan&age=20


            // 配置ajax对象
            xhr.open(defaults.type, defaults.url);
            // 如果请求方式为post
            if (defaults.type == 'post') {
                // 用户希望的向服务器端传递的请求参数的类型
                var contentType = defaults.header['Content-Type']
                    // 设置请求参数格式的类型
                xhr.setRequestHeader('Content-Type', contentType);
                // 判断用户希望的请求参数格式的类型
                // 如果类型为json
                if (contentType == 'application/json') {
                    // 向服务器端传递json数据格式的参数
                    xhr.send(JSON.stringify(defaults.data))
                } else {
                    // 向服务器端传递普通类型的请求参数
                    xhr.send(params);
                }
            } else {
                // 发送请求
                xhr.send();
            }

            // 监听xhr对象下面的onload事件
            // 当xhr对象接收完响应数据后触发
            xhr.onload = function() {
                // xhr.getResponseHeader()
                // 获取响应头中的数据
                var contentType = xhr.getResponseHeader('Content-Type');
                // 服务器端返回的数据
                var responseText = xhr.responseText;

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

                // 当http状态码等于200的时候
                if (xhr.status == 200) {
                    // 请求成功 调用处理成功情况的函数
                    defaults.success(responseText, xhr);
                } else {
                    // 请求失败 调用处理失败情况的函数
                    defaults.error(responseText, xhr);
                }
            }
        }

        ajax({
            type: 'post',
            // 请求地址
            url: 'http://localhost:3000/responseData',
            success: function(data) {
                console.log('这里是success函数');
                console.log(data)
            }
        })

        /*
            请求参数要考虑的问题
                1.请求参数位置的问题
                    将请求参数传递到ajax函数内部, 在函数内部根据请求方式的不同将请求参数放置在不同的位置
                    get 放在请求地址的后面
                    post 放在send方法中

                2.请求参数格式的问题
                    application/x-www-form-urlencoded
                        参数名称=参数值&参数名称=参数值
                        name=zhangsan&age=20

                    application/json
                        {name: 'zhangsan', age: 20}

                    1.传递对象数据类型对于函数的调用者更加友好
                    2.在函数内部对象数据类型转换为字符串数据类型更加方便

        */
    </script>
</body>

</html>

标签：封装,请求,312,json,xhr,Ajax,参数,defaults,params
来源： https://www.cnblogs.com/jianjie/p/12345174.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

312 Ajax 函数封装