polyfill源码阅读(三)XHR

2019-04-16  本文已影响0人  Atlas_lili

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。

上一篇 下一篇

猜你喜欢

热点阅读