原生js上传文件 发送JSON，XML，对请求的表单进行URL编码详解

application/x-www-form-urlencoded

/*
 *	编码对象的属性
 *	如果它们是来自HTML表单的名/值对，使用application/x-www-form-urlencolded
 *	将键值对转换为HTTP的编码方式的一个工具函数
 */

function encodeFormData(data) {
	if (!data) return '';	// 如果传入为空，直接返回字符串
	var pairs = [];	// 保存名/值对
	for(var name in data) {	// 进行遍历
		if (!data.hasOwnProperty(name))	continue;	// 跳过继承属性,指示自身的属性是否具有该值
		if (typeof data[name] === 'function') continue;	// 跳过方法
		var value = data[name].toString();	// 将值转换成字符串
		name = encodeURIComponent(name.replace('%20', '+'));	
		value = encodeURIComponent(value.replace('%20', '+'));
		pairs.push(name + '=' + value);	// 记住名值对
	}

	return pairs.join('&');	// 进行连接
}

function postData(url, data, callback) {
	var request = new XMLHttpRequest();	// 新建一个类
	request.open("post", url);
	request.onreadystatechange = () => {
		if (request.readyState === 4 && callback) {
			callback(request);	// 调用回调函数
		};
		request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		
	}
	request.send(encodeFormData(data));
}

var e = {e:2222220};
postData('./', e);

function getData(url, data, callback) {
	var request = new XMLHttpRequest();
	request.open('GET', url + '?' + encodeFormData(data));
	request.onreadystatechange = () => {
		if (request.readyState === 4 && callback) {
			callback(request);
		}
	}
	request.send(null);
}

application/json

function postJSON(url, data, callback) {
	var request = new XMLHttpRequest();
	request.open('post', url);
	request.onreadystatechange = () => {
		if (request.readystate === 4 && callback) {
			callback(request);
		};
	}
	request.setRequestHeader('Content-Type', 'application/json');
	request.send(JSON.stringify(data))
}

psotJSON('./', e);

function postQuery(url, what, where, radius, callback) {
	var request = new XMLHttpRequest();	
	request.open('post', url);	// 对指定的url发送POST请求
	request.onreadystatechange = () => {
		if (request.readyState === 4 && callback) callback(request);
	}

	// 下面开始使用XML
	var doc = document.implementation.createDocument('', 'query', null);	// document.implementaton 返回一个DOMImplementation对象，该对象和当前文档的节点没有任何关系（类似于一个虚拟节点）其根节点为qqery 并且没有声明
	var query = doc.documentElement;	// 返回文档的根元素
	var find = doc.createElement('find');	// 创建一个find元素
	query.appendChild(find);	// 让find成为query的子节点
	find.setAttribute('zipcode', where);	// 创建一个属性
	find.setAttribute('radius', radius);	
	find.appendChild(doc.createTextNode(what));	// what作为文本节点，并且设置为find的子节点

	// 现在向服务器发送XML编码的数据
	// 将会自动设置Content-Type头
	request.send(doc);
};

postQuery('./', 'hello', 'world', 'world');

multipart/form-data

function postFormData(url, data, callback) {
	if (typeof FormData === 'undefined') { 	// 兼容，判断该api是否存在
		throw new Error('not FormData');
	}

	var request = new XMLHttpRequest();
	request.open('post', url);
	request.onreadystechange = () => {	// 当响应完成的时候，回调函数
		if (request.readyState === 4 && callback)
			callback(request);	// 如果存在，则调用回调函数
	};
	var formdata = new FormData();	// 创建文件上传的类
	for(var name in data) {
		if (!data.hasOwnProperty(name)) continue;	// 跳过继承的属性
		var value = data[name];	// 取值
		if (typeof value === 'function') continue;	// 跳过方法
		// 将其键值对插入节点中
		formdata.append(name, value);	// 添加键值对作为子节点
	}
	// 由于使用FormData将会自动设置头部信息
	// 将键值对作为主体进行发送
	request.send(formdata);
}

postFormData('./', '11111111111111');