进阶12-ajax
2017-10-13 本文已影响0人
饥人谷_星璇
题目1： ajax 是什么？有什么作用？
- Asynchronous JavaScript And XML（异步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, 但由于自身的许多优势，比如更加轻量以及作为Javascript的一部分，目前[JSON]的使用比XML更加普遍。JSON和XML都被用于在Ajax模型中打包信息。
题目2： 前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
- 前后端开发联调需要约定接口：
1.请求形式（get/post）.
2.约定的接口(URL)。
3.需要传入的参数和返回的参数，包括参数的名称、数据格式等。 - mock 数据：
1.使用 nodejs 搭建本地服务器，模拟后台数据。
2.使用server-mock或mock.js搭建模拟服务器，进行模拟测试；
题目3：点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
- 在用户点击之后到数据到来之前，禁用点击按钮或者让用户点击无效，达到防止重复点击。具体使用在下面代码会提到。
题目4：实现加载更多的功能，效果范例，后端在本地使用server-mock来模拟数据
- html代码
<!DOCTYPE html>
<html>
<head>
<title>ajax</title>
<style type="text/css">
li {
list-style: none;
height:40px;
line-height:40px;
font-size: 18px;
border:1px solid pink;
border-radius: 3px;
margin:5px;
}
a {
width:100px;
height:40px;
line-height:40px;
font-size: 16px;
border:1px solid pink;
border-radius: 3px;
margin:0 auto;
display: block;
text-align: center;
text-decoration: none;
color:pink;
}
</style>
</head>
<body>
<ul id="ct">
</ul>
<a href="#" class="btn" id="loadmore" >加载更多</a>
<script>
var btn = document.querySelector(".btn");
var loadmore = document.querySelector("#loadmore")
var ct = document.querySelector("#ct")
var index = 0;
var judgeData = true; //点击之后数据到来之前设置judgeDate为false，防止重复点击
btn.addEventListener("click",function(e){
if(!judgeData){
return;
}
judgeData = false;
e.preventDefault();
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 ){
if(xhr.status ===200||xhr.status ===304){
var results = JSON.parse(xhr.responseText)
var fragments = document.createDocumentFragment()
for(let i = 0;i < 5; i++){
var node = document.createElement("li")
node.innerText = results[i]
fragments.appendChild(node);
}
ct.appendChild(fragments)
index += 5;
}else{
console.log("出错了")
}
judgeData = true;
}
}
xhr.open("get","/loadMore?index=" + index + "&length=5" ,true)
xhr.send();
})
</script>
</body>
</html>
- 后台代码
function setRouter(app){
var router = app;
//服务端router.js
app.get('/loadMore', function(req,res){
var curIdx = req.query.index
var len = req.query.length
var data = []
for(var i = 0;i<len ;i++){
data.push("新闻" + (parseInt(curIdx) + i))
}
res.send(data)
});}
module.exports.setRouter = setRouter
