抓取ajax动态网页java(JavaWeb应用设计及实战目录上一章下一章加载新闻源码)

　　抓取ajax动态网页java(JavaWeb应用设计及实战目录上一章下一章加载新闻源码)

　　JavaWeb应用设计及实用目录

　　上一章 下一章

　　上一个任务/上一节 下一个任务/下一节

　　加载新闻来源。

　　内容

　　(2）

　　(6）

　　系统首页新闻中心部分采用Ajax技术，按主题动态展示新闻功能，按条件加载

　　一个话题下的所有话题或新闻，并使用Ajax技术实现分页显示。使用 Ajax 技术加载

　　添加主题页面，实现Ajax方式添加主题功能，利用Ajax技术实现主题修改

　　并删除。

　　8.2.1 Ajax模式下根据主题动态加载新闻1.需求介绍

　　访问系统首页，以Ajax方式加载页面“新闻中心”部分的新闻列表，默认加载所有新闻

　　主题下的新闻按创建时间降序排列，并实现分页，如图8.1。

　　当点击某个主题的超链接时，该主题下的新闻以Ajax方式加载，按创建时间降序排列，

　　并实现分页。

　　2.实现思路（1）实现数据层访问

　　需求中有两个分页查询要求：对所有主题下的新闻进行分页查询，对某一个进行分页查询

　　主题下的新闻可以分页搜索。事实上，这两个查询的区别仅在于 SQL 语句的一个主要方面。

　　查询问题 ID。事实上，对于SQL语句来说，这两个查询只是主题id的一个查询条件不同，

　　因此，考虑整合这两个查询。

　　图8.1 分页显示所有类别的新闻

　　修改NewsDao接口中分页查询相关方法的设计，增加topic id参数。

　　public interface NewsDao {

……// 省略其他方法

//获得新闻总数

public int getTotalCount(Integer id) throws SQLException;

//分页获得新闻

public List getPageNewsList(Integer tid,

int pageNo,int pageSize) throws SQLException;

}

　　在其实现类NewsDaoImpl中，根据传入参数tid是否有效，动态组装SQL语句并查询

　　查询条件。

　　public class NewsDaoImpl extends BaseDao implements NewsDao{

public NewsDaoImpl(Connection conn){

super(conn);

}

……//省略其他方法

//获得新闻的数量

public int getTotalCount(Integer tid) throws SQLEception{

ResultSet rs = null:

List params = new ArrayList ();

String sql = "SELECT COUNT('nid') FROM 'news'";

if(tid!= null){

sql += "WHERE 'ntid' = ?";

params.add(tid);

}

int count = -1;

try {

rs = this.executeQuery(sql,params.toArrary()) ;

rs.next();

count = rs.getInt(1);

}……省略异常处理和资源释放代码

return count;

}

//分页获得新闻

public List getPageNewsList(Integer tid,

int pageNo,int pageSize) throws SQLException{

List list = new ArrayList ();

ResultSet rs = null;

List params = new ArrayList ();

String sql = "SELECT'nid','ntid','ntitle','nauthor',"

+"'ncreateDate','nsummary','tname' FROM 'NEWS',"

+"'TOPIC''WHERE''NEWS'.'NTID' = 'TOPIC'.'tid'";

if{tid! = null){

sql +="AND 'NEWS'.'ntid' = ?";

params.add(tid);

}

sql += " ORDER BY 'ncreateDate' DESC LIMIT ?,?";

params.add((pageNo - 1)* pageSize);

params.add(pageSize);

try{

rs = this.executeQuery(sql,params.toArray());

……// 省略封装数据过程

}……//省略异常处理和资源释放代码

return list;

}

}

　　(2) 实现业务层

　　业务层接口NewsService及其实现类NewsServiceImpl也作了相应的调整和设计。

　　也是添加传入参数主题ID的方法。

　　修改NewsService接口中分页相关方法的设计，增加主题id参数。

　　public interface NewsService{

……//省略其他方法

//分页获取新闻

public void findPageNews(Integer tid,Page pageObj)

throws SQLException;

}

　　在其实现类NewsServiceImpl中调用Dao相关方法时传入tid即可。

　　public class NewsServiceImpl implements NewsService{

……//省略部分方法

//分页获取新闻

public void findPageNews(Inter tid,Page pageObj)

throws SQLException{

Connection conn = null;

try{

conn = DatebaseUtil.getConnection();

NewsDao newsDao = new NewsDaoImpl(conn);

……//省略部分代码

List newsList = newsDao.getPageNewsList(tid,

pageObj.getCurrPageNo(),

pageObj.getPageSize());

……//省略部分代码

}……// 省略异常处理和资源释放

}

}

}

　　(3）写Servlet

　　将原来的首页初始化公告拆解成两部分：按照传统初始化方式初始化最新消息和话题列表（如

　　图8.2）并使用Ajax方法加载新闻列表（如图8.1）。

　　图8.2 初始化最新消息和话题列表

　　以传统方式初始化最新消息和主题列表的关键代码如下。

　　……//省略其他功能

else if("topicLatest".equals(opr)){//初始化首页侧边栏和主题列表

Maptopics = new HashMap();

topics.put(1,5);

topics.put(2,5);

topics.Put(5,5);

List latests = newsService

.findLatestNewsByTid(topics); //查询最新消息

List list = topicService.findAllTopics(); //查询所有主题

request.setAttribute("list1",latests.get(0)); // 左侧国内新闻

request.setAttribute("list2",latests.get(1)); //左侧国际新闻

request.setAttribute("list3",latests.get(2)); // 左侧国际新闻

request.setAttribute("list",list); //所有的主题

request.getRequestDispatcher("/index.jsp").forward(request,response);

}……//省略其他功能

　　处理分页加载新闻列表的Ajax请求的关键代码如下。

　　else if("topicNews".equals(opr)){ //分页查询新闻

//获得主题id 和当前页数

String tid = request.getParameter("tid");

String pageIndex = request.getParameter("pageIndex");

……//省略部分代码

Page pageObj = new page();

……//省略部分代码

//调用业务方法查询

if(tid ==null||(tid = tid.trim()).length() ==0)

newsService.findPageNews(null,pageObj);

else

newsService.findPageNews(Integer.valueOf(tid),pageObj);

//使用 FastJSON 将 Page 对象序列化成 JSON 字符串

String newsJSON = JSON.toJSONStringWithDataFormat(pageObj,

"yyyy-MM-dd HH:mm:ss",

SerializerFeature.WriteMapNullValue);

//向客户端返回响应数据

out.print("[{\"tid\":\""+tid+"\"},"+newsJSON +"]");

}……//省略其他功能

　　注意

　　为了保证客户端分页条件的完整性，响应数据是一个JSON数组，包括主题id

　　和查询结果。

　　(4） 调整 index.jsp 页面

　　删除与获取和输出新闻列表相关的原创代码，只保留列表的容器。

　　……//省略其他页面内容

……//省略其他页面内容

　　为了适应拆分servlet功能和实际Ajax分页的需求，主题列表的超链接在

　　输出也需要相应调整。

　　

<a href = "javascript:;" id = "${topic.tid}">

${topic.tname}</a>

　　点击主题超链接查询相关新闻的功能将在 JavaScript 脚本中使用 Ajax 方法实现。

　　添加了 id 属性，用于在点击事件中获取主题 id 作为查询参数。

　　(5) 编写 JavaScript 脚本

　　分别在以下代码块中编写相关的 JavaScript 脚本。

　　jQuery.noConflict();//让渡 "$" 的使用权，其他脚本库可以使用 "$"

(function($){

$(document).ready(function(){

//其他脚本编写于此处

})；

})(jQuery);

　　1. 编写发送Ajax分页请求的getpagi()方法，在首页加载时调用它进行初始化

　　新闻列表。

　　function getPagi(tid,pageIndex){ //发送 Ajax 请求实现分页

var data = "opr = topicNews"; //准备请求参数

if(tid)

data += "&tid=" +tid;

if(pageIndex && pageIndex>0)

data += "&pageIndex="+pageIndex;

$.getJSON("util/news",data,pagi); //发送 Ajax 请求

}；

getPage();//首页加载时，初始化加载新闻列表

　　2.编写回调方法pagi()处理响应，主要完成两件事：在这个页面显示数据和生成分页操作链接。

<p>//获取显示新闻列表的首页中心区域

var $centerNewsList = $("#container.main.content.classlist");

function pagi(data){ //分页查询的回调函数

var tid = datas[0].tid == "null"?"";datas[0].tid;

var data = datas[1]; //获取分页相关数据

//1.展示本页新闻数据

$centerNewsList.html("");

if(data.newsList == null)

$centerNewsList.html(

"出现错误，请稍后再试或与管理员联系1){

var $first = $("<a href=\"javascrit:;\">首页</a>").click(

function(){getPagi(tid,1);});

var $prev = $("<a href = \"javascript:;\">上一页</a>).click(

function(){getPagi(tid,(data.currPageNo-1));});

$operArea.append($first).append("&nbsp;").append($prev);

}

if(data.currPageNo