原生js封装ajax请求

向右看齐 2021-12-14 06:29 443阅读 0赞

一个完整的ajax请求封装，适用场景：

1.  get 请求
2.  post请求
3.  表单提交方式
4.  表单上传文件

function ajax(options) { 
        var method = options.method || 'get'; //请求方法，默认get
        var url = options.url || ''; //请求url
        var succFn = options.success || function(){ console.log('请求成功！')}; //请求成功回调
        var data = options.data || null; // 请求数据
        var isAsync = options.async === undefined ? true : options.async; //是否是异步请求，默认true
        var isFormData = options.isFormData || false; //是否采用表单提交数据的方式，默认false
    	
    	// 创建异步象
        var ajax = null;
        if(window.XMLHttpRequest) { 
            ajax = new XMLHttpRequest();
        }
        else { 
            ajax = new ActiveXObject("Microsoft.XMLHTTP");
        }
        
        // get请求参数处理
        if (data && method.toLowerCase() === 'get') { 
            url += '?';
            for(var key in data) { 
                url += key + "=" + encodeURIComponent(data[key]) + "&";
            }
            url = url.slice(0, url.length - 1);
        }
    
        ajax.open(method, url, isAsync);
    	
    	// post请求处理, 非表单数据提交方式
        if(method.toLowerCase() == 'post' && !isFormData) { 
            var contentType = "application/x-www-form-urlencoded";
            ajax.setRequestHeader("Content-type", options.contentType || contentType);
            
            if(data) { 
                var dataJSON = '';
                for(var key1 in data) { 
                    dataJSON += key1 + "=" + encodeURIComponent(data[key1]) + "&"; 
                    // encodeURIComponent 当get请求参数中有特殊字符时必须转码，否则会丢失特殊符号
                }
                dataJSON = dataJSON.slice(0, dataJSON.length - 1);
                ajax.send(dataJSON);
            } else { 
                ajax.send();
            }
    
        }
    	
    	// post请求 表单数据提交方式
        if(isFormData) {  
            ajax.send(data);
        }
    
        if(method.toLowerCase() === 'get') { 
            ajax.send();
        }
    
        ajax.onreadystatechange = function () { 
            if (ajax.readyState==4 && ajax.status==200) { 
                succFn(ajax);
            }
        }
    }

**使用方式：**

ajax({ 
       method: 'get',
       url: 'http://127.0.0.1/ajax/url',
       data: { 
       		id: id,
       		name: name
       },
       success: function(res) { 
       		console.log(res);
       }
    });

ajax({  
      method: 'post',
       url: 'http://127.0.0.1/post/data/url',
       data: { 
           name: name,
           id: id,
           type: type
       },
       success: function(res) { 
       		console.log(res);
       }
    })

表单方式提交异步请求：

var file = document.getElementById('file');
    file.addEventListener('change', function() {   
       var files = this.files;
    
        var formData = new FormData();
        formData.append("files[]", files[0]); // []表示files字段的数据格式为数组
        formData.append("parentId", '父级id');
        ajax({ 
           method: "post",
           url: 'http://127.0.0.1/upload/file/',
           contentType: "multipart/form-data",
           isFormData: true, // 使用表单数据提交方式
           data: formData,
           success: function(res) { 
    			console.log(res);
           }
       })
    })

发表评论取消回复

表情：

评论列表（有 0 条评论，443人围观）

还没有评论，来说两句吧...

相关阅读

相关原生js封装ajax方法

jquery框架的ajax方法固然好用，但是假如某天我们的项目不能引入jquery或项目需求很简单，没有很多交互功能，只需要ajax，这时引入jquery库会造成资源浪费，也会

绝地灬酷狼/ 2022年09月26日 00:26/ 0 赞/ 238 阅读

相关原生ajax封装

引入线上jquery： <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

梦里梦外;/ 2022年09月14日 02:25/ 0 赞/ 246 阅读

相关原生js封装Ajax函数

Ajax，是 Asynchronous JavaScript + XML 的简写。指一种创建交互式网页应用的网页开发的技术。通过异步模式，提升了用户体验。优化了浏览器和服

￡神魔★判官ぃ/ 2022年05月23日 04:26/ 0 赞/ 300 阅读

相关原生JS Ajax请求

传统方法的缺点: 传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,每当服务器处理客户端提交的请求时,客户都只能

ゝ一纸荒年。/ 2022年05月11日 09:20/ 0 赞/ 304 阅读

相关 Ajax_原生ajax写法、理解异步请求、js单线程+事件队列、封装原生ajax

1、原生Ajax 　　一定要理解Ajax出现的背景　　Ajax通过url查询后端接口的数据，在前端做数据的解析和局部更新　　1、隐藏帧iframe方式实现页面局部更新

ゞ浴缸里的玫瑰/ 2022年01月09日 11:43/ 0 赞/ 288 阅读

相关 Ajax_原生ajax写法、理解异步请求、js单线程+事件队列、封装原生ajax

1、原生Ajax 　　一定要理解Ajax出现的背景　　Ajax通过url查询后端接口的数据，在前端做数据的解析和局部更新　　1、隐藏帧iframe方式实现页面局部更新

柔情只为你懂/ 2021年12月22日 22:17/ 0 赞/ 320 阅读

相关原生js封装ajax请求

一个完整的ajax请求封装，适用场景： 1. get 请求 2. post请求 3. 表单提交方式 4. 表单上传文件 function ajax(opti

向右看齐/ 2021年12月14日 06:29/ 0 赞/ 444 阅读

相关原生ajax封装

//参数/ url :地址 obj: 参数 callback 回调 //没做容错有时间在写一

深藏阁楼爱情的钟/ 2021年09月16日 23:42/ 0 赞/ 404 阅读

相关原生js 封装ajax

这是自己封装的ajax ，分享一下：直接上代码文件夹 ![70][] index.html ![70 1][] ![70 2][]

不念不忘少年蓝@/ 2021年09月15日 07:50/ 0 赞/ 482 阅读

相关原生JS封装AJAX方法

原生JS封装AJAX方法 Ajax大家每天都在用，jquery库对Ajax的封装也很完善、很好用，下面我们看一下它的内部原理，并手动封装一个自己的Ajax库。一、原理 ...

红太狼/ 2020年06月06日 18:35/ 0 赞/ 921 阅读