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 获取数据，在数据到来之前防止重复点击

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

---

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

<pre>
`
<script>

var btn = document.querySelector('#load-more') //Dom 找到按钮
var ct = document.querySelector('#ct') //Dom 找到元素节点
var pageIndex = 0 //初始下标
var ajaxLock = false //数据锁 （提高用户体验&防止多次提交）
btn.addEventListener('click', function(e){ //为按钮添加点击事件
e.preventDefault(); //取消a链接默认事件
if (ajaxLock) { //数据锁为false，通过
return
}
ajaxLock = true; //接着锁上！！！！此时无法狂点
//One-Step. 构造函数初始化一个XMLHttpRequest对象. 必须在所有其他方法被调用前调用构造函数。
var xhr = new XMLHttpRequest()
xhr.open('get', '/loadMore?index='+pageIndex+'&length=5',true) //thr-Step异步请求-请求HTTP方法为：GET；接口名+传递参数;
xhr.send() //fou-Step发送请求
xhr.onreadystatechange = function(){ //Two-Step 监听
if (xhr.readyState === 4){ //整个请求过程已经完毕(4).
if (xhr.status === 200 || xhr.status == 304) { //该请求的响应状态码 (例如, 状态码200 表示一个成功的请求)
var results = JSON.parse(xhr.responseText) //用JSON.parse将响应体转换成数组.
var fragment = document.createDocumentFragment() //Dom创建一文档片段（最小文档对象）
for (var i = 0; i<results.length; i++) {
var node = document.createElement('li') //创建li节点
node.innerText = results[i] //为文本节点传入循环值
fragment.appendChild(node) //添为子元素
}
ct.appendChild(fragment) //同上
pageIndex = pageIndex + 5 //下标每次加5，防重复
ajaxLock = false; //解锁

  } else {                                                      //报错
    console.log('Error')
  }
  }         
}

})

</script>
`
</pre>

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