ajax实现网页异步加载,ajax（实现加载更多）

题目1：ajax 是什么？有什么作用？

ajax是异步的javascript和xml

1优点

实现网页的异步加载，

局部刷新网页(和其他几种请求方式都不能局部更新相比)

前后端负载平衡： 可以将后端服务器的一些工作转移给客户端，利用客户端限制的能力来处理，减轻了服务器的负担

2 缺点：

浏览器历史记录的遗失： 在使用AJAX对页面进行改变后，由于并没有刷新页面，没有改变页面的访问历史，当用户想要回到上一个状态时，无法使用浏览器提供的后退。

题目2： 前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？

接口叫什么？接口名称，统一命名，定制规范，甚至拟定命名表。

接口传什么？数据类型确定

接口的相关参数： 到底想告诉服务器什么？请求数据的一些限制？

前端人员可以自己使用服务器框架搭建一个模拟服务器环境，比如使用express&nodejs或者使用xampp，更简单的办法是使用server-mock. 在数据的模拟传输与请求查看上，postman也是一个好工具。

题目3：点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?

let AjaxLock = false;

if (!AjaxLock){

AjaxLock = true;

xhr.onreadystatechange = function(){

if( xhr.readyState == 4) {

//do sth

AjaxLock = false;

//当接受完毕请求数据后将锁打开

}

}

xhr.send();

} else {

return;

}

题目4：实现加载更多的功能，效果范例228，后端在本地使用server-mock来模拟数据

index.html

loading

* {

padding: 0;

margin: 0;

}

a {

color: #666;

text-decoration: none;

}

ul {

list-style-type: none;

}

.ct-li li{

padding: 10px 10px;

margin:10px 10px;

border: 1px solid #ccc;

}

.ct-li li:hover{

background-color: lightgreen;

}

.ct-btn {

text-align: center;

}

.btn{

padding: 10px 15px;

border: 1px solid #e75480;

display: inline-block;

margin: 0 auto;

color: #e75480;

}

.btn:active{

background-color: #f60;

color: #fff;

}

• 内容1
• 内容2

加载更多

//对ajax进行了封装

function ajax(obj){

var xhr=new XMLHttpRequest();

xhr.onreadystatechange=function(){

if (xhr.readyState == 4 && xhr.status == 200) {

var json=JSON.parse(xhr.responseText);

obj.success(json);//对返回的成功数据进行处理

}

if (xhr.readyState == 4 && xhr.status == 404) {

obj.error();

}

}

function params(data){

var arr=[];

for(var i in data){

arr.push(i+'='+data[i]);

}

return arr.join('&');

}

var data=params(obj.data);//跟在url后面的参数形式，告诉服务器自己到底想要什么

if (obj.type.toLocaleLowerCase()==='get') {

xhr.open(obj.type,obj.url+'?'+data,true);

xhr.send();

}

if (obj.type.toLocaleLowerCase()==='post') {

xhr.open(obj.type,obj.url,true);

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

xhr.send(data);

}

}

var ctLi = document.querySelector('.ct-li'),

flag=true;

document.querySelector('.btn').addEventListener('click', function() {

var li=ctLi.children;

if(!flag){

return;

}else{

flag=false

ajax({//传进去各种参数

url: '/getMore',

type: 'get',

data: {

start: li.length, //核心就是这里了，每次传递的参数是不一样的

len: 6

},

success: function(ret) {

addContent(ret);//对返回来的数据进行html拼接最后加到屏幕上显示

flag=true

},

error: function() {

console.log('出错了');

}

});

}

});

function addContent(ret){

for (var i = 0; i < ret.data.length; i++) {

var newLi = document.createElement('li');

newLi.innerText=ret.data[i];

ctLi.appendChild(newLi);

}//这个函数的作用是如何拼接html并显示到屏幕上

}

route.js

app.get('/getMore', function(req, res) {

var start=parseInt(req.query.start),

len=req.query.len;

var data=[];

for (var i = 1; i < len; i++) {

data.push('内容'+(start+i))

}

res.send({

data: data

});

});