1.前端js文件
//获取滚动条到顶端的高度
function getScrollTop() {
var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
if (document.body) {
bodyScrollTop = document.body.scrollTop;
}
if (document.documentElement) {
documentScrollTop = document.documentElement.scrollTop;
}
scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
return scrollTop;
if (document.body) {
bodyScrollTop = document.body.scrollTop;
}
if (document.documentElement) {
documentScrollTop = document.documentElement.scrollTop;
}
scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
return scrollTop;
}
//获取滚动条的高度(固定值,不随滚动条改变)
function getScrollHeight() {
var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight;
if (document.body) {
bodyScrollHeight = document.body.scrollHeight;
}
if (document.documentElement) {
documentScrollHeight = document.documentElement.scrollHeight;
}
scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
return scrollHeight;
var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight;
if (document.body) {
bodyScrollHeight = document.body.scrollHeight;
}
if (document.documentElement) {
documentScrollHeight = document.documentElement.scrollHeight;
}
scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
return scrollHeight;
}
//获取windows视窗高度
function getWindowHeight() {
var windowHeight = 0;
if (document.compatMode == 'CSS1Compat') {
windowHeight = document.documentElement.clientHeight;
} else {
windowHeight = document.body.clientHeight;
}
return windowHeight;
var windowHeight = 0;
if (document.compatMode == 'CSS1Compat') {
windowHeight = document.documentElement.clientHeight;
} else {
windowHeight = document.body.clientHeight;
}
return windowHeight;
}
//绑定windows事件
window.onscroll = function () {
if (getScrollTop() == getScrollHeight() - getWindowHeight()) {
//发送请求
postSomething();
}
}
}
2.AJAX提交数据
function postSomething() {
var xhr = new XMLHttpRequest();
if (xhr) {
// xhr.open([string]method,[string]url,[boolen optional]async,[string optional]user, [sting optional]password)
xhr.open('POST', '/article', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.onreadystatechange = function () {
if ((xhr.readyState == 4) && (xhr.status == 200)) {
//return xhr.responseText、xhr.responseType、xhr.responseXML
var responseData = JSON.parse(xhr.responseText);
page = parseInt(JSON.stringify(responseData.page));
console.log(parseInt(JSON.stringify(responseData.page)));
for (i = 0; i < responseData.article.length; i++) {
// console.log(responseData.article[i].title)
addContent(responseData.article[i].id, responseData.article[i].title, responseData.article[i].createTime, responseData.article[i].username, responseData.article[i].content);
}
}
return true;
}
}
else {
return false;
}
xhr.send("page=" + page);
return true;
}
var xhr = new XMLHttpRequest();
if (xhr) {
// xhr.open([string]method,[string]url,[boolen optional]async,[string optional]user, [sting optional]password)
xhr.open('POST', '/article', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.onreadystatechange = function () {
if ((xhr.readyState == 4) && (xhr.status == 200)) {
//return xhr.responseText、xhr.responseType、xhr.responseXML
var responseData = JSON.parse(xhr.responseText);
page = parseInt(JSON.stringify(responseData.page));
console.log(parseInt(JSON.stringify(responseData.page)));
for (i = 0; i < responseData.article.length; i++) {
// console.log(responseData.article[i].title)
addContent(responseData.article[i].id, responseData.article[i].title, responseData.article[i].createTime, responseData.article[i].username, responseData.article[i].content);
}
}
return true;
}
}
else {
return false;
}
xhr.send("page=" + page);
return true;
}
3.NodeJS后台
router.route('/')
.get(function (req, res, next) {
.get(function (req, res, next) {
var perPage = 5;
var page = 0;
article.find({})
.limit(perPage)
.skip(perPage * page)
.exec(function (err, results) {
article.count().exec(function (err, count) {
if (err)return console.error(err);
for (i = 0; i < results.length; i++) {
results[i].content = (JSON.stringify(results[i].content)).substr(0, 200);
}
res.render('article', {
article: results,
count: count,
page: page
});
})
})
})
.post(function (req, res, next) {
var perPage = 5;
var page = Math.max(0, req.body.page);
article.find({})
.limit(perPage)
.skip(perPage * page)
.exec(function (err, results) {
article.count().exec(function (err, count) {
.limit(perPage)
.skip(perPage * page)
.exec(function (err, results) {
article.count().exec(function (err, count) {
if (err)return console.error(err);
for (i = 0; i < results.length; i++) {
results[i].content = (JSON.stringify(results[i].content)).substr(0, 200);
}
res.render('article', {
article: results,
count: count,
page: page
});
})
})
})
.post(function (req, res, next) {
var perPage = 5;
var page = Math.max(0, req.body.page);
article.find({})
.limit(perPage)
.skip(perPage * page)
.exec(function (err, results) {
article.count().exec(function (err, count) {
if (err)return console.error(err);
//重新组装content.只选取前200个字符
for (i = 0; i < results.length; i++) {
results[i].content = (JSON.stringify(results[i].content)).substr(0, 200);
}
res.jsonp({
article: results,
count: count,
page: page + 1
});
})
})
});
results[i].content = (JSON.stringify(results[i].content)).substr(0, 200);
}
res.jsonp({
article: results,
count: count,
page: page + 1
});
})
})
});