前后端分离关键技术

前后端分离需要考虑以下几个问题：

• 表单提交之后，前端的URL就被后台控制了
  一切提交表单都不能直接submit，要把表单数据通过ajax提交，而不能form.submit
  ajax提交表单的方式把url的控制权保留在了前端手中
• 前后端分离之后，如何让多个html页面共用header，footer等公共部分
  通过组件（component）的方式，组件之间构成了一个树形结构。
• 前后端分离之后，URL如何跳转
  前后端分离之后，整个前端就变成了SPA（单页面应用），就像一个手机APP一样，只有一个index.html，一切路由都是由前端js通过history控制的。

传统的网站开发方式是MVC，一切html界面都必须是由后端来控制显示的，一切html页面皆是模板。不能直接访问模板，而必须通过后端Servlet来访问模板。掌握这条准则，就能在后端游刃有余。

在前后端分离中，前端就像一个Android手机。Android手机发出的HTTP完全是AJAX方式的。
传统的表单提交通过action来控制表单提交的目标URL，提交之后，URL跳转的权限就完全交给后端了。

function doUpload() {  
     var formData = new FormData($( "#uploadForm" )[0]);  // 要求使用的html对象
     $.ajax({  
          url: 'http://localhost:8080/cfJAX_RS/rest/file/upload' ,  
          type: 'POST',  
          data: formData,  
          async: true,  
          // 下面三个参数要指定，如果不指定，会报一个JQuery的错误 
　　　　　cache: false,  
          contentType: false,  
          processData: false,  
          success: function (returndata) {  
              alert(returndata);  
          },  
          error: function (returndata) {  
              alert(returndata);  
          }  
     });  
}

FormData还可以使用纯的js方式编写。

构造函数
new FormData (optional HTMLFormElement form)
参数
form
(可选) 一个HTML表单元素,可以包含任何形式的表单控件,包括文件输入框.
方法
append()
给当前FormData对象添加一个键/值对.

void append(DOMString name, Blob value, optional DOMString filename);
void append(DOMString name, DOMString value);
参数值
name
字段名称.
value
字段值.可以是,或者一个字符串,如果全都不是,则该值会被自动转换成字符串.
filename(可选)
　　 指定文件的文件名,当value参数被指定为一个Blob对象或者一个File对象时,该文件名会被发送到服务器上,对于Blob对象来说,这个值默认为"blob".