Ajax

Ajax

Ajax 全称 Asynchronous Javascript and xml，在前提不刷新页面的情况下，Javascript 和 xml 可以异步实现和后台数据库简单、少量的数据交互。

异步和同步

这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面出现假死状态，当这个AJAX执行完毕后才会继续运行其他代码页面假死状态解除。(在请求返回之前线程会一直阻塞，如果请求是在主线程中发起的，那就会造成整个浏览器阻塞。) 而异步则是这个AJAX代码运行中的时候其他代码一样可以运行。
XMLHttpRequest的 async这个属性 默认是true：异步，false：同步。

Ajax的作用

那么Ajax 有何作用呢 ？在没有Ajax之前，如果你想要在某一个网站上面注册成为该网站的会员，那么你必须将所有的表单项填写完了之后，交给后台进行处理（期间你不知道用于输入的信息是否正确）。由于HTTP协议的不可持续性，(如果都填写对了还好)在后台将数据返回并告诉你其中一个表单项填写错误的时候，这时候浏览器已经刷新页面了，而你不得不重新填写，这时候我想你的内心是崩溃的。而此时Ajax便孕育而生，就是在你填写某一个表单项的时候，我们可以向服务器端发送一些简单的数据，从而让服务器端告诉我们填写的时候正确等。而我们也不用必须等到全部填写完成才提交数据和等待服务器端的反馈了。

前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？

前后端联调的时候需要前后端明确：
1. 传输的类型（GET 还是 POST）
2. 传输的地址 （URL）
3. 返回的数据类型 (JSON TEXT JSONP)

在后台接口完成前，可以使用node.js搭建后台模拟数据

brew cask install node 
npm install -g server-mock

mock init
mock start //修改文件之后也需要mock start

点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?

主要思路是 发送ajax之前先上锁，防止再次点击Ajax ，造成不必要的问题。

var status=false; //设置布尔值作为状态锁

btn.addEventListener("click",function(){

 if(status == true){ 

 return; 

 }

 status = true; //ajax之前先上锁

 ajax({

 ...

 })

})

function success(){

 ...

 status = false; //解锁 

}

function error(){

 ...

 status = false; //解锁

}