用了一段时间的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封装的更多相关文章

  1. 基于原生JS封装数组原型上的sort方法

    基于原生JS封装数组原型上的sort方法 最近学习了数组的原型上内置方法的封装,加强了用原生JS封装方法的能力,也进一步理解数组方法封装的过程,实现的功能.虽然没有深入底层,了解源码.以下解法都是基于 ...

  2. 用jQuery基于原生js封装的轮播

    我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...

  3. python+selenium十:基于原生selenium的二次封装

    from selenium import webdriverfrom selenium.webdriver.support.wait import WebDriverWaitfrom selenium ...

  4. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  5. 原生js封装ajax:传json,str,excel文件上传表单提交

    由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(u ...

  6. 原生javascript封装ajax和jsonp

    在我们请求数据时,完成页面跨域,利用原生JS封装的ajax和jsonp: <!DOCTYPE html> <html lang="en"> <head ...

  7. 原生Js封装的弹出框-弹出窗口-页面居中-多状态可选

    原生Js封装的弹出框-弹出窗口-页面居中-多状态可选   实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出 ...

  8. 基于原生js的返回顶部组件,兼容主流浏览器

    基于原生js的返回顶部插件,兼容IE8及以上.FF.chrome等主流浏览器. js文件中封装了getScrollTop()和changeScrollTop()函数分别用于获取滚动条滚动的高度和修改滚 ...

  9. python selenium基于显示等待封装的一些常用方法

    import os import time from PIL import Image from selenium import webdriver from appium import webdri ...

随机推荐

  1. Librepilot-Spark2固件的烧写

    1.通过USB连接Librepilot_Spark2飞控,启动Librepilot GCS地面站(博主的GCS是16.09版本),界面如下. 2.点击Firmware标签页,点击终止系统(若板子未带系 ...

  2. (转) Weblogic 12c 集群部署和session复制

    1.启动服务 首先在weblogic12c控制台,启动受托管服务server1.server2.server3. 2.将要部署的应用打包成war文件. 我用的是MyEclipse做的开发,可以用其自带 ...

  3. web性能优化--算法优化(四)

    避免for-in 把数组长度保存在局部变量中 较少迭代次数(Duffs Device) 基于函数的循环比基于循环的迭代消耗性能更多 优化if-else,一般switch比if-else速度快(hash ...

  4. 【react学习二】create-react-app 接入antd 并按需加载组件

    1.安装 cnpm i babel-plugin-import --save-dev 2.使用 在根目录下的package.json下的bable中添加相应代码 "babel": ...

  5. conda Pyhon版本切换

    1.首先确保你的系统里已经安装了Conda,打开命令行窗口,执行命令:conda --version 2.查看你的系统当前已有的Python环境,执行命令:conda info --envs,从图中我 ...

  6. SpringCloud学习系列-Eureka服务注册与发现(1)

    1.Eureka的基本架构 Spring Cloud 封装了 Netflix 公司开发的 Eureka 模块来实现服务注册和发现(请对比Zookeeper). Eureka 采用了 C-S 的设计架构 ...

  7. springboot项目作为其他项目子项目

    <?xml version="1.0"?> <project xsi:schemaLocation="http://maven.apache.org/P ...

  8. 【leetcode】1105. Filling Bookcase Shelves

    题目如下: We have a sequence of books: the i-th book has thickness books[i][0] and height books[i][1]. W ...

  9. 14. ClustrixDB 高可用性的最佳实践

    本文档详细介绍了最大化ClustrixDB上运行的应用程序正常运行时间的最佳实践.这涵盖了广泛的主题,从环境需求到变更管理程序,所有这些最终都会影响应用程序的可用性.其中许多是您可能已经熟悉的标准最佳 ...

  10. org.thymeleaf.exceptions.TemplateProcessingException: Could not parse as expression:

    org.thymeleaf.exceptions.TemplateProcessingException: Could not parse as expression: