题目1： ajax 是什么？有什么作用？
AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML）
ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术
ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
而传统的网页（不使用ajax）如果需要更新内容，必须重载整个网页面。
（1）无刷新更新数据。
AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。
（2）异步与服务器通信。
AJAX使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。优化了Browser和Server之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量。
（3）前端和后端负载平衡。
AJAX可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。
（4）基于标准被广泛支持。
AJAX基于标准化的并被广泛支持的技术，不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行。随着Ajax的成熟，一些简化Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，为那些不支持JavaScript的用户提供替代功能。
（5）界面与应用分离。
Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离），有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。
题目2： 前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
前后端联调是一种 真实业务数据和 本地mock数据之间来回切换以达到前后端分离架构下的不同开发速度时数据交换的一种方式方法。
注意事项：
- 约定前后端联调的时间。
- 约定双方需要传输的数据和接口，在接口文档中确定好参数的名称、格式等。
- 约定请求和响应的格式和内容。
什么是mock数据：参照接口相关文档，使用假数据来验证我们制作的页面响应和接口是否正常。
使用server-mock或mock.js （http://mockjs.com/ ）搭建模拟服务器，进行模拟测试（优点是不需要熟练掌握后台PHP语言，采用熟悉的js语法）；
题目3：点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
var isDataArrive=true;//状态锁 默认现在是有响应数据
var btn=document.querySelector('#btn') var pageIndex=3;
btn.addEventListener('click', function(e){
e.preventDefault()
if(!isDataArrive){ //判断是不是响应了，没响应，退出 return; }
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){ if( xhr.status === 200 || xhr.status == 304){
var results = JSON.parse(xhr.responseText) console.log(results)
var fragment = document.createDocumentFragment()
for(var i = 0; i < results.length; i++){
var node = document.createElement('li')
node.innerText = results[i] fragment.appendChild(node)
}
content.appendChild(fragment)
pageIndex = pageIndex + 5
}else{ console.log('出错了') }
isDataArrive = true //当前表示是响应数据状态
}
}
xhr.open('get', '/loadMore?index='+pageIndex+'&length=5', true)
xhr.send()
isDataArrive = false //做完数据处理，响应数据后，恢复到没有响应数据状态 })
网友评论