ajax自己封装
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自己封装的更多相关文章
- 原生态AJAX详解和jquery对AJAX的封装
		
AJAX: A :Asynchronous [eI`sinkrenes] 异步 J :JavaScript JavaScript脚本语言 A: And X :XML 可扩展标记语言 AJAX现在 ...
 - 【前端学习笔记04】JavaScript数据通信Ajax方法封装
		
//Ajax 方法封装 //设置数据格式 function setData(data){ if(!data){ return ''; } else{ var arr = []; for(k in da ...
 - 原生ajax与封装的ajax使用方法
		
当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.ht ...
 - Ajax入门(二)Ajax函数封装
		
如果看了的我上一篇博客<Ajax入门(一)从0开始到一次成功的GET请求>的话,肯定知道我们已经完成了一个简单的get请求函数了.如下: 1234567891011121314151617 ...
 - js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用)
		
js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用) 一.总结 2.匿名函数作为参数传递 二.js进阶ajax函数封装 ajax1.js function ajax(ur ...
 - jQuery-实现简单的Ajax请求封装
		
封装的意义在于复用,在于减少重复的代码. 我在项目中做了简单的Ajax请求封装,实现方式如下: //封装Ajax请求 $.extend({ ajaxDirect:function(url,type,d ...
 - JQ中的Ajax的封装
		
1.认识JQ中ajax的封装 jQ 对于ajax的封装有两层实现:$.ajax 为底层封装实现:基于 $.ajax ,分别实现了$.get 与$.post 的高层封装实现: 2.Ajax的底 ...
 - Ajax的封装。
		
封装 Ajax 因为Ajax 使用起来比较麻烦,主要就是参数问题,比如到底使用GET 还是POST:到 底是使用同步还是异步等等,我们需要封装一个Ajax 函数,来方便我们调用. 封装支持接收来 ...
 - Jquery Ajax简单封装(集中错误、请求loading处理)
		
Jquery Ajax简单封装(集中错误.请求loading处理) 对Jquery Ajax做了简单封装,错误处理,请求loading等,运用到项目中集中处理会很方便. 技术层面没有什么好说的,请求是 ...
 - Ajax的封装,以及利用jquery的ajax获取天气预报
		
1.Ajax的封装 function ajax(type,url,param,sync,datetype,callback){//第一个参数是获取数据的类型,第二个参数是传入open的url,第三个是 ...
 
随机推荐
- windows下后台启动PHP,Nginx,Redis(使用RunHiddenConsole)
			
启动命令(红色代码可选): 启动PHP RunHiddenConsole D:/phpStudy/PHPTutorial/php/php-5.6.27-nts/php-cgi.exe -b 127.0 ...
 - 利用mysqldump 与 nginx定时器 定时备份mysql库
			
1.安装mysqldump(如果备份远程mysql库,本地不用安装mysql 也可以单独使用) yum -y install holland-mysqldump.noarch 2.编写备份脚本 首先这 ...
 - kali linux 更换国内源报GPG error解决办法
			
wget -q -O - https://archive.kali.org/archive-key.asc | apt-key add
 - python学习之scipy实战1(积分用法)
			
import numpy as np def main(): #1-- Integral积分 from scipy.integrate import quad, dblquad, nquad prin ...
 - php——字符串的""和null,empty的关系
			
public function test(){ $test = ""; if($test==null){ echo "test==null <hr>" ...
 - Django之 rest_framework (一基本组件)
			
目录 RESTFUL 序列化 视图三部曲 认证与权限组件 解析器 分页 RESTFUL 一.什么是RESTFUL REST与技术无关代表的是一种软件架构风格,REST是Representational ...
 - SpringMVC实现文件上传功能
			
文件上传 文件上传要求form表单的请求方式必须为post,并且添加属性enctype="multipart/form-data" SpringMVC中将上传的文件封装到Multi ...
 - CF1500D Tiles for Bathroom (递推+大讨论)
			
题目大意:给你一个n*n的矩阵,现在问对于每个k\le n,求出所有k*k的子矩阵中,元素种类数不超过q的矩阵个数,n\le 1500, q\le 10 先考虑最暴力的做法: 对于每个格子,求出以它为 ...
 - HashMap:为什么容量总是为2的n次幂
			
HashMap:为什么容量总是为2的n次幂1).HashMap是根据key的hash值决定key放到哪个桶中,通过tab[i = (n - 1) & hash]公式计算得出 这里的n是Hash ...
 - Linux 的目录结构是怎样的?
			
这个问题,一般不会问.更多是实际使用时,需要知道.Linux 文件系统的结构层次鲜明,就像一棵倒立的树,最顶层是其根目录:Linux的目录结构常见目录说明: /bin:存放二进制可执行文件(ls,ca ...