题目1:ajax 是什么?有什么作用?
AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML)
ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术
ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换。
ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
而传统的网页(不使用ajax)如果需要更新内容,必须重载整个网页面。
作用:
1、页面无刷新,用户的体验非常好。
2、使用异步方式与服务器通信,具有更加迅速的响应能力。。
3、可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。
4、基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。
题目2:前后端开发联调需要注意哪些事情?后端接口完成前如何 mock 数据?
前后端联调是一种真实业务数据和本地mock数据之间来回切换以达到前后端分离架构下的不同开发速度时数据交换的一种方式方法
约定事项(前后端达成一致):
1.接口的类型 get、post
2.接口的名称一致
- 传递参数是什么
如 {index:3 , length: 5} http://hdhhj.com?index=3&length=5- 所有交互数据的是什么格式存放数据 如 json格式字符串
mock数据
当后端接口没有完成前,前端需要模仿后台数据,以测试处理前端的请求。
使用nodejs搭建一个web服务器,返回我们想要的数据
安装server-mock,在当前的文件夹下创建 router.js,接受处理请求数据
题目3:点击按钮,使用 ajax 获取数据,如何在数据到来之前防止重复点击?
问题:当用户网速慢,数据响应缓慢, 用户很可能会多次重复点击,希望得到数据。而加载过来的数据很多,而且重复。
重复点击 请求多次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 //做完数据处理,响应数据后,恢复到没有响应数据状态
})