function paramsSeralize(obj){
if(!obj || typeof !== 'object') return obj;
let res = '';
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
res += `&${key}=${obj[key]}`
}
}
result = result.substring(1);
return result;
}
function ajax (options) {
let params = Object.assign({
method: 'GET',
url: '',
data: null,
params: null
}, options)
let isGet = /^(GET|OPTIONS|HEAD|DELETE)$/i.test(options.method) options.params ? options.params = paramsSeralize(options.params) : null; options.data ? options.data = paramsSeralize(options.data) : null; if(isGet && options.params){
options.url += `${options.url.indexOf('?')>=0 ? '&' : '?'}${options.params}`
} let xhr = new XMLHttpRequest;
xhr.open(options.method, options.url) !isGet ? xhr.setRequestHeader('Content-type','x-www-form-urlencoded') : null; xhr.onreadystatechange = function () {
let { readyState, status, responseText } = xhr;
if (/^2\d{2}/.test(status) && readyState === 4) {
responseText = JSON.stringify(responseText)
options.success && options.success()
}
}
xhr.send(isGet ? null : options.data);
}

使用

ajax({
method: 'GET',
url: '/user/list',
data: {
lx: 1,
number: 2
},
params: {
type: 1
},
success (res) { }
})

ajax自己封装的更多相关文章

  1. 原生态AJAX详解和jquery对AJAX的封装

    AJAX: A :Asynchronous [eI`sinkrenes] 异步 J :JavaScript    JavaScript脚本语言 A: And X :XML 可扩展标记语言 AJAX现在 ...

  2. 【前端学习笔记04】JavaScript数据通信Ajax方法封装

    //Ajax 方法封装 //设置数据格式 function setData(data){ if(!data){ return ''; } else{ var arr = []; for(k in da ...

  3. 原生ajax与封装的ajax使用方法

    当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.ht ...

  4. Ajax入门(二)Ajax函数封装

    如果看了的我上一篇博客<Ajax入门(一)从0开始到一次成功的GET请求>的话,肯定知道我们已经完成了一个简单的get请求函数了.如下: 1234567891011121314151617 ...

  5. js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用)

    js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用) 一.总结 2.匿名函数作为参数传递 二.js进阶ajax函数封装 ajax1.js function ajax(ur ...

  6. jQuery-实现简单的Ajax请求封装

    封装的意义在于复用,在于减少重复的代码. 我在项目中做了简单的Ajax请求封装,实现方式如下: //封装Ajax请求 $.extend({ ajaxDirect:function(url,type,d ...

  7. JQ中的Ajax的封装

    1.认识JQ中ajax的封装      jQ 对于ajax的封装有两层实现:$.ajax 为底层封装实现:基于 $.ajax ,分别实现了$.get 与$.post 的高层封装实现: 2.Ajax的底 ...

  8. Ajax的封装。

    封装 Ajax 因为Ajax 使用起来比较麻烦,主要就是参数问题,比如到底使用GET 还是POST:到 底是使用同步还是异步等等,我们需要封装一个Ajax 函数,来方便我们调用.    封装支持接收来 ...

  9. Jquery Ajax简单封装(集中错误、请求loading处理)

    Jquery Ajax简单封装(集中错误.请求loading处理) 对Jquery Ajax做了简单封装,错误处理,请求loading等,运用到项目中集中处理会很方便. 技术层面没有什么好说的,请求是 ...

  10. Ajax的封装,以及利用jquery的ajax获取天气预报

    1.Ajax的封装 function ajax(type,url,param,sync,datetype,callback){//第一个参数是获取数据的类型,第二个参数是传入open的url,第三个是 ...

随机推荐

  1. C/C++ 大型工程工具链搭建

    一.配置环境要求 C/C++ 编译器 此项有系统区别,如果是 Windows 平台,那么可以下载 VS2022 社区版,它自带 MSVC 编译器.如果嫌它太笨重,也可以直接下载 MSVC 再发行组件. ...

  2. php 23种设计模型 - 中介者模式

    中介者模式 中介者模式(Mediator Pattern)是用来降低多个对象和类之间的通信复杂性.这种模式提供了一个中介类,该类通常处理不同类之间的通信,并支持松耦合,使代码易于维护.中介者模式属于行 ...

  3. c++ 11 线程池---完全使用c++ 11新特性

    前言: 目前网上的c++线程池资源多是使用老版本或者使用系统接口实现,使用c++ 11新特性的不多,最近研究了一下,实现一个简单版本,可实现任意任意参数函数的调用以及获得返回值. 0 前置知识 首先介 ...

  4. 2.2 C++STL string容器详解

    文章目录 引言 2.2.1 string的特性 2.2.2 string用法理论 2.2.2.1 string构造函数 2.2.2.2 string赋值操作 2.2.2.3 string取值操作 2. ...

  5. js中的函数嵌套和闭包

    小编已经有一段时间没有更新文章了,最近一直在考虑接下来要更新什么内容.接下来,小编会围绕以下三个方面更新文章.实际项目中遇到的问题和解决方案.Vue源码解析.代码重构.关于数据可视化.小编也会按照这个 ...

  6. Java基础——StringBuilder的添加与反转方法

    StringBuilder添加与反转方法 方法 返回对象 public StringBuilder append(任意类型) 添加任意参数数据,并返回对象本身,注意:返回的是对象本身,则调用过appe ...

  7. Mybatis执行流程浅析

    从三个主要的对象SqlSessionFactoryBuilder->SqlSessionFactory->SqlSession说起 inputStream = Resources.getR ...

  8. Activemq持久化之kahadb特性

    介绍数据的持久化是很多系统都会涉及到的一个问题,尤其是redis,activemq这些数据主要是存储在内存中的.既然存在内存中,就会面临宕机时数据丢失的风险.这一问题的解决方案就是通过某种方式将数据写 ...

  9. 什么时候用断言(assert)?

    答:断言在软件开发中是一种常用的调试方式,很多开发语言中都支持这种机制.一般来说,断言用于保证程序最基本.关键的正确性.断言检查通常在开发和测试时开启.为了保证程序的执行效率,在软件发布后断言检查通常 ...

  10. springboot 定时任务 session报错问题

    一.自定义类 LocalVariable package com.lh.mes.base.thread; import java.util.Optional; public class LocalVa ...