基于原生XMLHttpRequest封装
用了一段时间的Ajax,感觉有很多的不足之处,于是就封装原生了 XMLHttpRequest 。
废话不多说,直接上代码。
var http = function () {
'use strict'; //strict mode
var get = function (options) {
if (!options.url) throw "url is not defined";
options.type = "get";
request(options);
};
var post = function (options) {
if (!options.url) throw "url is not defined";
options.type = "post";
request(options);
};
var fileUpload = function (options) {
if (!options.url) throw "url is not defined";
var _form = new FormData();
_form.append("file", options.file);
if (options.data) {
for (var i in options.data) {
_form.append(i, options.data[i]);
}
}
var _url = options.url;
var _xhr = new XMLHttpRequest();
var _async = true;
if (typeof options.async == "boolean") _async = options.async;
_xhr.open("post", _url, _async);
if (options.header) {
var _header = options.header;
for (var i in _header) {
_xhr.setRequestHeader(i, _header[i]);
}
}
_xhr.onload = function (result) {
if (result && result.target.responseText) {
if (result.target.status == ) {
try {
var _data = JSON.parse(result.target.responseText);
if (typeof options.success == "function") options.success(_data);
} catch (e) {
if (typeof options.success == "function") options.success(result.target.responseText);
}
} else {
alert("Error : " + result.target.status + "(" + result.target.statusText + ")");
if (typeof options.error == "function") options.error(result.target.responseText);
}
}
};
_xhr.send(_form);
_xhr.onloadend = function () {
_xhr = null;
}
};
return {
get: get,
post: post,
fileUpload: fileUpload
}
function request(options) {
var _xhr = new XMLHttpRequest();
var _sendstr = formRequestData(options.data);
if (options.setTimeout) {
_xhr.timeout = options.setTimeout;
}
else _xhr.timeout = 18e4; //Default mode for time out is 3 minute.
var _async = true;
if (typeof options.async == "boolean") {
_async = options.async;
if (_async == false) _xhr.timeout = ; //Synchronous request for time out must be set 0. Details view https://www.w3.org/TR/XMLHttpRequest/
}
if (options.type == "get") {
if (_sendstr) options.url = options.url + "?" + _sendstr;
}
_xhr.open(options.type, options.url, _async);
_xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
if (options.header) {
var _header = options.header;
for (var i in _header) {
_xhr.setRequestHeader(i, _header[i]);
}
}
if (typeof options.beforeSend == "function") options.beforeSend(_xhr);
_xhr.onload = function (result) {
if (result && result.target.responseText) {
if (result.target.status == ) {
try {
var _data = JSON.parse(result.target.responseText);
if (typeof options.success == "function") options.success(_data);
} catch (e) {
if (typeof options.success == "function") options.success(result.target.responseText);
}
} else {
alert("Error : " + result.target.status + "(" + result.target.statusText + ")");
if (typeof options.error == "function") options.error(result.target.responseText);
}
}
};
_xhr.ontimeout = function (e) {
if (typeof options.timeout == "function") options.timeout(e);
_xhr.abort();
alert("Request timeout.");
}
_xhr.onabort = function (e) {
if (typeof options.abort == "function") options.abort(e);
}
_xhr.send(_sendstr);
_xhr.loadend = function () {
_xhr = null; //Close the XMLHttpRequest.
}
}
function formRequestData(data) {
var _sendstr = null;
if (data) {
_sendstr = '';
for (var i in data) {
_sendstr += (_sendstr ? '&' : '') + i + '=' + encodeURIComponent(data[i]);
}
}
return _sendstr
}
}();
代码写的不好......大神勿喷!
基于原生XMLHttpRequest封装的更多相关文章
- 基于原生JS封装数组原型上的sort方法
基于原生JS封装数组原型上的sort方法 最近学习了数组的原型上内置方法的封装,加强了用原生JS封装方法的能力,也进一步理解数组方法封装的过程,实现的功能.虽然没有深入底层,了解源码.以下解法都是基于 ...
- 用jQuery基于原生js封装的轮播
我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...
- python+selenium十:基于原生selenium的二次封装
from selenium import webdriverfrom selenium.webdriver.support.wait import WebDriverWaitfrom selenium ...
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
- 原生js封装ajax:传json,str,excel文件上传表单提交
由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(u ...
- 原生javascript封装ajax和jsonp
在我们请求数据时,完成页面跨域,利用原生JS封装的ajax和jsonp: <!DOCTYPE html> <html lang="en"> <head ...
- 原生Js封装的弹出框-弹出窗口-页面居中-多状态可选
原生Js封装的弹出框-弹出窗口-页面居中-多状态可选 实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出 ...
- 基于原生js的返回顶部组件,兼容主流浏览器
基于原生js的返回顶部插件,兼容IE8及以上.FF.chrome等主流浏览器. js文件中封装了getScrollTop()和changeScrollTop()函数分别用于获取滚动条滚动的高度和修改滚 ...
- python selenium基于显示等待封装的一些常用方法
import os import time from PIL import Image from selenium import webdriver from appium import webdri ...
随机推荐
- centos7搭建安装superset
superset官网: https://superset.incubator.apache.org/ 系统环境:system:centos7 一.安装工具及依赖包安装工具包:yum -y instal ...
- Linux20期学习笔记 Day1
Linux就该这么学第一章 1.4重置root管理员密码 放到红帽RHCSA考前辅导视频 源代码安装: 弊端:(好处第二章讲解) 1.难度高,安装困难 2.自己解决依赖关系(暂时不说) 新技术:RP ...
- linux vps定时备份网站、数据库命令sh
vps定时备份数据库命令,将下面的代码保存为backsql.sh,然后设置定时任务运行即可. cd /home/admin/backup #切换到备份目录 btimes=$(date +%y%m%d% ...
- Vue基础第二章
1.数据绑定与数据声明 Vue中的数据绑定就是让与Vue实例绑定的DOM节点或script标签内的变量之间数据更新互相影响,即数据绑定后Vue实例的数据修改会使DOM节点的数据或者script标签内的 ...
- 曝郭盛华公司30万美元收购Acn.ai域名,揭秘人工智能布局下的巨头们
据域名投资人曝料,郭盛华公司已经提前拿下.ai短域名 Acn.ai,目前域名已经设置跳转到东联科技的官网.都说域名越短越值钱,而且搜索引擎都喜欢更短的域名,例如京东更换的域名“jd.com”交易价格约 ...
- 【SpringBoot】spring-session-data-redis 解决集群环境下session共享
为什么会产生Session共享问题 集群情况下,session保存在各自的服务器的tomcat中,当分发地址至不同服务时,导致sesson取不到,就会产生session共享问题. 解决方案 负载均 ...
- 扑克牌中的顺子(网易2014.3.16笔试offerP226)
题目:从扑克牌中随机抽5张牌,判断是不是一个顺子,即这5张牌是不是连续的.2~10为数字本身,A为1,J~K为11,12,13,而大小王可以看成任意数字.(网易要求必须用C完成,可以用C库函数) ja ...
- The Preliminary Contest for ICPC Asia Shanghai 2019 J. Stone game
题目:https://nanti.jisuanke.com/t/41420 思路:当a(a∈S′)为最小值 如果Sum(S′)−a≤Sum(S−S′)成立 那么(∀t∈S′,Sum(S′)−t≤Sum ...
- 解决JavaServer Faces 2.2 requires Dynamic Web Module 2.5 or newer问题
** 错误1: **在eclipse中新创建一个web项目的时候项目下的JSP文件中会爆出错误:The superclass “javax.servlet.http.HttpServlet” was ...
- DFS-全排列
void dfs(int x) { if(x>n) { ;i<=n;++i) cout<<a[i]; cout<<endl; return; } ;i<=n; ...