[原创]关于搭建企业级应用的AJAX框架

AJAX得到大家越来越高的重视，其实AJAX理论十分简单，就是基于浏览器XMLHTTP组件，完成客户端与服务端的数据通信，以大幅度减少B/S模式程式的HTTP请求，提高综合相应速度。

但是如果在缺乏AJAX框架的条件下，仅仅停留在应用层面的AJAX技术，那反而会大大增加开发者的开发成本。使得AJAX的发展面临曲折。

因此一套完善的AJAX框架是十分必要的。


在学习下面的一个具体实例后，相信大家会对AJAX本身以及AJAX框架特点有一个具体的认识。

先来一段代码大家看看：

 1_import("com.homolo.rss.feedparser.Feed");
 2function init()
 3{
 4
 5  showRss("http://www.cnblogs.com/rss.aspx?teamid=52",
 6    document.getElementById("rssTD"));
 7
 8}
 9
10function showRss(url, obj)
11{
12  if ((url != "")&&(obj))
13  {
14    obj.innerHTML = "loading";
15    var feed = new com.homolo.rss.feedparser.Feed();
16    feed.url = url;
17    feed.setting.uiObj=obj;
18    feed.setting.onloaded=feedLoaded;
19    //alert(feed.setting.onloaded);
20    feed.parse(obj);
21  }
22}

上面的是一个基于JSVM框架而写的一个具体应用，主要功能是实现RSS在线阅读器的功能。
第一行代码是JSVM下导入一个写好的RSS解析类，后面的showRss方法是具体调用，由于JSVM实现了JS的面向对象编程模式（以后将着重介绍），因此，一切都很简单，只要导入FEEDPARSER类，然后设置FEED URL，然后设定必要的显示参数，最后解析一切就完成了。

而数据的获得与分析都通过JSVM框架来完成，那么我们来看看这个类是如何工作的：

  1# language: JSVM2
  2
  3/**//**
  4* @classname: feedparser
  5* @description：RSS FEED Parser
  6* @classpath: com.homolo.rss.feedparser
  7* @file：Feed.jsc,Item.jsc,GetFeed.jsc,FeedConfig.jsc
  8* @author: seasky7
  9* @lastmod: 2005-10-12
 10*/
 11
 12package com.homolo.rss.feedparser;
 13
 14import com.homolo.rss.feedparser.FeedConfig;
 15import com.homolo.rss.feedparser.Item;
 16import com.homolo.rss.feedparser.GetFeed;
 17
 18
 19
 20class Feed ()
 21{
 22        this.url = "";
 23        this.xmldom = "";
 24        this.title = "";
 25        this.description =  "";
 26        this.link =  "";
 27        this.language =  "";
 28        this.copyright =  ""
 29        this.pubDate =  new Date();
 30        this.docs =  "";
 31        this.image =  new function()
 32        {
 33            this.url = "";
 34            this.title = "";
 35            this.link = "";
 36            this.width = 0;
 37            this.height = 0;
 38        }
 39        this.items = [];
 40        this.error=null;
 41        this.setting = new function()
 42        {
 43            this.async = true;
 44            this.showType = "default";
 45            this.itemNum = 10;
 46            this.titleLen = 0;
 47            this.onloaded = "";
 48            this.uiObj = null;
 49        }
 50}
 51
 52Feed.prototype.addItem = function (itemObj)
 53{
 54    var l = this.items.length;
 55    this.items[l] = itemObj;
 56}
 57
 58Feed.prototype.parse = function (container)
 59{
 60
 61    var onloaded = function (result)
 62    {
 63
 64        if (result.error != null)
 65        {
 66            _this.error=FeedConfig.error_feedText;
 67            return false;
 68          
 69          _this.error=FeedConfig.error_loadText;
 70          result.error.printStackTrace();
 71        }
 72        else
 73        {
 74            this.xmldom=result.value;
 75            var feedXmlDom=this.xmldom.documentElement;
 76            if(feedXmlDom==null){
 77                _this.error=FeedConfig.error_feedText;
 78                return false;
 79            }
 80            
 81            var singNode=null;
 82            singNode=feedXmlDom.selectSingleNode("//title")
 83            if(singNode!=null)_this.title = singNode.text;
 84            singNode=feedXmlDom.selectSingleNode("//description")
 85            if(singNode!=null)_this.description = singNode.text;
 86            singNode=feedXmlDom.selectSingleNode("//link")
 87            if(singNode!=null)_this.link = singNode.text;
 88            singNode=feedXmlDom.selectSingleNode("//pubDate")
 89            if(singNode!=null)_this.pubDate = singNode.text;
 90            
 91            
 92            var ItemNodes=feedXmlDom.selectNodes("//item");
 93            
 94            if(ItemNodes!=null){
 95                var tmpItem,itemNode;
 96                for(var i=0;i<ItemNodes.length;i++)
 97                {
 98                    tmpItem=new com.homolo.rss.feedparser.Item();
 99                    
100                    itemNode=ItemNodes[i].getElementsByTagName("title");
101                    if(itemNode.length>0)tmpItem.title=itemNode[0].text;
102                    itemNode=ItemNodes[i].getElementsByTagName("link");
103                    if(itemNode.length>0)tmpItem.link=itemNode[0].text;
104                    itemNode=ItemNodes[i].getElementsByTagName("pubDate");
105                    if(itemNode.length>0)tmpItem.pubDate=itemNode[0].text;
106                    itemNode=ItemNodes[i].getElementsByTagName("dc:creator");
107                    if(itemNode.length>0)tmpItem.author=itemNode[0].text;
108                    itemNode=ItemNodes[i].getElementsByTagName("description");
109                    if(itemNode.length>0)tmpItem.description=itemNode[0].text;
110                    
111                    _this.addItem(tmpItem);
112                }
113            }
114        }
115        _this.build(container);
116    if (_this.setting.onloaded instanceof Function)
117    {
118        //if(_this.setting.onloaded!=""){
119            _this.setting.onloaded(_this);
120            //alert(2);
121        }
122    };
123
124
125    var _this = this;
126    GetFeed.loadFeedByUrl(this.url,this.setting.async,onloaded);
127
128}
129
130Feed.prototype.toString = function()
131{
132    var Strs="";
133    var itemLen = this.setting.itemNum;
134    
135    if(this.error==null){
136        switch(this.setting.showType){
137            case "li":
138                Strs="<ul>";
139                if(itemLen>this.items.length)itemLen=this.items.length;
140                for(var i=0;i<itemLen;i++){
141                    Strs+= "<li><a href='"+this.items[i].link+"' target='_blank'>"
142                    Strs+= this.items[i].title+"</a></li>";
143                }
144                Strs+="</ul>";
145            break;
146            case "ContentList":
147                Strs="<ul>";
148                if(itemLen>this.items.length)itemLen=this.items.length;
149                for(var i=0;i<itemLen;i++){
150                    Strs+= "<li><a href='#' onclick='feedShowContent("+i+");return false;' target='_blank'>"
151                    Strs+= this.items[i].title+"</a></li>";
152                }
153                Strs+="</ul>";
154            break;
155            case "table":
156                
157            break;
158                
159            default :
160                Strs="<ul>";
161                if(itemLen>this.items.length)itemLen=this.items.length;
162                for(var i=0;i<itemLen;i++){
163                    Strs+= "<li><a href='"+this.items[i].link+"' target='_blank'>"
164                    Strs+= this.items[i].title+"</a></li>";
165                }
166                Strs+="</ul>";
167        }
168        
169    }else{
170        Strs=this.error;    
171    }
172    
173    
174    return Strs;
175}
176
177Feed.prototype.build = function(container)
178{
179    if (container == null) {
180        document.write(this.toString());
181    }    else {
182        container.innerHTML = this.toString();
183    }
184}

