Ajax

要努力，然后常在爸爸身边～

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 data.push('序号：' + (parseInt(curIdx) + i))//循环推入数组
 }
 setTimeout(function(){ //定时器
 res.send(data) //通过 res.query 发送数据
 }, 3000) //延迟3秒-（仿延迟）
 })
 `