Ajax(封装笔记第一天)_function exportrecord(ajaxurl, title, format) { fo-CSDN博客

本文链接：https://blog.csdn.net/qq_45433707/article/details/105666952

服务器端响应的数据格式

在真实的项目中，服务器端大多数情况下会以JSON对象作为响应数据的格式。当客户端拿到响应数据时，要将JSON数据和HTML字符串进行拼接，然后将拼接的结果展示在页面中。
在http请求与响应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都会被转换为对象字符串进行传输。

请求报文

在http请求和响应的过程中传递的数据块就叫报文，包括要传送的数据和一些附加信息；俩部分报文头/报文体；

报文头：Content-Type；报文体：（ application/x-www-form-urlencoded    application/json）要传递的数据类型；

在这里插入图片描述
4. 在传递请求参数的时候，参数必须以字符串的形式进行传递；这是规定；

注意：

get请求是不能提交json对象数据格式的，只能提交 application/x-www-form-urlencoded，传统网站的表单提交也是不支持json对象数据格式的。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function ajax(options) {
            // 存储默认值
            var defaults = {
                type: 'get',
                url: '',
                data: {},
                header: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                success: function() {},
                error: function() {}
            };
            // 使用defaults对象中的属性覆盖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.substr(0, params.length - 1);
            // 判断请求参数
            if (defaults.type == 'get') {
                defaults.url = defaults.url + '?' + params;
            }
            // console.log(params);
            // 配置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(params);
            }
            // 监听xhr对象下面的onload事件
            // 当xhr对象接收完响应数据后触发
            xhr.onload = function() {
                // 获取响应头中的数据
                // console.log(xhr.getResponseHeader('Content-Type'));
                var contentType = xhr.getResponseHeader('Content-Type');
                // 服务器端返回的数据
                var responseText = xhr.responseText;
                // 响应类型
                if (contentType.includes('application/json')) {
                    // console.log('包含');
                    responseText = JSON.parse(responseText);
                }
                // console.log();
                // http状态码判断(为200的时候 请求成功调用成功情况的函数)
                if (xhr.status == 200) {
                    defaults.success(responseText, xhr);
                } else {
                    // 请求失败
                    defaults.error(responseText, xhr);
                    // console.log(xhr);
                }

            }
        }
        ajax({
            // // 请求方式
            type: 'post',
            // data: {
            //     name: 'zhangsan',
            //     age: 20
            // },
            // header: {
            //     'Content-Type': 'application/json'
            // },
            // 请求地址
            url: 'http://localhost:3000/responDate',
            success: function(data) {
                console.log('这里是success');
                console.log(data);
            },

            // error: function(data) {
            //     console.log('这里是错误error' + data);
            //     console.log(xhr);
            // }
        });
        /*
            请求参数要考虑的问题
                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>