美文网首页
polyfill源码阅读(三)XHR

polyfill源码阅读(三)XHR

作者: Atlas_lili | 来源:发表于2019-04-16 13:49 被阅读0次

XHR部分主要处理对IE行为的兼容。

(function(global) {
  'use strict';
  if (!('window' in global && 'document' in global))
    return;
   // do something
})(self)

上来就是一段对传入环境的判断,看起来比较熟悉。

global.XMLHttpRequest = global.XMLHttpRequest || function() {
    try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch (_) { }
    try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch (_) { }
    try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (_) { }
    throw Error("This browser does not support XMLHttpRequest.");
  };

首先对ajax依赖的XHR对象做IE各版本的兼容。

[
    ['UNSENT', 0],
    ['OPENED', 1],
    ['HEADERS_RECEIVED', 2],
    ['LOADING', 3],
    ['DONE', 4],
  ].forEach(function(p) { if (!(p[0] in global.XMLHttpRequest)) global.XMLHttpRequest[p[0]] = p[1]; });

然后是对请求进度的状态码的补全(联想到使用时等于四响应状态200)。

FormData

  (function() {
    if ('FormData' in global)
      return;
    function FormData(form) {
      this._data = [];
      if (!form) return;
      for (var i = 0; i < form.elements.length; ++i) {
        var element = form.elements[i];
        if (element.name !== '')
          this.append(element.name, element.value);
      }
    }
    FormData.prototype = {
      append: function(name, value /*, filename */) {
        if ('Blob' in global && value instanceof global.Blob)
          throw TypeError("Blob not supported");
        name = String(name);
        this._data.push([name, value]);
      },

      toString: function() {
        return this._data.map(function(pair) {
          return encodeURIComponent(pair[0]) + '=' + encodeURIComponent(pair[1]);
        }).join('&');
      }
    };
  }());

formData用于提取表单元素中的键值对,值得注意的是它用了二维数组而不是对象。

global.FormData = FormData;
    var send = global.XMLHttpRequest.prototype.send;
    global.XMLHttpRequest.prototype.send = function(body) {
      if (body instanceof FormData) {
        this.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        arguments[0] = body.toString();
      }
      return send.apply(this, arguments);
    };

最后定制了send对表单提交的表现,(设置请求头),然后调用原生send。

相关文章

  • polyfill源码阅读(三)XHR

    XHR部分主要处理对IE行为的兼容。 上来就是一段对传入环境的判断,看起来比较熟悉。 首先对ajax依赖的XHR对...

  • Polyfill源码阅读

    Polyfill源码阅读 自己作为前端大半年的新手,刚刚红皮书看完,开始看一些比较浅层次的源码,来加深对于规范的理...

  • polyfill源码阅读(二)HTML

    html部分主要是修改不同浏览器的API的怪异行为。 一段自执行函数的模块封装,内加执行环境的判断确保后面代码的安...

  • polyfill源码阅读(五)dom二

    CustomEvent 创建一个自定义事件。 用了一个createEvent定义事件,initCustomEven...

  • vue学习1

    Vue源码学习 基本函数 bind的polyfill方案 once方法 generateComponentTrac...

  • polyfill源码阅读(一)ES5

    这是蚂蚁面试官推荐我读的一个项目的源码,可能因为代码结构比较简单,主要解决兼容性,对于前端小白来说比较有用吧。 O...

  • Promise-Polyfill源码解析(2)

    在上篇文章Promise-Polyfill源码解析(1)详细分析了Promise构造函数部分的源码,本篇我们继续分...

  • polyfill源码阅读(四)cssom和dom一

    cssom Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。...

  • Ajax-----XHR

    一:概念: 以前没有XHR对像,IE5,6就没有 二:创建XHR对像 兼容性写法如下: 三:XHR发送请求 四:X...

  • vue在IE11下打开页面空白问题解决

    安装 babel-polyfill 安装 babel-polyfill 。 babel-polyfill可以模拟E...

网友评论

      本文标题:polyfill源码阅读(三)XHR

      本文链接:https://www.haomeiwen.com/subject/bxvvwqtx.html