- 题目1: ajax 是什么?有什么作用?
异步JavaScript和XML ,Asynchronous JavaScript + XML, 其本身不是一种新技术,而是一个在 2005年被Jesse James Garrett提出的新术语,用来描述一种使用现有技术集合的‘新’方法,包括: HTML or XHTML, Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, 以及最重要的 XMLHttpRequest object。当使用结合了这些技术的AJAX模型以后, 网页程序能够快速地将渐步更新呈现在用户界面上,不需要重载(刷新)整个页面。这使得程序能够更快地回应用户的操作。
尽管X在Ajax中代表XML, 但由于JSON的许多优势,比如更加轻量以及作为Javascript的一部分,目前JSON的使用比XML更加普遍。JSON和XML都被用于在Ajax模型中打包信息。 - 前后端开发联调需要注意哪些事情?后端接口完成前如何 mock 数据?
前后端开发联调需要注意事项:
约定数据:有哪些需要传输的数据,数据类型是什么;
约定接口:确定接口名称及请求和响应的格式,请求的参数名称、响应的数据格式;
根据这些约定整理成接口文档
后端接口完成前mock数据:
可以根据接口文档,使用假数据来验证我们制作的页面响应和接口是否正常。
可以搭建php本地服务器用,php写脚本提供临时数据;
也可使用Mock.js,它能拦截ajax请求并根据请求中的内容来随机生成符合你要求的假数据,模拟后端环境让你完成对页面和接口的测试.
- 点击按钮,使用 ajax 获取数据,如何在数据到来之前防止重复点击?
btn.addEventListener('click',function(e){
var xhr = new XMLHttpRequest()
e.preventDefault()
if( !isDataArrive){
return;
}
xhr.onload = function(){
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)
}
ct.appendChild(fragment);
pageIndex += 5
}else{
console.log("出错了")
}
}
isDataArrive = true
xhr.open('GET','loadmore?index='+pageIndex+'&length=5')
xhr.send()
isDataArrive = false
设置一个状态锁,初始状态为false,数据没有到来之前,直接退出函数不执行。数据发送后,把状态改为false,因为这时数据发送还没有到来,当数据到来后,再把状态改过来为true ,继续下一次请求。
- 实现加载更多的功能,效果范例。代码提交到 github,回复链接到这里
https://github.com/niusz/loadmore/blob/master/loadmore.html