【Ajax】 ajax的函数封装 json

最新推荐文章于 2023-06-02 09:52:10 发布

置顶程序不了猿

最新推荐文章于 2023-06-02 09:52:10 发布

阅读量378

点赞数 3

分类专栏： javascript 文章标签： javascript node.js

本文链接：https://blog.youkuaiyun.com/qq_37730829/article/details/111043981

版权

javascript 专栏收录该内容

23 篇文章

订阅专栏

ajax的函数封装

目的

当页面数据需要更新时，需要频繁使用Ajax通讯时，不进行ajax函数封装的话，需要针对不同请求追加不同的ajax处理代码，会产生代码冗余，所以ajax函数封装旨在减少代码冗余。

基本思路

将ajax请求所需要的各类参数以对象形式传入封装函数

请求参数要考虑的问题：

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

    2.请求参数的格式问题
            application/x-www-form-urlencoded
                  参数名称=参数值&参数名称=参数值
            application/json
                   {name:'zs',age:20}
            (1)传递对象数据类型对于函数的调用更加友好
            (2)在函数内部对象数据类型转换为字符串数据类型更加方便

代码实现

<!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) {
            // 存储默认值
            let defaults = {
                type:'get',
                url:'',
                data:{},
                header:{
                    'Content-Type':'application/x-www-form-urlencoded'
                },
                success:function(){},
                error:function(){}
            };
            // 对象覆盖  将options对象覆盖defaults对象
            Object.assign(defaults,options);
            // 1.创建Ajax对象
            const xhr = new XMLHttpRequest();
            
            // 拼接字符串
            var params = '';
            // 遍历数据类型 拼接到 params中
            for(var item in defaults.data){
                params += item +'='+ defaults.data[item] +'&'
            }
            // 截取字符串   将数据最后的  &  符号去掉
            params = params.substr(0,params.length-1);

            // 当请求方式为 get 时，将数据添加到url后面
            if(defaults.type == 'get'){
                defaults.url +='?'+ params;
            }
            // 2.设置Ajax请求地址以及请求方式
            // 1) 请求方式  2）请求地址路劲
            // 配置ajax请求对象   请求类型  请求路径
            xhr.open(defaults.type, defaults.url);


            // 3.根据请求类型 发送Ajax请求
            if(defaults.type == 'post'){
                // 存储请求数据类型
                var contentType = defaults.header['Content-Type'];
                // 设置ajax的请求头
                xhr.setRequestHeader('Content-Type',contentType);
                // 判断数据类型   对数据类型进行处理
                if(contentType == 'application/json'){
                    // 如果类型为JSON  向服务器端传送json数据类型的参数
                    xhr.send(JSON.stringify(defaults.data));
                }else{
                    // 否则  向服务器传送普通数据类型参数
                    xhr.send(params);
                }
            }else{
                xhr.send();
            }

            // 4.获取服务器端给客户端响应的数据  并进行处理
            xhr.onload = function () {
                // xhr.getResponseHeader()  获取响应头中的数据
               let content = xhr.getResponseHeader('Content-Type');
               console.log(content);
               let responseData = xhr.responseText;

                //   如果响应类型中包含application/json  则将json字符串转换为对象形式
                if(content.includes('application/json')){
                    // 则将json字符串转换为对象形式
                    responseData = JSON.parse(responseData);
                  }
                // 请求成功  调用处理函数处理服务器返回的数据
                if(xhr.status == 200){
                    defaults.success(responseData,xhr);
                }else{
                    // 请求失败  调用处理失败情况的函数
                    defaults.error(responseData,xhr);
                }
                
            }
        }
        // 请求参数对象
        var options = {
            type:'post',
            url:'http://localhost:666/json',
            data:{
                name:'hanxin',
                age:24
            },
            header:{
                    'Content-Type':'application/json'
                },
            success:function(data,xhr) {
                console.log('封装成功');
                console.log(data);
                console.log(xhr);
            }
        }
        //调用ajax封装函数
        ajax(options);
    </script>
</body>

</html>