利用JSPTagEx開發單頁面全程Ajax應用（附源碼）

PushState HTML5 Ajax JSPTagEx J2EE 

       該系統目前隻相容新版本浏覽器，如果你要使用本系統，請使用chrome全系，firefox全系，IE10+，Safari全系，Opera全系等；

歡迎來Q - Q群讨論：431040030(請注明Java等字樣），可在群裡下載下傳整個項目源碼

技術路線

小小系統的背後，它可蘊藏着諸多好玩的技術哦:)

• 基于JSPTagEx架構全程功能點探索的項目：緩存，AOP，Rewrite，高可讀URI等；
• SPA：真正全程Ajax，相比MPA網頁應用，他的開發難度不是大了一點點哦:)
• Restful API：Get,Put,Post,Delete請求标準化，隻有現代浏覽器才全支援哦:)
• HTML5：有好玩的HTML5特有技術哦，你發現了麼:)
• Web推送
• 一次登入，永久使用；

源碼分享

倫理片 http://www.dotdy.com/

首先需要一個能支援SPA開發的js架構，我們選用了Backbone，在背景方面，需要将所有請求轉發到一個servlet來處理，代碼如下：

這裡用到了架構的***，表示所有teams字首的請求都攔截到這個servlet處理，在js方面定義route：

Js代碼  

1. $.webApp.AppRouter = Backbone.Router.extend({  
2.             routes: {  
3.               '': 'root',  
4.               'teams/auth/logout': 'logout',  
5.               'teams(/:pageid)': 'goPage',  
6.               'teams/project/edit(/:id)':'goProjectEdit',  
7.               'teams/project/create':'goProjectCreate',  
8.               'teams/project(/:id)':'goProject',   
9.             },  
10.             initialize: function() {  
11.             },  
12.             logout:function(){  
13.                 $.get("/restful/api/user/logout",function(json){  
14.                     location.reload();  
15.                 });  
16.             },  
17.             root: function() {  
18.                 Backbone.history.navigate("teams/myindex", { trigger: true });  
19.             },  
20.             goPage: function(pageid) {  
21.                 if(pageid == "myindex"){  
22.                     if($.webApp.teamList == undefined || $.webApp.teamList.length == 0){  
23.                         $("h3[action=showmyteam]").text("尚未加入Team");  
24.                         var html = _.templateFromUrl('/restful/teams/template?pagename=belong_zero_team');  
25.                         $("#container").html(html());  
26.                     }  
27.                     else{  
28.                         $("#container").html(new $.webApp.TemplateView(pageid).render().$el.html());  
29.                     }  
30.                 }  
31.                 else{  
32.                     $("#container").html(new $.webApp.TemplateView(pageid).render().$el.html());  
33.                 }  
34.                 $.webApp.initMenu(function(){  
35.                     if(pageid == "sql_execute"){  
36.                         pageid = "sql";  
37.                     }  
38.                     if(pageid == "weekly"){  
39.                         pageid = "log";  
40.                     }  
41.                     $.webApp.openMenu(pageid);  
42.                 });  
43.             },  
44.             goProject:function(id){  
45.                 $("#container").html(new $.webApp.TemplateView("project", {prjid:id}).render().$el.html());  
46.                 $.webApp.initMenu(function(){  
47.                     $.webApp.openMenu("index");  
48.                 });  
49.             },  
50.             goProjectCreate:function(){  
51.                 $("#container").html(new $.webApp.TemplateView("new_project",{prjid:""}).render().$el.html());  
52.                 $.webApp.initMenu(function(){  
53.                     $.webApp.openMenu("index");  
54.                 });  
55.             },  
56.             goProjectEdit:function(id){  
57.                 $("#container").html(new $.webApp.TemplateView("new_project",{prjid:id}).render().$el.html());  
58.                 $("#psuhBtn").html("儲存項目");  
59.                 $.webApp.initMenu(function(){  
60.                     $.webApp.openMenu("index");  
61.                 });  
62.             }  
63.         });  

影音先鋒電影 http://www.iskdy.com/