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

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

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

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

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

先来一段代码大家看看：

_import("com.homolo.rss.feedparser.Feed");
2

function init()
3

{
4

showRss("http://www.cnblogs.com/rss.aspx?teamid=52",
6

document.getElementById("rssTD"));
7

}
9

function 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框架来完成，那么我们来看看这个类是如何工作的：

# language: JSVM2
2

/**//**
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

package com.homolo.rss.feedparser;
13

import com.homolo.rss.feedparser.FeedConfig;
15

import com.homolo.rss.feedparser.Item;
16

import com.homolo.rss.feedparser.GetFeed;
17

class 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

Feed.prototype.addItem = function (itemObj)
53

{
54

var l = this.items.length;
55

this.items[l] = itemObj;
56

}
57

Feed.prototype.parse = function (container)
59

{
60

var onloaded = function (result)
62

{
63

if (result.error != null)
65

{
66

_this.error=FeedConfig.error_feedText;
67

return false;
68

_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

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

var ItemNodes=feedXmlDom.selectNodes("//item");
93

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

130

Feed.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='#' οnclick='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

177

Feed.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这个文件：

# language: JSVM2
2

/**//**
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

package com.homolo.rss.feedparser;
13

import com.homolo.commons.util.ResourceLoader;
15

import com.homolo.jsvm4s.ClientHelper;
16

class GetFeed ()
18

{
19

}
20

GetFeed.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

}
33

GetFeed.isLocalUrl = function (uri)
35

{
36

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

}
53

var 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

转载于:https://www.cnblogs.com/homolo/archive/2005/10/16/256010.html

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

详解从零搭建企业级 vue3 + vite2+ ts4 框架全过程
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群本文不仅仅是搭建个脚手架这么简单,还会带你了解每一步.甚至每一个配置项的作用,和每个配置的知 ...
Spring Boot+Gradle+ MyBatisPlus3.x搭建企业级的后台分离框架
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! 作者:任务加油站原文:toutiao.com/i6861 ...
gradle官方文档_Spring Boot+Gradle+MyBatisPlus3.x搭建企业级的后台分离框架
你再主动一点点我们就有故事了原文:toutiao.com/i6861456496740270604 1.技术选型解析器:FastJSON 开发工具:JDK1.8 .Gradle.IDEA 技 ...
企业级ajax框架,企业级AJAX框架设计与实现.pdf
企业级AJAX框架设计与实现 7 3 () Vo.l 7 No. 3 2007 9 JOURNAL OF NAN JING NORMAL UN IVER ITY ( ENG INEERING AND ...
如何使用 Go 语言搭建企业级高并发服务器？
每到节假日和过年,需要外出通行的人几乎都会遇到一个问题:抢火车票!当全国上亿人都在固定的时间段抢票,服务器动辄就要承受上百万级并发的情况时,你就会明白,一个支持高并发的服务器架构有多重要! 在后端程序 ...
阿里云大数据——搭建企业级数据分析平台
目录 1.数据分析介绍 1.1数据分析基本介绍 1.2数据分析目的 1.3数据分析平台组成部分 1.4数据分析平台对应的场景 2.阿里云数加介绍 2.1数加是什么? 2.2"数加" ...
80篇各ajax框架入门教程
AJAX经典入门教程,入门实例,入门代码收藏. *VS2008 Ajax.NET快速入门教程* (2008-3-25) [本站原创]Ajax!?!入门教程之道 (2008-4-13) [本站原创]Aj ...
jumpserver 节点部署_Docker部署搭建企业级Jumpserver堡垒机（应用篇）
前言我们在搭建篇已经详细介绍了JumpServer的搭建过程,搭建完之后可以要使用JumpServer,所以说JumpServer的应用是非常重要的,接下来写了一篇应用篇,来介绍如何使用JumpSe ...
AJAX培训第二讲：使用AJAX框架（上）
点击这里下载PDF文件. 点击这里下载示例文件. 点击这里下载视频文件. 相关内容:AJAX培训第二讲:使用AJAX框架(下) 首先向大家说声抱歉,离上次隔的时间实在太长.由于一度工作比较忙,所以录制 ...

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

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

最新文章

热门文章