首先安利一波个人小网站，还未备案域名，只能ip访问：
hsjfans
首先看一下背景：
实现上图的页面查询操作，如果采用传统的java请求，要将整个页面进行刷新进行操作，这样在访问量的的情况下，造成很大的浪费，因此，决定采用ajax加上js模板进行实现局部刷新操作：
首先了解一下，ajax：
1、AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
其原理是：
XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
2、整个操作的流程图：
开始实现首先是前端页面：
前端参考了Bootstrap 框架，毕竟要适配移动设备，它的栅格系统真的很好用，同时采用了Temple.js,避免了字符串拼接的操作：
<!--boostrap 框架 -->
<div class="container">
<div class="row col-xs-12 col-md-offset-1 col-md-10">
<p class="post-controller">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<a href="/blog"> 返回首页</a>
</p>
<a class="post-controller">
<span class="post-controller-item">按时间排序</span>
</a>
<a class="post-controller">
<span class="post-controller-item">按关注度排序</span>
</a>
<a class="post-controller">
<span class="post-controller-item">按点赞数排序</span>
</a>
</div>
</div>
下面是jsp写的遍,要改为Temple.js模板
<div class="container maincontent">
<div class="row">
<div class="col-xs-12 col-md-offset-1 col-md-10 " >
<ul class="list-group" style="margin-top: 30px">
<%List<ArticalPojo> articalPojoList= (List<ArticalPojo>) request.getAttribute("articals");
for(ArticalPojo articalPojo:articalPojoList){
%>
<li class="list-group-item list-item-style">
<div class="media ">
<div class="media-left">
<a href="/blog/user/<%=articalPojo.getAuthorId()%>">
<img class="media-object img-circle" src="http://p05wx3qpg.bkt.clouddn.com/<%=articalPojo.getUserImg()%>?imageView2/1/w/60/h/60/q/75|imageslim" alt="...">
</a>
</div>
<div class="media-body">
<h5 class="media-heading"><%=articalPojo.getUsername()%></h5>
<div class="media" >
<div class="media-body">
<h4 class="media-heading post-title">
<a href="/blog/artical/<%=articalPojo.getArticalId()%>" style="color: black">
<%=articalPojo.getTitle()%>
</a>
</h4>
<div class="post-content">
<%=articalPojo.getShowConetent()%>
</div>
</div>
<%if(articalPojo.getArticalImg()!=null){%>
<div class="media-right media-middle post-img">
<a href="/blog/artical/<%=articalPojo.getArticalId()%>">
<img class="media-object" src="http://p05wx3qpg.bkt.clouddn.com/<%=articalPojo.getArticalImg()%>?imageView2/1/w/120/h/120/q/75|imageslim" alt="...">
</a>
</div>
<%}%>
</div>
</div>
<div class="media-bottom">
<ul class="media-bottom-info">
<li><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span><%=articalPojo.getVotes()==null?0:articalPojo.getVotes()%></li>
<li><span class="glyphicon glyphicon glyphicon-thumbs-up" aria-hidden="true"></span><%=articalPojo.getLikes()==null?0:articalPojo.getLikes()%></li>
<li><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span><%=articalPojo.getPublishDate()==null?0:articalPojo.getPublishDate()%></li>
</ul>
</div>
</div>
</li>
<%}%>
</ul>
<nav aria-label="Page navigation">
<ul class="pagination">
<%Integer pages= (Integer) request.getAttribute("articalnums");
int p=pages.intValue(),j=1;
System.out.println(p);
while (j<=p){
%>
<li id="j"><a href="#"><%=j%></a></li>
<%j++;}%>
</ul>
</nav>
</div>
</div>
</div>
<script type="text/html" id="articalList">
<ul class="list-group" style="margin-top: 30px">
{{each popularArticals}}
<li class="list-group-item list-item-style">
<div class="media ">
<div class="media-left">
<a href="/blog/user/{{$value.authorId}}">
<img class="media-object img-circle" src="http://p05wx3qpg.bkt.clouddn.com/{{$value.userImg}}?imageView2/1/w/60/h/60/q/75|imageslim" alt="...">
</a>
</div>
<div class="media-body">
<h5 class="media-heading">{{$value.username}}</h5>
<div class="media" >
<div class="media-body">
<h4 class="media-heading post-title">
<a href="/blog/artical/{{$value.articalId}}" style="color: black">
{{$value.title}}
</a>
</h4>
<div class="post-content" id="{{$index+1}}">
{{$value.showConetent}}
</div>
</div>
<div class="media-right media-middle post-img">
<a href="/blog/artical/{{$value.articalId}}">
<img class="media-object" src="http://p05wx3qpg.bkt.clouddn.com/{{$value.articalImg}}?imageView2/1/w/120/h/120/q/75|imageslim" alt="...">
</a>
</div>
</div>
</div>
<div class="media-bottom">
<ul class="media-bottom-info">
<li><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>{{$value.votes}}</li>
<li><span class="glyphicon glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>{{$value.likes}}</li>
<li><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>{{$value.publishDate}}</li>
</ul>
</div>
</div>
</li>
{{/each}}
</ul>
</script>
js 界面：
function getPopularArticals(type) {
var xmlhttp;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp = new XMLHttpRequest();
}
else {
// IE6, IE5 浏览器执行代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST", "/blog/artical?name=" + type, true);
//设置请求头
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status = 200) {
var data = eval('('+xmlhttp.responseText+')')
var html = template("articalList", data);
document.getElementById("articals").innerHTML = html;
}
}
}
}
网友评论