1. ajax 是什么?有什么作用?
Ajax(['eidʒæks])是Asynchronous JavaScript and XML的缩写,从标题里就能看出,是异步的JS和XML,这一技术能够向服务器请求额外的数据而无需卸载整个页面,会带来良好的用户体验。因为传统的HTTP 请求流程大概如下:
- 浏览器向服务器发送请求
- 服务器根据浏览器传来数据生成response
- 服务器把response返回给浏览器
- 浏览器刷新整个页面显示最新数据
这个过程是同步的,顺序执行。如果网络传输速率过慢或者其他情况导致,用户长时间等待请求结果,而浏览器是卡死状态,那么体验就很糟糕。
另外如果当前页面DOM结构特别复杂,内容繁多,而需要请求的仅仅是一小段数据,却要大费周章,数据到来后总是要重新渲染页面。
而使用AJAX技术,通过JavaScript操作浏览器提供的XMLHttpRequest 对象,去发送一个Ajax请求,并接收服务器传来的数据,然后操作DOM将新数据对网页的某部分进行更新,使用Ajax最直观的感受是向服务器获取新数据不需要刷新页面等待了。
2. 前后端开发联调需要注意哪些事情?后端接口完成前如何 mock 数据?
-
前后端联调时需要沟通定义接口:
- 约定好请求方法
- 请求路径(URL)
- 前端需要传递什么样的参数(入参)
- 数据格式(回参,包括可能的状态码)
-
mock数据:
在后端接口完成之前,前端通过mock数据,能够在不依赖后端环境的情况下进行开发,只要约定好接口。
常用的手段就是搭建本地mock server,如果装了nodejs,就可以用npm 下载安装了,然后只需要在本地的mock server中实现请求路由映射即可,如果使用js语言,也就是 router.js,可以按照约定在里面模拟假数据,以相应前端浏览器的请求。
除此之外,还可以使用线上的模拟数据生成服务,比如Easy Mock:
http://www.easy-mock.com 注册 打开任意一个项目 创建接口 使用接口(AJAX、JSONP都行,具体看文档)
xhr.open('get', 'http://www.easy-mock.com/mock/59b95cf3e0dc663341a8fa20/example/loadMore', true)
3. 点击按钮,使用 ajax 获取数据,如何在数据到来之前防止重复点击?
首先这样做的目的,是因为在真实的网络环境中,传输速率必然是没有用户鼠标双击按钮更快,在当前请求未到来之前,用户的习惯总爱再次点击按钮,这会导致浏览器重复发送请求,结果对于用户来说,占用更多带宽资源还好说,如果是网购付款按钮呢,另外对于服务器端来说,也会带来更大的运行压力。
一个典型的例子就是上大学的时候,到了选修课端口开放的时候,大家齐刷刷早起守着电脑,不停的刷新,结果平时很流畅的教务网站,到了选(抢)课的时候,变得异常卡顿,F5都磨烂了,也刷新不出来。其实这个时候服务器内心是崩溃的。
回到正题,阻止用户重复点击,一个简单的做法是,令用户的点击变得无效, 使用状态锁,请求未处理完成之前,拒绝再次请求,而请求到了并处理完之后,恢复到可请求状态。
具体的代码演示,在下文中,将会提到。
4. 实现加载更多的功能,后端在本地使用server-mock来模拟数据
本地模拟成功:
代码地址,注意!想要看到效果,需要把 index.html 和 router.js 分别保存在同一个文件夹下,然后终端里使用server mock 开启mock。
5. 对AJAX进行封装,这是必须的(以get为例)
var btn = document.querySelector('#load-more')
var ct = document.querySelector('#ct')
var pageIndex = 0
var isDataArrive = true //设计个状态锁
btn.addEventListener('click', function(e){
e.preventDefault() //防止点击 a 链接页面跳到顶部 或者href里 javascript:void(0)
if(!isDataArrive){ // 1. 点击按钮后,一开始先判断,如果状态是false,数据还没到来,就直接忽略
return;
}
loadData(function(news){ //loadData(renderPage) // 执行loadData时,数据到了,执行callback,也就是传入的函数 renderPage
renderPage(news)
pageIndex += 5
isDataArrive = true
})
isDataArrive = false
})
function loadData(callback){
ajax({
type: 'get',
url: 'loadMore',
data: {
index: pageIndex,
length: 5
},
onSuccess: callback,
onError: function(){
console.log('error')
}
})
}
function renderPage(news){
var fragment = document.createDocumentFragment()
for( var i = 0; i < news.length; i++){
var node = document.createElement('li')
node.innerText = news[i]
fragment.appendChild(node)
}
ct.appendChild(fragment)
}
function ajax(options){
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status === 200 || xhr.status === 304){
var results = JSON.parse(xhr.responseText)
options.onSuccess(results) //相当于callback(results)
}else{
options.onError()
}
}
}
var query = '?'
for(key in options.data){
query += key + '=' + options.data[key] + '&'
}
query = query.substr(0, query.length-1) //舍去最后一个&,截取出来
xhr.open(options.type, options.url + query, true)
xhr.send()
}
网友评论