基于原生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 ...
 
随机推荐
- SpringCloud系列:前言
			
准备写springcloud系列了,先吐槽下自己,之前准备把学到的东西写下来,都因为工作或自己太懒(主要还是懒),写了个开篇就GG了,这次springcloud一定会坚持写完.加油! 这里先说下我搭建 ...
 - linux 读取文本的最后几行
			
tail -n 100 filename 读取file的最后100行 tail: n. 尾巴:踪迹:辫子:燕尾服 vt. 尾随:装上尾巴 vi. 跟踪:变少或缩小 adj. 从后面而来的:尾部的 ...
 - Linux下vim显示行数
			
在Linux环境下的编辑器有vi.vim.gedit等等.进入这些编辑器之后,为了方便我们需要编辑器显示出当前的行号,可偏偏编辑器默认是不会显示行号的.我们有二种办法可以解决: 第一种是,手动显示:在 ...
 - Vue分割音乐歌词数据函数
			
parseLyric(lyric) { var lines = lyric.split(/\n/); //使用/n换行,将数据切成一个数组 var getLtricTime = ...
 - LaunchScreen 设置启动图片出现的问题
			
更换启动图片的时候出现了一系列的小问题,让人头疼,怀疑人生. 1.更换了图片,显示还是老的图片! -->重启手机,clean Xcode 2.设置布局的时候,请务必要这么布局,很完美! 如果你 ...
 - Java基本的程序结构设计  大数操作
			
大数操作 BigInteger 不可变的任意精度的整数.所有操作中,都以二进制补码形式表示 BigInteger(如 Java 的基本整数类型).BigInteger 提供所有 Java 的基本整数操 ...
 - springboot与spring比较区别
			
一.从一道面试题说起 面试的时候经常会被问到,spring和springboot的区别.或者SpringMVC和Springboot的区别.其实这样的问法就不是特别合适.因为spring.spring ...
 - 数据结构-STL序列式容器总结
			
根据序列在容器中的排列特性,将常见数据结构分为:序列式容器和关联式容器. 常见序列式容器有 1.array(build-in)c++內建 2.vector 3.heap(以算法方式呈现) 4.prio ...
 - 【leetcode】Find Largest Value in Each Tree Row
			
You need to find the largest value in each row of a binary tree. Example: Input: 1 / \ 3 2 / \ \ 5 3 ...
 - 部署jumpserver
			
参考:https://jumpserver.readthedocs.io/zh/master/setup_by_centos7.html yum update -y systemctl start f ...