前后端分离

详解前后端分离

关于前后端分离这个名词想必很多IT人员都听过，但是什么是前后端分离，又为什么要实现前后端分离呢？
首先，我们对前端、后端和数据库进行一个大致的了解

前端的主要内容包括HTML+CSS+JavaScript，前端也就是我们常说的浏览器端(Browser)，后端的语言非常多，如PHP，Java，C++等，后端也是我们常说的服务器端(Server),我们知道的B/S开发，其实说的也就是浏览器向服务器端发送请求，服务器接收请求，并将从前端获得的数据接收，数据库返回相关数据回来，再由后端传给前端的过程。

在最开始前后端不分离的时候，前端页面看到的效果都是由后端控制的，由后端渲染页面或重定向，但是这种前后端不分离的模式使得二者的耦合度很高，那么对应的他们的独立性就不强了。我们知道，降低耦合度可以提高他的独立性，前后端分离正好可以在一定程度上降低他的耦合度。

那什么是前后端分离呢？就是后端无需在进行渲染页面等功能了，只需要将从数据库获取的信息返回给前端即可，我们通过异步接口，如ajax发送请求，将从后端请求来的数据呈现给用户。

又为什么要进行前后端分离呢？前端可以不用了解后端，不用知道后端是用什么技术来实现的，我们只需要知道HTML+css+JavaScript，后端也只是需要在意的是他们的后端技术，也不用在花大把时间深入学习前端的技术了。
以下是前后端交互的一个大致过程：

说到这里我们就需要谈到HTTP传输协议，它是前后端交互的一个规则，它的过程是首先建立连接，保证前后端可以进行正常的通信，其次是前端发送请求，每一个请求都是以报文的形式发送的，然后后端返回响应，每一个响应也是以报文的形式发送的，最后是断开连接，目的是为了断开连接。也就是我们常说的三次握手和四次挥手。

Ajax也是必不可少的一部分，是JavaScript和PHP交互的手段，Ajax是异步的XML和JavaScript交互的手段，我们需要利用ajax向后端发送请求，然后接收后端响应，他是前后端交互必不可少的一部分。说Ajax是异步的XML和JavaScript交互的手段，那什么又是XML呢，XML 是一种数据交互格式，特定格式的字符串；使用 XML进行数据交互，需要先将 XML 解析成 DOM文档，再从中提取数据，当然也可以使用json格式的。

下面，由小白用所学的皮毛来解释下大体的流程：
1.首先，我们需要一个服务器，是用来运行服务器端的代码的，我们需要有三种环境：Apache服务器或Nginx服务器，PHP后端语言以及MySQL数据库，由于单独安装非常麻烦，我是安装了phpstudy，这样三个环境都有了。
2.其次，我们安装成功之后，首先需要启动我们的phpstudy。
3.在我们的phpstudy的文件夹下面找到WWW的文件夹，在里面书写各种代码。
4.可直接通过本机域名对网页进行访问。
以登录为例，将书写代码供大家理解

//这是基础的登录页面，为了用户体验将错误的提示未用alert,而是换成span显示隐藏提示
<h1>我是 登录 页面</h1>
<form>
   <span>用户名或密码有误</span>
    用户名：<input type="text" class="username"><br /><br>
    密&nbsp;&nbsp;&nbsp;码：<input type="text" class="password"><br />
     <button>登录</button>
</form>

		var form=document