Ajax Note

[HuangHongRui]

ajax 含义&作用

含义：AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

作用：实现网页的异步加载，局部刷新网页。当在向服务器获取新数据时不需要刷新整个网页，提高用户体验。

优点:
异步通信： 它与服务器使用异步的方式通信，不会打断用户的操作（卡死页面）。 前后端负载平衡： 可以将后端服务器的一些工作转移给客户端，利用客户端限制的能力来处理，减轻了服务器的负担。 数据与呈现分离： 利于分工，降低前后耦合。 更新数据而不需要刷新页面： 它能在不刷新整个页面的前提下与服务器通信维护数据，由于ajax是按照需求请求数据，避免发送那些没有改变的数据。

缺陷: 浏览器历史记录的遗失： 在使用AJAX对页面进行改变后，由于并没有刷新页面，没有改变页面的访问历史，当用户想要回到上一个状态时，无法使用浏览器提供的后退。 AJAX的安全问题： AJAX的出现就像建立起了一直通服务器的另一条通道，容易遭受到一些攻击。

前后端开发联调 & 后端接口完成前 mock 数据

注意事项:

1. 约定数据._需要确定需要传输的 [数据大小等限制] 和 [数据类型] !
2. 约定接口._需要统一命名 [接口名称] 及 [请求的参数名称] 和 [响应的数据格式] 甚至拟定命名表，定制规范 !
3. 相关参数._ 服务器 & 端口 & 方法 & 请求数据的一些限制
4. 再将 [约定] 整理成(接口 / 数据)文档.[重要]

mock 数据:

1. 可以自己使用服务器框架搭建一个模拟服务器环境 根据接口文档.使用假数据来验证制作的页面响应和接口是否正常.
2. 可用 express & nodejs
3. 可用 xampp 进行模拟
4. 可用 server-mock 模拟(简单)
5. 可用 postman 在数据的模拟传输与请求查看

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

`let AjaxLock = false;
//事件触发下面代码
// ******start*****
if (!AjaxLock){
AjaxLock = true;
xhr.onreadystatechange = function(){
if( xhr.readyState == 4) {
//do sth
AjaxLock = false; 
//当接受完毕请求数据后将锁打开
}
}
//ajax配置
xhr.send();
} else {
return;
}`

---

实现加载 & 后端服务器加载

`

`

`
app.get('/loadMore', function(req, res) {       //固定app.[传递类型]+接口名称 函数（传入参数）
  var curIdx = req.query.index                  //通过 req.query获取请求/传递参数.
  var len = req.query.length                    //通过 req.query获取请求/传递参数.
  var data = []                                 //声明数组

  for(var i=0; i