原生js封装

function ajaxRequest(type, url, data, callback, failCallBack, header, dataType) {
var url_encode = function (str) {
return encodeURIComponent(str)
.replace(/ /gi, '+')
.replace(/~/gi, '%7e')
.replace(/'/gi, '%26%2339%3b');
};
type = String(type || 'GET').toUpperCase();
if (type == 'GET') {
var dataStr = typeof (data) === 'string' ? data : '';
if (typeof (data) === 'object')
for (var key in data) {
if (Object.prototype.toString.call((data[key])) == '[object Array]') {
for (var a = 0; a < data[key].length; a++)
if (data[key][a] !== undefined) dataStr += key + "=" + url_encode(data[key][a]) + "&";
}
if (data[key] !== "" && data[key] !== null) dataStr += key + '=' + url_encode(data[key]) + '&';
}
if (dataStr !== '') {
dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
url = url + '?' + dataStr;
}
}
var sendData = '';
var contentType = 'application/x-www-form-urlencoded; charset=utf-8';
if (type == "FORM") {
if (typeof (data) === 'string') sendData = data;
if (typeof (data) === 'object')
for (var key in data) {
if (Object.prototype.toString.call((data[key])) == '[object Array]') {
for (var a = 0; a < data[key].length; a++)
if (data[key] !== undefined) sendData += key + "=" + url_encode(data[key][a]) + "&";
}
else if (data[key] !== "" && data[key] !== null) sendData += key + "=" + url_encode(data[key]) + "&";
}
}
if (type == 'JSON') {
debugger
sendData = JSON.stringify(data);
contentType = "application/json; charset=utf-8";
}
if (!failCallBack) failCallBack = console.log;
var requestObj = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject;
requestObj.onreadystatechange = () => {
if (requestObj.readyState == 4) {
if (requestObj.status == 200) {
var obj = requestObj.response
if (String(dataType).toLowerCase() === 'html') return callback(obj);
if (typeof obj !== 'object') obj = JSON.parse(obj);
if (obj.code === 0) return callback(obj.data);
failCallBack(obj);
} else {
failCallBack(requestObj)
}
}
};
requestObj.open(type == 'GET' ? type : 'POST', url, true);
if (type != 'GET') requestObj.setRequestHeader("Content-type", contentType);
if (typeof (header) === 'object') for (var key in header) requestObj.setRequestHeader(key, header[key]);
requestObj.send(sendData || null);
}

二次封装,统一处理token,未登录

top.ajaxRequest2 = ajaxRequest; ajaxRequest = function (type, url, data, callback, failCallBack, header, dataType) { if (!header) header = {}; header.token = localStorage.getItem('token'); if (!header.token) delete header.token; top.ajaxRequest2(type, url, data, callback, function (d) { if (d.code === 5009) localStorage.removeItem('token');/*登陆TOKEN失效_请重新登陆*/d.url = type + ' ' + url; console.error(d); if (failCallBack) failCallBack(d); }, header, dataType); };

轻量级原生 ajax 函数,支持 get/array post/array post/json的更多相关文章

  1. 原生ajax函数封装

    原生ajax函数 function ajax(json){ json=json || {}; if(!json.url){ return; } json.data=json.data || {}; j ...

  2. 原生Ajax函数

    前言 在日常工作中,我经常使用Jquery的Ajax来获取接口数据.这几天有一个的官网要制作,由于网站比较小,有一些与服务器通信的接口处理,并没有涉及到复杂的交互功能.为了可以减少加载Jquery库的 ...

  3. 原生ajax解析&封装原生ajax函数

    前沿:对于此篇随笔,完是简要写了几个重要的地方,具体实现细节完在提供的源码做了笔记 <一>ajax基本要点介绍--更好的介绍ajax 1. ajax对象中new XMLHttpReques ...

  4. [译]脱离jQuery,使用原生Ajax

    脱离jQuery,使用原生Ajax 标签: Ajax translate 英文出处:<A Guide to Vanilla Ajax Without jQuery> 翻译: 刘健超 J.c ...

  5. $.ajax函数调接口,报异常No converter found for return value of type: class java.util.ArrayList

    接口正常执行,返回给前端后报服务器500异常,异常详情: org.springframework.http.converter.HttpMessageNotWritableException: No ...

  6. jQuery.ajax() 函数详解

    jQuery.ajax()函数用于通过后台HTTP请求加载远程数据. jQuery.ajax()函数是jQuery封装的AJAX技术实现,通过该函数,我们无需刷新当前页面即可获取远程服务器上的数据. ...

  7. 原生Ajax讲解

    典型的http通信:浏览器向服务器发出请求,服务器向客户端返回响应,浏览器重新加载页面,这种不连续的页面加载方式导致用户的体验变得杂乱,缺乏连贯性. 如: 在一般的web应用程序中,用户填写表单字段然 ...

  8. 浅谈AJAX的基本原理和原生AJAX的基础用法

    一.什么是AJAX? AJAX,即"Asynchronous Javascript And XML",翻译为异步的JavaScript和XML,是一种创建交互式网页应用的网页开发技 ...

  9. python_way day21 Django文件上传Form方式提交,原生Ajax提交字符处啊,Django文件上传之原生Ajax方式、jQuery Ajax方式、iframe方式,Django验证码,抽屉示例,

    python_way day21 1.Django文件上传至Form方式 2.原生Ajax文件上传提交表单 使用原生Ajax好处:不依赖jquery,在发送一个很小的文件或者字符串的时候就可以用原生A ...

随机推荐

  1. php获取指定目录下的所有文件列表

    在我们实际的开发需求中,经常用到操作文件,今天就讲一下关于获取指定目录下的所有文件的几种常用方法: 1.scandir()函数 scandir() 函数返回指定目录中的文件和目录的数组. scandi ...

  2. 用一张表里的记录更新自己(或另一张表)里的记录(exists使用)

    update jqhdzt set shid=(select shid from v_plat_userjqinfo t where jqhdzt.jqbh=t.JQBH and jqhdzt.shi ...

  3. Django REST framework+Vue 打造生鲜超市(十三)

    目录 生鲜超市(一)    生鲜超市(二)    生鲜超市(三) 生鲜超市(四)    生鲜超市(五)    生鲜超市(六) 生鲜超市(七)    生鲜超市(八)    生鲜超市(九) 生鲜超市(十) ...

  4. Servlet知识点总结

    一, ServletAPI中有4个Java包: 1.javax.servlet:其中包含定义Servlet和Servlet容器之间契约的类和接口 2.javax.servlet.http:其中包含定义 ...

  5. 【python3】如何建立爬虫代理ip池

    一.为什么需要建立爬虫代理ip池 在众多的网站防爬措施中,有一种是根据ip的访问频率进行限制的,在某段时间内,当某个ip的访问量达到一定的阀值时,该ip会被拉黑.在一段时间内被禁止访问. 这种时候,可 ...

  6. OpenStack架构详解

    OpenStack提供开放源码软件,建立公共和私有云. OpenStack是一个社区和一个项目,以及开放源码软件,以帮助企业运行的虚拟计算或者存储云. OpenStackd开源项目由社区维护,包括Op ...

  7. 使用Eclipse打开已有工程

      点击Eclipse界面中的file(文件)下的import(导入).   进入导入界面,选择General下的Exiting Project into Workspace.   点击Select ...

  8. jenkins在windows下的最快安装方法

    jenkins在windows下的安装 2016年04月21日 13:00:09 阅读数:22828 在初步了解了jenkins是什么?jenkins的特点.基本结构,及大概的功能介绍后,就开始对je ...

  9. 一个比ack速度快n倍的代码搜索工具: ag

    一个比ack速度快n倍的代码搜索工具:  ag 银搜索者(The Silver Searcher) 一个类似于代码搜索工具ack,着重于速度. Github:   https://github.com ...

  10. Python并发编程之从生成器使用入门协程(七)

    大家好,并发编程 进入第七篇. 从今天开始,我们将开始进入Python的难点,那就是协程. 为了写明白协程的知识点,我查阅了网上的很多相关资料.发现很难有一个讲得系统,讲得全面的文章,导致我们在学习的 ...