前后端交互深究

前后端交互深究

1. 默认的表单提交请求

1.1 表单的GET请求

表单请求为GET请求方式时，表单的数据会以键值对的方式（name对应value）添加到URL后面，所以不安全，一般用于获取数据，传入特定参数，后端根据接收到的参数到数据库中查找数据再返回给客户端

Node服务端（Express框架）可以通过req.query来获取GET请求发送给服务端的数据（对象形式）

1.2 表单的POST请求

表单请求为POST请求时，表单数据不会添加到URL后面，而且理论上传输的数据量是无限的，所以一般用于传输数据给服务端

Node服务端（Express框架）借用第三方中间件body-parser可以通过req.body获取数据（对象形式）

1.3 表单的enctype属性

该属性规定在发送到服务器之前应该如何对表单数据进行编码

默认值为“application/x-www-form-urlencoded”，指在发送到服务器之前，所有字符都会进行编码：空格转换为”+“加号，特殊字符转换为ASCII HEX值

当使用multiparty/form-data时，传输的一般都是文件，图片，音乐等等非文本值，传输的方式是以二进制数据传输给服务端的，在服务端（Express框架）只能用以下方式读取到数据：

app.post('/',function(req,res){
   
    req.on('data',function(data){
   
        console.log(data);//二进制数据
        console.log(data.toString());//转换为字符串格式
    });
});

当使用text/plain时，传输的方式也是二进制数据传输，在服务端也只能以上面的这个方式读取到数据

强烈建议：一般情况下，使用默认值application/x-www-form-urlencoded即可，也是最佳方案，因为便于服务端接收数据，1.1与1.2的例子都是默认值情况下传输数据的，对服务端很友好。对于表单中存在file控件时，就得使用属性值multipart/form-data（必须），服务端接收数据就得使用上述方法。对于需要发送邮件时就得使用第三种属性值，否则会出现接收时编码错误情况（在网上看的，具体的没有实践）

2. AJax请求（同源政策限制）

2.1 GET请求

在Ajax中，GET请求与表单中GET请求大同小异，不同的是就是得将传输的数据手动添加到URL后且要符合格式

在Node服务端同样的得用req.juery来取得数据

2.2 POST请求

POST请求与表单中POST请求大部分相同，不同的是客户端得对传输给服务端的数据自己进行设置

在Ajax中，POST请求发送数据通过send方法

经了不起的在下实践，目前有两种方法比较友好：

2.2.1 application/x-www-form-urlencoded格式

var xhr=new XMLHttpRequest();
xhr.<