2019-07-18 JS（Location 对象、表单、FormData）

（本文摘录于阮一峰老师所写文章，https://wangdoc.com/javascript/basic/index.html，作个人学习使用。）

Location对象

1、URL 是互联网的基础设施之一。浏览器提供了一些原生对象，用来管理 URL。
Location对象是浏览器提供的原生对象，提供 URL 相关的信息和操作方法。通过window.location和document.location属性，可以拿到这个对象。

2、URL的编码和解码
除了规定的合法字符（URL元字符和语义字符），其他字符出现在 URL 之中都必须转义，规则是根据操作系统的默认编码，将每个字节转为百分号（%）加上两个大写的十六进制字母。

JavaScript 提供四个 URL 的编码/解码方法：
（1）encodeURI()：用于转码整个 URL。它的参数是一个字符串，代表整个 URL。它会将元字符和语义字符之外的字符，都进行转义。
（2）encodeURIComponent()：用于转码 URL 的组成部分，会转码除了语义字符之外的所有字符，即元字符也会被转码。所以，它不能用于转码整个 URL。它接受一个参数，就是 URL 的片段。
（3）decodeURI()
（4）decodeURIComponent()

表单、FormData

3、表单（

）用来收集用户提交的数据，发送到服务器。如果是 GET 方法，所有键值对会以 URL 的查询字符串形式，提交到服务器；如果是 POST 方法，所有键值对会连接成一行，作为 HTTP 请求的数据体发送到服务器。

表单数据以键值对的形式向服务器发送，这个过程是浏览器自动完成的。但是有时候，我们希望通过脚本完成过程，构造和编辑表单键值对，然后通过XMLHttpRequest.send()方法发送。浏览器原生提供了 FormData 对象来完成这项工作。

4、自动校验：如果一个控件通过验证，它就会匹配:valid的 CSS 伪类，浏览器会继续进行表单提交的流程。如果没有通过验证，该控件就会匹配:invalid的 CSS 伪类，浏览器会终止表单提交，并显示一个错误信息。

手动校验：表单元素和表单控件都有checkValidity()方法，用于手动触发校验。

5、enctype 属性：表单能够用四种编码，向服务器发送数据。编码格式由表单的enctype属性决定。enctype属性决定了 HTTP 头信息的Content-Type字段的值。
（1）GET 方法：如果表单使用GET方法发送数据，enctype属性无效。数据将以 URL 的查询字符串发出。
（2）application/x-www-form-urlencoded：如果表单用POST方法发送数据，并省略enctype属性，那么数据以application/x-www-form-urlencoded格式发送（因为这是默认值）。
（3）text/plain：如果表单使用POST方法发送数据，enctype属性为text/plain，那么数据将以纯文本格式发送。
（4）multipart/form-data：如果表单使用POST方法，enctype属性为multipart/form-data，那么数据将以混合的格式发送。这种格式也是文件上传的格式。