此文首发于个人博客 http://www.xhcoder.com/
同步和异步的区别
同步的思想是所有的操作都做完，才返回给用户。这样用户在线等待的时间太长，给用户一种卡死了的感觉（就是系统迁移中，点击了迁移，界面就不动了，但是程序还在执行，卡死了的感觉）。这种情况下，用户不能关闭界面，如果关闭了，即迁移程序就中断了。
异步是将用户请求放入消息队列，并反馈给用户，系统迁移程序已经启动，你可以关闭浏览器了。然后程序再慢慢地去写入数据库去。这就是异步。但是用户没有卡死的感觉，会告诉你，你的请求系统已经响应了。你可以关闭界面了。
同步，是所有的操作都做完，才返回给用户结果。即写完数据库之后，在相应用户，用户体验不好。
异步，不用等所有操作等做完，就相应用户请求。即先相应用户请求，然后慢慢去写数据库，用户体验较好。
前端发送数据的方式：
前端发送数据到后端，一是通过form表单来进行提交数据，还有一种是通过ajax来提交数据。这里我简单说一下如何使用ajax来发送数据。
ajax：异步的JavaScript和xml的简称。通过ajax可以实现在当前页面直接提交数据到后台服务器，并且局部更新UI。
下面介绍一下异步登录的具体实现
HTML中的代码：
//一些简单的input框
<input type="text" id="username" placeholder="用户名"><br/><br/>
<input type="password" id="password" placeholder="密码"><br/><br/>
<input id="login" type="button" value="登录">
ajax部分的代码：
<script>
$(function(){
//jQuery中的oncilck点击事件，'#login'为选择id为login的元素
$('#login').on('click', function(){
var username = $('#username').val();
var password = $('#password').val();
$.ajax({
type: 'POST',
url: "login.php",
data: {username: username, password: password},
dataType: 'json',
success: function(status){
if (status == 1) {
alert("登录成功");
window.location.href="next.html";
} else {
alert("登录失败");
}
}
});
})
})
</script>
其中，type为传输数据的类型，url为数据要提交到的为置，data为提交的数据，这个数据必须是json格式，即键值对，冒号前是参数名，冒号后是参数值。dataType为数据类型，json。success后面的函数为如果数据提交成功并有返回值时执行的函数。
login.php：
<?php
header("Content-Type: text/html;charset=utf-8");
$username = $_POST['username'];//获取username的值
$password = $_POST['password'];//获取password的值
if($username==123&&$password==456)
$status=1;//登录成功
else
$status=0;//登录失败
echo json_encode($status);//将返回结果转为json格式
?>
基本流程就这样子，前端输入用户名和密码，点击按钮，获取值，组装json，然后发送到后台，后台获取到结果，返回一个json对象，前端再成功的回调函数里解析json，将服务器返回的结果alert出来。这里我是用php处理ajax传来的数据，其实还可以用java等
我这里是判断的如果用户名为123，密码为456的时候登录成功，其实真正的应该是连接数据库到数据库里去比较用户名和密码
我这里是直接用ajax提交input框中的数据，但是在项目中都是用ajax提交form表单中的数据实现异步登录，原理一样，关于ajax提交form表单的数据后续更新！
还有一个非常重要的问题是我这里采用的是jquery封装的ajax，所以必须引用jQuery的插件
代码如下：
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
ajax是前端和后端工程师都必备的技术，希望能通过这个小例子能理解一些ajax的工作原理
此文首发于个人博客 http://www.xhcoder.com/
