用了一段时间的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. 基于zynq XC7Z100 FMC接口通用计算平台 XC7Z100

      一.板卡概述 本板卡基于Xilinx公司的FPGA XC7Z100 FFG 9000 芯片, 该平台为设计和验证应用程序提供了一个完整的开发平台.该平台使设计师能够更加简单进行高性能的原型设计,并 ...

  2. python 重学

    -------------------------

  3. [易学易懂系列|rustlang语言|零基础|快速入门|(3)|所有权Ownership]

    今天我们来讲讲rust最难,也是最重要的概念: Ownership,Borrowing,Lifetimes 首先我们来看看:ownership(所有权) 我们来看看下面的代码: let a = [1, ...

  4. java高并发核心要点|系列3|锁的底层实现原理|ABA问题

    继续讲CAS算法,上篇文章我们知道,CAS算法底层实现,是通过CPU的原子指令来实现. 那么这里又有一个情景: 话说,有一个线程one从内存位置V中取出A,这时候另一个线程two也从内存中取出A,并且 ...

  5. C#基础知识之理解HTTP协议

    在互联网时代HTTP协议的重要性无需多言,对于技术岗位的同学们来说理解掌握HTTP协议是必须的.本篇博客就从HTTP协议的演进.特性.重要知识点和工作中常见问题的总结等方面进行简单的介绍.理解掌握了这 ...

  6. Luogu P3170 [CQOI2015]标识设计 状态压缩,轮廓线,插头DP,动态规划

    看到题目显然是插头\(dp\),但是\(n\)和\(m\)的范围似乎不是很小.我们先不考虑复杂度设一下状态试试: 一共有三个连通分量,我们按照\(1,2,3\)的顺序来表示一下.轮廓线上\(0\)代表 ...

  7. day_05 运算符 if和while的使用

    运算符: 1)算术运算符 + - * / %(取余) //(地板除,取整)**(幂运算) ,返回一个值 2)比较运算符 3) > >= < <= ==(比较值是否相等) !=( ...

  8. 【NOIP2016提高A组五校联考4】square

    题目 分析 首先,设\(f_{i,j}\)表示最大的以(i,j)为左下角的正方形的边长. 转移显然,\(f_{i,j}=\max(f_{i-1,j},f_{i,j-1},f_{i-1,j-1})+1\ ...

  9. Linux的目录结构与目录管理

    Linux的目录结构与目录管理 Linux目录结构: 目录创建的规则 FHS 文件系统层次化标准 指定了Linux操作系统,哪些目录是一定要具备的 /boot /bin /sbin /etc /sys ...

  10. js 获取dom 为null 测试

    <!DOCTYPE html> <html> <head> </head> <body> <h1> 这是H1 </h1&g ...