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

编码请求主体

HTTP的POST请求包括一个请求主体,将会包含客户端传递给服务器的数据,

表单编码的请求

HTML表单,当用户提交表单时,表单中的数据将会编码到字符串中,一并伴随着请求发送。

默认情况下HTML表单通过POST方法发送给服务器,而编码后的表单数据为请求主体。

规则:使用URL编码,使用等号把编码后的名字和值分开,并使用&符号将名/值对分开。

如下所示: find=pizza&zipcode=02134&redius=1km

表单数据编码格式会有一个正式的MIME类型

application/x-www-form-urlencoded

MIME 多用途internet邮件扩展类型,对大小写不敏感,传统写法小写

一个栗子

用于HTTP请求的编码对象

/*
 *	编码对象的属性
 *	如果它们是来自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('&');	// 进行连接
}

上方代码将传入的键值对,转换为url的方式提交

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));
}

上方的代码将会发送一个post请求,将键值对转换为标准的url进行提交

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

查看一下post请求结果

undefined

同样的get请求

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);
}

效果如下

undefined

JSON编码

需要在将其更改为

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);

undefined

XML编码请求

xml文档作为主体的HTTP POST请求

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');

打开网络面板查看

undefined

multipart/from-data 请求

当HTML表单包含文件上传元素的时候,表单需要使用二进制上传,即

multipart/form-data

使用post方法发送multipart/form-data请求主体

XHR 为一种简称,全称为XMLHttpRequest

将会以一个字节一个字节发送

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');

undefined

undefined

undefined

undefined

undefined

undefined

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

让fetch也可以timeout

本文作者:IMWeb zzbozheng 原文出处:IMWeb社区 未经同意,禁止转载 原生的HTML5 API fetch并不支持timeout属性...

2265
来自专栏JackeyGao的博客

使用Vue.js 和 semantic-ui 的一个简单TODO List

这是一个完全仿照官网案例的项目, 主要为了熟悉vue.js的基本用法, 不得不说这个案例能吸收到基本的vue.js 操作.

1232
来自专栏前端新视界

关于 devbridge-autocomplete 插件多选操作的实现方法

目前据我所知最好用的 autocomplete 插件就是 jquery-ui 的 autocomplete 以及 devbridge 的 autocomplet...

2058
来自专栏性能与架构

【教程】快速掌握ES6 javascript常用新特性

主要内容 介绍7个 ES6 中常用的新特性 Let 和 const 箭头函数 => 默认参数 解构 ... object 便捷写法 模板字符 `` 学习时间半小...

3295
来自专栏老马寒门IT

jQuery的ajax详解

jQuery内部也封装了对原生ajax请求的方法,可以很方便我们的对后台异步请求处理。

1170
来自专栏数据之美

shell 学习笔记(16)

转载请注明出处: https://cloud.tencent.com/developer/user/1177713/activities 注:以前的1-15连载...

33610
来自专栏海天一树

小朋友学C语言(16):斐波那契数列的非递归实现

一、斐波那契简介 斐波那契数列指的是这样一个数列 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233,377,610,...

3628
来自专栏禅林阆苑

vim按键整理 【原创】

vim按键整理 Write By CS逍遥剑仙 我的主页: www.csxiaoyao.com GitHub: github.com/csxi...

35010
来自专栏一个会写诗的程序员的博客

jQuery ajax - ajax() 方法jQuery ajax - ajax() 方法

http://www.w3school.com.cn/jquery/ajax_ajax.asp

1393
来自专栏大内老A

ASP.NET MVC的客户端验证:jQuery验证在Model验证中的实现

在简单了解了Unobtrusive JavaScript形式的验证在jQuery中的编程方式之后,我们来介绍ASP.NET MVC是如何利用它实现客户端验证的。...

2026

扫码关注云+社区

领取腾讯云代金券