这就是FEEDPARSER类的主要文件FEED.JSC的内容，首先要说明一下，前二十行代码是JSVM2语法特有的，这也是JSVM框架自带的一个完全独立的语法解析器，因为JS是没有package import等关键词支持的（这个不是本文的重点，将以后独立介绍）。Feed.jsc,Item.jsc,GetFeed.jsc,FeedConfig.jsc 这几个是FEEDPARSER类包的组成部分。
我们可以看到，在126行GetFeed.loadFeedByUrl(this.url,this.setting.async,onloaded); 这个是完成数据异步读取的关键语句，也就是完成了数据的远程数据的读取。
好的，接下来我们就来看看GetFeed这个文件：

 1# language: JSVM2
 2
 3/**//**
 4* @classname: feedparser
 5* @description：RSS FEED Parser
 6* @classpath: com.homolo.rss.feedparser
 7* @file：Feed.jsc,Item.jsc,GetFeed.jsc,FeedConfig.jsc
 8* @author: seasky7
 9* @lastmod: 2005-10-12
10*/
11
12package com.homolo.rss.feedparser;
13
14import com.homolo.commons.util.ResourceLoader;
15import com.homolo.jsvm4s.ClientHelper;
16
17class GetFeed ()
18{
19}
20
21
22GetFeed.loadFeedByUrl = function (uri, async, onLoadComplete)
23{
24    async = async || false;
25    var tmpUrl=uri;
26    if(!this.isLocalUrl(tmpUrl)){
27        var helper = new ClientHelper();
28        tmpUrl=helper.getHttpProxyUrl(tmpUrl);
29    }
30    ResourceLoader.loadXml(tmpUrl,async,onLoadComplete);
31    
32}
33
34GetFeed.isLocalUrl = function (uri)
35{
36
37    if(uri.indexOf("http://")!=0){
38        return true;
39    }
40    else {
41        var appLocation = window.location.href;
42        var LocationDomain = appLocation.substring(0,appLocation.indexOf("/", 7));
43        if(uri.indexOf(LocationDomain)==0){
44            return true;
45        }
46        else{
47            return false;
48        }
49        return false;
50    }
51
52}
53
54var LoadResult = function (value, error)
55{
56    this.value = value;
57    this.error = error;
58}
59

这里面主要完成数据读取的是ResourceLoader.loadXml(tmpUrl,async,onLoadComplete);
而ResourceLoader这个是JSVM提供的一个基础类包，主要完成数据的读取。

到这里大家可以清楚的看到一个AJAX框架的强大应用了，首先JS本身并不具备面向对象编程的特点，而JSVM很好的解决了，其次，当一个强大的面向对象框架JSVM搭建好后，AJAX技术的完美实现，则为JS语言打开了前所未有的广阔前景。

本文提到的例子可以在这里查看：http://jsvm.homolo.com/

欢迎和大家交流！

BY:HOMOLO SEASKY7