form表单提交、ajax、fetch、formdata，以及跨域

一.form表单提交

1.1 简单的介绍

<!-- form 表单post提交，默认会刷新到 action 页面 -->
    <form action="www.baidu.com" method="POST" name="post提交">
      <p>name: <input type="text" name="username"></p>
      <p>password: <input type="password" name="password"></p>
      <input type="submit" value="提交">
    </form>
    
<!-- form 表单get 提交, 默认刷新action 页面 -->
    <form action="www.baidu.com" method="GET" name="get提交">
      <p>name: <input type="text" name="username"></p>
      <p>password: <input type="password" name="password"></p>
      <input type="submit" value="提交">
    </form>

• form 的提交行为需要通过type=submit实现

• form 中的method 属性不指定时， form 默认的提交方式为 get请求。

• 表单提交时表单内容会被浏览器封装为HTTP请求报，里面包含了所有表单元素的name属性值和value属性的值，形式为name=value。

• form 表单的提交后会有默认行为，会跳转刷新到action 的页面

• 当一个form 表单内部，所有的input 中只有一个 type=‘text’ 的时候，enter 键会有默认的提交行为（注意前提条件）

• 组织默认行为可以在submit事件时retur false

1.2 编码方式提交表单数据

<form>标签的属性enctype设置以何种编码方式提交表单数据。可选的值有三个:
1.这是默认的编码方式。它只处理表单域里的value属性值，采用这种变法方式的表单会将表单域的值处理成URL方式。

   application/x-www-form-urlencoded:

2.这种编码方式会以二进制流的方式来处理表单数据，这中编码方式会把文件域指定的文件内容也封装到请求参数里。

  multipart/form-data: 

不用后台接受这样的数据，需要注意，接受的可能是：

------WebKitFormBoundaryQqpAxgR2Pgik6uyY

      Content-Disposition: form-data; name="f"; filename="hello.txt"

      Content-Type: application/octet-stream

这时需要处理，例如node可以采用formidabled或者multiparty插件处理

3.这种方式当表单的action属性值为mailto:URL的形式时比较方便，这种方式主要适用于直接通过表单发送邮件。

   text/plain:

1.3 form表单为何没有跨域限制

跨域问题只是浏览器强加给js的规则。浏览器强制不允许js访问别的域，但是浏览器却没有限制它自己。比如说img标签可以加载任何域的图片，script可以加载任何域的js。

form 提交是浏览器行为，提交到另一个域名之后，原页面的脚本无法获取新页面中的内容。所以浏览器认为这是安全的。

而 AJAX 是可以读取响应内容的，因此浏览器不能允许你这样做。如果你细心的话你会发现，其实请求已经发送出去了，你只是拿不到响应而已。所以浏览器这个策略的本质是，一个域名的 JS ，在未经允许的情况下，不得读取另一个域名的内容。但浏览器并不阻止你向另一个域名发送请求。

二.ajax

JavaScript执行异步网络请求。
如果仔细观察一个Form的提交，你就会发现，一旦用户点击“Submit”按钮，表单开始提交，浏览器就会刷新页面，然后在新页面里告诉你操作是成功了还是失败了。如果不幸由于网络太慢或者其他原因，就会得到一个404页面。

这就是Web的运作原理：一次HTTP请求对应一个页面。

如果要让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个新请求，接收到数据后，再用JavaScript更新页面，这样一来，用户就感觉自己仍然停留在当前页面，但是数据却可以不断地更新。

在现代浏览器上写AJAX主要依靠XMLHttpRequest对象：

var xhr=new XMLHttpRequest();

xhr.open("GET","ajax_info.txt",true);
xhr.send();
xhr.onreadystatechange=function (){
   
   if(xhr.readyState==4){
   
     if(xhr.status>=200 && xhr.status<300 || xhr.status==304){
   
       alert('成功');
       let json=JSON.parse(<