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。
网友评论