用了一段时间的Ajax,感觉有很多的不足之处,于是就封装原生了 XMLHttpRequest 。

  废话不多说,直接上代码。

  

  1. var http = function () {
  2. 'use strict'; //strict mode
  3.  
  4. var get = function (options) {
  5. if (!options.url) throw "url is not defined";
  6. options.type = "get";
  7. request(options);
  8. };
  9.  
  10. var post = function (options) {
  11. if (!options.url) throw "url is not defined";
  12. options.type = "post";
  13. request(options);
  14. };
  15.  
  16. var fileUpload = function (options) {
  17. if (!options.url) throw "url is not defined";
  18.  
  19. var _form = new FormData();
  20. _form.append("file", options.file);
  21. if (options.data) {
  22. for (var i in options.data) {
  23. _form.append(i, options.data[i]);
  24. }
  25. }
  26. var _url = options.url;
  27. var _xhr = new XMLHttpRequest();
  28. var _async = true;
  29. if (typeof options.async == "boolean") _async = options.async;
  30. _xhr.open("post", _url, _async);
  31. if (options.header) {
  32. var _header = options.header;
  33. for (var i in _header) {
  34. _xhr.setRequestHeader(i, _header[i]);
  35. }
  36. }
  37. _xhr.onload = function (result) {
  38. if (result && result.target.responseText) {
  39. if (result.target.status == ) {
  40. try {
  41. var _data = JSON.parse(result.target.responseText);
  42. if (typeof options.success == "function") options.success(_data);
  43. } catch (e) {
  44. if (typeof options.success == "function") options.success(result.target.responseText);
  45. }
  46. } else {
  47. alert("Error : " + result.target.status + "(" + result.target.statusText + ")");
  48. if (typeof options.error == "function") options.error(result.target.responseText);
  49. }
  50. }
  51. };
  52. _xhr.send(_form);
  53. _xhr.onloadend = function () {
  54. _xhr = null;
  55. }
  56. };
  57.  
  58. return {
  59. get: get,
  60. post: post,
  61. fileUpload: fileUpload
  62. }
  63.  
  64. function request(options) {
  65. var _xhr = new XMLHttpRequest();
  66. var _sendstr = formRequestData(options.data);
  67. if (options.setTimeout) {
  68. _xhr.timeout = options.setTimeout;
  69. }
  70. else _xhr.timeout = 18e4; //Default mode for time out is 3 minute.
  71.  
  72. var _async = true;
  73. if (typeof options.async == "boolean") {
  74. _async = options.async;
  75. if (_async == false) _xhr.timeout = ; //Synchronous request for time out must be set 0. Details view https://www.w3.org/TR/XMLHttpRequest/
  76. }
  77.  
  78. if (options.type == "get") {
  79. if (_sendstr) options.url = options.url + "?" + _sendstr;
  80. }
  81.  
  82. _xhr.open(options.type, options.url, _async);
  83. _xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
  84. if (options.header) {
  85. var _header = options.header;
  86. for (var i in _header) {
  87. _xhr.setRequestHeader(i, _header[i]);
  88. }
  89. }
  90.  
  91. if (typeof options.beforeSend == "function") options.beforeSend(_xhr);
  92.  
  93. _xhr.onload = function (result) {
  94. if (result && result.target.responseText) {
  95. if (result.target.status == ) {
  96. try {
  97. var _data = JSON.parse(result.target.responseText);
  98. if (typeof options.success == "function") options.success(_data);
  99. } catch (e) {
  100. if (typeof options.success == "function") options.success(result.target.responseText);
  101. }
  102. } else {
  103. alert("Error : " + result.target.status + "(" + result.target.statusText + ")");
  104. if (typeof options.error == "function") options.error(result.target.responseText);
  105. }
  106. }
  107. };
  108.  
  109. _xhr.ontimeout = function (e) {
  110. if (typeof options.timeout == "function") options.timeout(e);
  111. _xhr.abort();
  112. alert("Request timeout.");
  113. }
  114.  
  115. _xhr.onabort = function (e) {
  116. if (typeof options.abort == "function") options.abort(e);
  117. }
  118.  
  119. _xhr.send(_sendstr);
  120.  
  121. _xhr.loadend = function () {
  122. _xhr = null; //Close the XMLHttpRequest.
  123. }
  124. }
  125.  
  126. function formRequestData(data) {
  127. var _sendstr = null;
  128. if (data) {
  129. _sendstr = '';
  130. for (var i in data) {
  131. _sendstr += (_sendstr ? '&' : '') + i + '=' + encodeURIComponent(data[i]);
  132. }
  133. }
  134. return _sendstr
  135. }
  136. }();

  代码写的不好......大神勿喷!

基于原生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. kubernets全套笔记

    Master/node Master核心组件: API server,Scheduler,Controller-Manager  etcd(存储组件) Node核心组件:  kubelet(核心组件) ...

  2. python cv2的视频检测:睁眼闭眼

    如题,想实现一个简单的根据摄像头的某一帧检测睁眼闭眼的功能. 初步的想法是: 1. cv2调用计算机摄像头,读取某一帧的画面. 2. 将该画面作为 哈尔-人脸分类器的输入接口,根据分类器结果返回分类的 ...

  3. (转) IntelliJ IDEA2018激活

    IntelliJ IDEA2018破解教程 破解方法:下载破解补丁→修改配置文件→输入激活码→激活成功 由于JetBrains封杀,大部分激活服务器已经不能使用,使用下面的比较麻烦的方法也可以进行破解 ...

  4. Eclipse/MyEclipse超全常用快捷键汇总,绝对实用

    [MyEclipse CI 2019.4.0安装包下载] Eclipse的编辑功能非常强大,掌握了Eclipse快捷键功能,能大大提高开发效率.Eclipse中有如下一些和编辑相关的快捷键. 常用快捷 ...

  5. 树莓派GPIO引脚标识图

  6. 5. ClustrixDB SQL语法

    CustrixDB支持的DML语法 SELECT, DISTINCT, [LEFT | RIGHT | OUTER] JOIN, STRAIGHT_JOIN UNION, HAVING, GROUP ...

  7. matlab中画三维图形

    这里主要讲述两个方法用matlab画三维图形: 1.mesh函数 先看一个简单的例子: x = ::; y = ::; [X, Y] = meshgrid(x, y); Z = zeros(,); Z ...

  8. Mysql5.7.26解压版(免安装版)简单快速配置步骤,5分钟搞定(win10-64位系统)

    第一次安装mysql环境的时候,总会遇到各种各样的坑,在尝试了安装版和解压版的数据库之后,感觉mysql的解压版更加的简单方便,省去好多时间做专业的事情 我这里选择的是5.7.26版本,解压版下载地址 ...

  9. [luogu]P1800 software_NOI导刊2010提高(06)[DP][二分答案]

    [luogu]P1800 software_NOI导刊2010提高(06) 题目描述 一个软件开发公司同时要开发两个软件,并且要同时交付给用户,现在公司为了尽快完成这一任务,将每个软件划分成m个模块, ...

  10. java把含小数点的数字字符串转换为int类型

    String num ="1.00"; int abc =Double.valueOf(num).intValue();//转换为Int类型