2019-07-26

此文首发于个人博客 http://www.xhcoder.com/

同步和异步的区别

同步的思想是所有的操作都做完，才返回给用户。这样用户在线等待的时间太长，给用户一种卡死了的感觉（就是系统迁移中，点击了迁移，界面就不动了，但是程序还在执行，卡死了的感觉）。这种情况下，用户不能关闭界面，如果关闭了，即迁移程序就中断了。

异步是将用户请求放入消息队列，并反馈给用户，系统迁移程序已经启动，你可以关闭浏览器了。然后程序再慢慢地去写入数据库去。这就是异步。但是用户没有卡死的感觉，会告诉你，你的请求系统已经响应了。你可以关闭界面了。

同步，是所有的操作都做完，才返回给用户结果。即写完数据库之后，在相应用户，用户体验不好。

异步，不用等所有操作等做完，就相应用户请求。即先相应用户请求，然后慢慢去写数据库，用户体验较好。

前端发送数据的方式：
前端发送数据到后端，一是通过form表单来进行提交数据，还有一种是通过ajax来提交数据。这里我简单说一下如何使用ajax来发送数据。
ajax：异步的JavaScript和xml的简称。通过ajax可以实现在当前页面直接提交数据到后台服务器，并且局部更新UI。

下面介绍一下异步登录的具体实现
HTML中的代码：

//一些简单的input框

ajax部分的代码：

其中，type为传输数据的类型，url为数据要提交到的为置，data为提交的数据，这个数据必须是json格式，即键值对，冒号前是参数名，冒号后是参数值。dataType为数据类型，json。success后面的函数为如果数据提交成功并有返回值时执行的函数。

login.php：

基本流程就这样子，前端输入用户名和密码，点击按钮，获取值，组装json，然后发送到后台，后台获取到结果，返回一个json对象，前端再成功的回调函数里解析json，将服务器返回的结果alert出来。这里我是用php处理ajax传来的数据，其实还可以用java等

我这里是判断的如果用户名为123，密码为456的时候登录成功，其实真正的应该是连接数据库到数据库里去比较用户名和密码

我这里是直接用ajax提交input框中的数据，但是在项目中都是用ajax提交form表单中的数据实现异步登录，原理一样，关于ajax提交form表单的数据后续更新！

还有一个非常重要的问题是我这里采用的是jquery封装的ajax，所以必须引用jQuery的插件
代码如下：

ajax是前端和后端工程师都必备的技术，希望能通过这个小例子能理解一些ajax的工作原理

此文首发于个人博客 http://www.xhcoder.com/