封装ajax函数!!

最新推荐文章于 2024-10-11 19:21:08 发布

HolaWord

最新推荐文章于 2024-10-11 19:21:08 发布

阅读量458

点赞数 1

分类专栏： ajax 文章标签：前端

本文链接：https://blog.csdn.net/azhou820567753/article/details/98885174

版权

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

   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;
            }

          

            // 配置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: 'get',  //get 公开/字节大小有控制(<=1024kb)/多次请求会从浏览器缓存中获取
                          //  post 隐藏/无字节限制/每次请求都会重新向服务端发送新的请求
            url: '/first',
            //  /+接口  
            data: {
                name: '123123123',
                age: 12
            },
            //前端发送给后端一些数据
            header: {
                'Content-Type': 'application/json'
            },
            //  假如你要传数据到服务端就/json  如果不传/application/x-www-form-urlencoded
            success: function (data) {
                //请求成功 调用成功的函数
                console.log(data);
            },
            error: function (data) {
                //请求失败 调用失败的函数
            }
        })
    </script>

下面附上一些ajax状态码和http状态码:
***Ajax状态码：描述当前AJAX操作的状态的

xhr.readyState：包含从0到4，五种状态

    >0:UNSENT,未发送，只要创建一个AJAX对象，默认值就是0
    >1:OPENED,我们已经执行了xhr.open这个操作
    >2：HEADERS_RECEIVED当前AJAX的请求已经发送，并且已经接收到服务器端返回的响应头信息了
    >3：LOADING，相应主体的内容正在返回的路上
    >4：DONE，响应主体内容已经返回到客户端

原文链接：https://blog.csdn.net/Swampis/article/details/82184482

***HTTP网络状态码
HTTP网络状态码:记录了当前服务器返回信息的状态：xhr.status(百度查看即可)
成功：200，一个完整的HTTP事务完成(以2开头的状态码一般都是成功)
以3开头的一般也是成功，只不过服务器端做了很多特殊的处理
301：Moved Permanently 永久转移（永久重定向），，一般应用于域名的迁移，，如360buy,会转到京东网站上
302：Moved temporarily 临时转移（临时重定向，新的HTTP版本中任务307是临时重定向）
‘’'一般用于服务器的负载均衡：当前服务器处理不了，我把当前请求临时交给其他的服务器处理
（一般图片请求经常出现302，很多公司都有单独的图片服务器）
304：Not Modified 从浏览器缓存中获取数据‘把一些不经常更新的文件或者内容缓存到浏览器中，下一次从缓存中获取，减轻服务器压力，也提高页面的加载速度’
>以4开头的，一般都是失败，而且客户端的问题偏大
400：请求参数错误（参数不够或者参数错误）
401：无权限访问
404：访问地址不存在
>以5开头的，一般都是失败，而且服务器的问题偏大
>500:Internal Server Error 未知的服务器错误
>503：Service Unavailable 服务器超负载

原文链接：https://blog.csdn.net/Swampis/article/details/82184482

还有一些ajax各类事件,跳转这个链接https://blog.csdn.net/Swampis/article/details/82184482