源代码

var ajax=(options)=>{// 1. 首先简单验证传进来的参数是否合法if(!options) return undefined;// 2. 对参数容错处理options.method = options.method ? options.method.toUpperCase() : 'GET'; // 默认 GET 请求options.data = options.data || {};options.type = options.type || 'FormData';if(options.type==='JSON'){options.data = JSON.stringify(options.data)}else if(options.type==='FormData'){var formData = [];for(let key in options.data) {  // Object.keys.forEachformData.push(''.concat(key, '=', options.data[key]))}options.data = formData.join('&') //eg: a=b&c=d&e=f}// 3. 实例化 XMLHttpRequest 对象,并进行一些设置var xmlhttp = new XMLHttpRequest();//获取对象// 4. 处理请求回调xmlhttp.onreadystatechange = function(){//设置回调函数if(xmlhttp.readyState == 4){//这里的4是请求的状态码，代表请求已经完成if(xmlhttp.status == 200 || xmlhttp.status == 304){//这里是获得响应的状态码，200代表成功，304代表无修改可以直接从缓存中读取options.success(xmlhttp)}else if(xmlhttp.status==500||xmlhttp.status==404){options.failure(xmlhttp)}else {options.failure(xmlhttp)}}}// 5. 打开请求xmlhttp.open(options.method,options.url,true);// 6. 设置请求头if(options.header){for(let key in options.header){xmlhttp.setRequestHeader(key, options.header[key])}}// 7. 发送请求xmlhttp.send(options.method==='POST'?options.data:null);//GET请求}

DEMO

ajax({url: '',method: 'POST',type: 'JSON',data: {},success: function(res) {console.log(res)},failure: function(err) {console.log(err)}
})

参考文章

https://www.runoob.com/ajax/ajax-examples.html

https://blog.csdn.net/tinsine/article/details/90231546

JavaScript——XMLHttpResquest的简单封装相关推荐

Java+Javascript图片裁剪简单封装
在做项目的过程中,有很多时候前端的图片会出现拉伸现象,所以在上传图片的时候,图片裁剪是必不可少的.所以有了封装一个图片裁剪工具的念头,下面是实现步骤: 1.首先选择一个前台裁剪工具,我这里使用的是Jc ...
php新闻列表排序,javascript 新闻列表排序简单封装
可以控制列表按日期以及按字数排序.升或者降序.代码简单封装,按一定的格式调用即可. 代码写的比较繁琐,很多方法用的很原始... 代码如下: 简单说明: 调用方法:list_sort(list_id,b ...
javascript 代码_如何使您JavaScript代码保持简单并提高其可读性
javascript 代码 by Leonardo Lima 莱昂纳多·利马(Leonardo Lima) 如何使您JavaScript代码保持简单并提高其可读性 (How to keep your ...
nodejs操作sqlserver数据_nodejs基于mssql模块连接sqlserver数据库的简单封装操作示例...
本文实例讲述了nodejs基于mssql模块连接sqlserver数据库的简单封装操作.分享给大家供大家参考,具体如下: 注意:开启sqlserver服务器允许远程连接的步骤,自行百度,很多经验,no ...
简单封装的Stripe支付方法
最近项目需要用到Stripe支付,于是做了一个简单封装,现在贴出来,也许以后用得着首先,需要在Stripe官方网站申请注册自己的支付帐号,并获取测试和正式用的前后端校验码. 然后,项目后台需要添加S ...
Android APP更新下载工具类——简单封装DownloadManager
几乎所有APP都包含了检查更新功能,更新下载功能的实现方式常用的有两种:1.使用App网络框架的文件下载请求:2.使用自带的DownloadManager类:本文介绍第二种,简单封装一下Downloa ...
javascript worker 多线程简单示例
javascript worker 多线程简单示例项目结构主线程 index.html <!DOCTYPE html> <html lang="en"> ...
简单封装浏览器 cookie 工具类
版权声明:本文首发 http://asing1elife.com ,转载请注明出处. https://blog.csdn.net/asing1elife/article/details/8265571 ...
小程序简单封装 request 请求
我在这里做了详细的介绍 : 小程序简单封装 request 请求转载于:https://www.cnblogs.com/biangz/p/9984340.html

JavaScript——XMLHttpResquest的简单封装

源代码

DEMO

参考文章

JavaScript——XMLHttpResquest的简单封装相关推荐

最新文章

热门文章