AJax技术

使用htmlunit实现带有Ajax复杂页面的静态化技术

字号+ 作者:H5之家 来源:H5之家 2018-01-19 12:07 我要评论( )

1·最近项目要求要把网站的首页静态化,网站的首页是和多个jsp页面组成,整体显示的时候大概5000多行,比较困难的地方是很多地方由于做了jquery特效,所以当初直接

1·最近项目要求要把网站的首页静态化,网站的首页是和多个jsp页面组成,整体显示的时候大概5000多行,比较困难的地方是很多地方由于做了jquery特效,所以当初直接使用$.ajax获取的数据,并直接生成的html.其中又包括了一些处理逻辑,如

if(0 == li.length){ if(2==data.columncaption.length){//样式补位 li = $('<li><a href="#">'+data.columncaption+'</a></li>'); }else{ li = $('<li><a href="#" >'+data.columncaption+'</a></li>'); } $('#BookrackUL').append(li); var div=$('<div><a></a><div><div ><div><p> <a href="<%=request.getContextPath()%>/ContentAction_getContent.action?id='+data.contentid+'" ><img src="'+data.contentsourceurl+'" alt="" /></a><strong>'+data_caption+'</strong><a href="<%=request.getContextPath()%>/Page/knowmore.jsp?root='+data.columnid+'"><img src="images/more.gif" alt="" /></a></p></div></div></div><a></a></div>'); $('#BookrackDiv').append(div); j=1; }else{ if(0==j%5){//第一次创建一个div k=k+1; var div=$('<div><p> <a href="<%=request.getContextPath()%>/ContentAction_getContent.action?id='+data.contentid+'" ><img src="'+data.contentsourceurl+'" alt="" /></a><strong>'+data_caption+'</strong><a href="<%=request.getContextPath()%>/Page/knowmore.jsp?root='+data.columnid+'"><img src="images/more.gif" alt="" /></a></p></div>'); $('#'+id+'fdiv').append(div); }else if(4==j%5){//样式调整 var pp=$('<p><a href="<%=request.getContextPath()%>/ContentAction_getContent.action?id='+data.contentid+'" ><img src="'+data.contentsourceurl+'" alt="" /></a><strong>'+data_caption+'</strong><a href="<%=request.getContextPath()%>/Page/knowmore.jsp?root='+data.columnid+'"><img src="images/more.gif" alt="" /></a></p>'); $('#'+id+'div'+k+'').append(pp); }else{//其他正常 var pp=$('<p><a href="<%=request.getContextPath()%>/ContentAction_getContent.action?id='+data.contentid+'" ><img src="'+data.contentsourceurl+'" alt="" /></a><strong>'+data_caption+'</strong><a href="<%=request.getContextPath()%>/Page/knowmore.jsp?root='+data.columnid+'"><img src="images/more.gif" alt="" /></a></p>'); $('#'+id+'div'+k+'').append(pp); } j=j+1; }

原本是打算使用比较流行的freemaker来实现首页静态化,但以前没用过很难用freemaker标签实现这种效果.

静态化还有一种思路就要采用HttpClient获取首页生成的html文件保存作为静态页,但是很不幸的,HttpClient无法执行js,所有使用ajax获取的数据都无法获取到,于是这种方式也行不通

//创建一个可执行js,css,ajax的多功能WebClient WebClient multiWebClient = new WebClient(BrowserVersion.INTERNET_EXPLORER_8); multiWebClient.setJavaScriptEnabled(true);//执行JavaScript multiWebClient.setCssEnabled(true);//执行css multiWebClient.setAjaxController(new NicelyResynchronizingAjaxController());//设置ajax代理 //创建一个普通的WebClient WebClient commmonWebClient = new WebClient(BrowserVersion.INTERNET_EXPLORER_8); commmonWebClient.setJavaScriptEnabled(false); commmonWebClient.setCssEnabled(false); //用多功能Client获取动态页面的html并执行完js后的页面 URL dynamicUrl = new URL("http://localhost:30010/WebSite"); HtmlPage dynamicPage = (HtmlPage) multiWebClient.getPage(dynamicUrl); //根据项目需要,使用普通Client加载首页模板(避免执行模板里面的js,这些js都是真正要浏览器查看的时候才会执行) URL constantUrl = new URL("http://localhost:30010/WebSite/wwwroot/indexTemple.html"); HtmlPage htmlpage = (HtmlPage) commmonWebClient.getPage(constantUrl); HtmlElement body = htmlpage.getBody(); /** * 未详细测试的结论:getElementById一个元素只能取一次,取了之后再取就是空元素,其子也无法用getElementById取到 * 开始处理header */ appendChildren(body.getElementById("_static_nav"), dynamicPage.getElementById("_static_nav")); //开始处理_static_leftbox //处理图片滚动KSS_content appendChildren(body.getElementById("KinSlideshow"), dynamicPage.getElementById("KSS_content")); //处理最新电子书 appendChildren(body.getElementById("e_bookDiv"), dynamicPage.getElementById("e_bookDiv")); //取出content HtmlElement content = body.getElementById("content"); //开始处理_static_rightbox content.appendChild(dynamicPage.getElementById("_static_rightbox")); //添加div换行 DomElement clearDiv = htmlpage.createElement("div"); clearDiv.setAttribute("class", "clear"); //一个DomElement貌似只能使用一次 content.appendChild(clearDiv.cloneNode(true)); //开始处理_static_bookshow content.appendChild(dynamicPage.getElementById("_static_bookshow")); content.appendChild(clearDiv.cloneNode(true)); //开始处理_static_assistBox,secrecyRelevancediv,_static_optionBox content.appendChild(dynamicPage.getElementById("_static_assistBox")); content.appendChild(dynamicPage.getElementById("secrecyRelevancediv")); content.appendChild(dynamicPage.getElementById("_static_optionBox")); content.appendChild(clearDiv.cloneNode(true)); //开始处理_static_bookShowA content.appendChild(dynamicPage.getElementById("_static_bookShowA")); content.appendChild(clearDiv.cloneNode(true)); //开始处理_static_serve content.appendChild(dynamicPage.getElementById("_static_serve")); //开始处理footer body.appendChild(clearDiv.cloneNode(true)); body.appendChild(dynamicPage.getElementById("_static_footer")); //处理错误 String finalHtml =htmlpage.asXml().replace("<?xml version=\"1.0\" encoding=\"utf-8\"?>", "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">"); finalHtml = finalHtml.replaceAll("<a class=\"prev browse left\"/>", "<a class=\"prev browse left\" ></a>"); finalHtml = finalHtml.replaceAll("<a class=\"next browse right\"/>", "<a class=\"next browse right\" ></a>"); finalHtml = finalHtml.replaceAll("<b/>", "<b></b>"); finalHtml = finalHtml.replaceAll("scrollable_2", "scrollable"); stringToFile(finalHtml,"E:\\WayOfGlory\\WebSite\\WebContent\\wwwroot\\indexHome.html");

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Java联盟 NULL

    Java联盟 NULL

    2017-12-11 18:08

  • Java开源大全

    Java开源大全

    2017-12-03 15:01

  • JavaScript Ajax实现异步通信

    JavaScript Ajax实现异步通信

    2017-11-28 13:10

  • JavaWeb学习总结(十二)

    JavaWeb学习总结(十二)

    2017-11-22 11:00

网友点评