1. 浏览器发送一个HTTP请求到Web服务器。2. Web服务器解析请求，然后读取数据存储层，制定一个HTML文件，并用一个HTTP响应把它发送到客户端。3. HTTP响应通过互联网传送到浏览器。4
1. 浏览器发送一个HTTP请求到Web服务器。2. Web服务器解析请求，然后读取数据存储层，制定一个HTML文件，并用一个HTTP响应把它发送到客户端。3. HTTP响应通过互联网传送到浏览器。4. 浏览器解析Web服务器的响应，使用HTML文件构建了一个的DOM树，并且下载引用的CSS和JavaScript文件。5. CSS资源下载后，浏览器解析它们，并将它们应用到DOM树。6. JavaScript资源下载后，浏览器解析并执行它们。 package com.pipe.servlet;import java.io.IOException;import java.io.PrintWriter;import java.util.ArrayList;import java.util.List;import java.util.concurrent.Callable;import java.util.concurrent.ExecutorService;import java.util.concurrent.Executors;import java.util.concurrent.TimeUnit;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.pipe.dao.DbDao;import com.pipe.dao.impl.DbDaoImpl;/** * 处理请求的Servlet * Class Name: BigPipeServlet.java * @author zhangyu DateTime 2012-7-10 下午5:53:21 */public class BigPipeServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { ExecutorService executor = Executors.newFixedThreadPool(3);//因为测试3个模块 final PrintWriter writer = response.getWriter(); //输出HTML String doctype = "<!DOCTYPE html PUBLIC /"-//W3C//DTD XHTML 1.0 Strict//EN/"/n" + " /"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd/">"; String head = "<html xmlns=/"http://www.w3.org/1999/xhtml/" xml:lang=/"de/" lang=/"de/"> /n" + "<head> /n" + "<meta http-equiv=/"Content-type/" content=/"text/html; charset=utf-8/" /> /n" + "<meta http-equiv=/"Content-language/" content=/"de/" />/n"; writer.write(doctype); writer.write(head); writer.write("<link href='pagelet.css' type='text/css' rel='stylesheet' />"); writer.write("<script type=/"text/javascript/" src=/"pagelet.js/"></script>"); writer.write("<script type=/"text/javascript/" src=/"jquery.js/"></script>"); writer.write("</HEAD><BODY><div>Progressive Loading"); content(writer, "content1", "content2", "content3"); writer.write("</div>/n"); final DbDao dbDao = new DbDaoImpl(); //年级Pagelet List<Callable<Boolean>> tasks = new ArrayList<Callable<Boolean>>(); tasks.add(new Callable<Boolean>() { public Boolean call() { try { Thread.sleep(1000); pagelet(writer, "1", dbDao.getGrades().toString());//[{name:'aa'},{name:'bb'}] } catch (InterruptedException e) { e.printStackTrace(); } return true; } }); //班级Pagelet tasks.add(new Callable<Boolean>() { public Boolean call() { try { Thread.sleep(2000); pagelet(writer, "2", dbDao.getClasses().toString()); } catch (InterruptedException e) { e.printStackTrace(); } return true; } }); //学生Pagelet tasks.add(new Callable<Boolean>() { public Boolean call() { try { Thread.sleep(3000); pagelet(writer, "3", dbDao.getUserInfo().toString()); } catch (InterruptedException e) { e.printStackTrace(); } return true; } }); try { executor.invokeAll(tasks, 3100, TimeUnit.MILLISECONDS); } catch (InterruptedException ignored) { } executor.shutdown(); writer.write("</BODY></HTML>"); writer.close(); } private void content(PrintWriter writer, String... contentIds) { for (String id : contentIds) { writer.write("<div id=/"" + id + "/">-</div>/n"); } } private void pagelet(PrintWriter writer, String id, String content) { if (writer.checkError()) return; writer.write("<script>arrived(/"content" + id + "/",/"" + content + "/",/"/",/"/")</script>"); writer.flush(); }}
pagelet.js主要负责加载对应模块的JS和CSS，然后加载，我曾试过直接加载JS，会报招不到方法，就用ajax加载JS和 CSS。
var i=0;function arrived(id,text,js,css) { if(i==0) { $.ajax({ url:'http://localhost:8080/pipe/Iterator.js', type: 'GET', dataType: 'script', success: function(xml){ IncludeJS(id,xml) var html=iterator(text);//因为后头返回是JSON，所以每个模块提供以个解析JSON的JS，此处3个模块都一样逻辑。 var b=document.getElementById(id); b.innerHTML = html; i++; } }); }else { var html=iterator(text); var b=document.getElementById(id); b.innerHTML = html; } }function IncludeJS(id, source){ var oHead = document.getElementsByTagName('HEAD').item(0); var oScript = document.createElement( "script" ); oScript.language = "javascript"; oScript.type = "text/javascript"; oScript.id = 123; oScript.defer = true; oScript.text = source; oHead.appendChild( oScript );}
//每个模块对应的数据解析JS，这里3个业务一样，所以都加载Iteratorfunction iterator(json){ var str='<ul id="content_ul">'; var list=eval("("+json+")");//把Json转化为JS数组 for(var i=0;i<list.length;i++) { var obj=list[i]; str+='<li>'+obj.name+'</li>'; } str+='</ul>'; return str;}
body *{margin:0px;padding: 0px;} #content1{width:100%;height:100px;border:1px solid } #content2{width:20%;height:100%;float:left;border:1px solid ;} #content3{width:80%;height:100%;border:1px solid ;margin-left:20%;} #content_ul{list-style: none;margin-left:10px;}
