[项目总结-原创]InternetRadio项目Ajax技术方案选型

1 综述

InternetRadio项目是一个基于Web2.0理念的面向大众的音乐共享站点，其大量使用了Ajax功能来提高用户的体验效果，并提高数据传输的效率，典型的比如Autosuggest、添加音乐评论等。为了便于相关代码的集中控制，InternetRadio项目从底层封装、Ajax框架选型、代码管理等方面加以控制。

Ajax框架选型：Prototype提供Ajax封装，Script.aculo.us提供UI封装。

代码集中管理：在App_Code/BusinessHandler.cs中统一控制Ajax内容的输出。

Server端底层实现：利用C#的反射机制，实现Ajax客户端对Server端API的调用。

1.1 Ajax和UI框架选型

InternetRadio选用Prototype（http://www.prototypejs.org/）作为底层Ajax底层框架，包括Ajax API封装和 Javascript扩展；另外选择Script.aculo.us（http://script.aculo.us/）作为UI框架，利用其包括Autosuggest等在内的UI特性。

另外，作为辅助，增加Javascript/AjaxPublic.js进一步封装Prototype API，提供一系列方法简化Ajax客户端调用，比如PreparePostData()、AjaxGetFromUrl()、AjaxGetFromUrlSynchronous()等。

1.2 基于反射的Ajax远程调用实现

与Ajax.NET Professional（http://www.ajaxpro.info/）类似，InternetRadio项目也支持Ajax客户端对Server端API的直接调用，比如：

function Init() {

new Ajax.Autocompleter(

'<%=KeywordTextBox.ClientID %>',

'AutoSuggestion',

'../BusinessHandler/AutosuggestForKeywordSearch.ajax',

{

tokens:",",

paramName:"ajax_keyword",

callback: AutoSuggestionCallback

}

);

}

在上述代码中，Ajax直接调用Server端BusinessHandler类的AutosuggestForKeywordSearch方法。Suryani.Ajax Project提供了上述调用的支持和实现。

提供Suryani.Ajax.Service.ServiceManager.Register(string package, Type serviceType)方法，用于注册要开放给客户端Ajax调用的类。ServiceManager将所注册的类保存在全局变量modules中。

开放Suryani.Ajax.Utility.AjaxConfiguration.Register(Dictionary<string, Type> source)供Global.asax调用，用于在Website启动时向Server注册全部要开放给客户端调用的类。AjaxConfiguration.Register()方法调用ServiceManager.Register()方法完成所有类的注册。

增加Suryani.Ajax.Service.AjaxMethodAttribute自定义标签类，用于标识要开放给客户端调用的类方法。Suryani.Ajax.Service.ServiceManager.Register()方法将遍历所注册类的全部方法，将附加AjaxMethod自定义标签的所有方法保存在modules全局变量中，以备客户端Ajax调用。

提供Suryani.Ajax.Service.AjaxHttpHandler自定义HttpHandler类，拦截来自客户端的所有Ajax 请求（该请求的URL以".ajax"结尾），解析URL，利用反射的原理从全局变量modules中获取已注册的类和方法，并将执行结果输出到客户端。



初始化并注册类



Ajax远程调用Server端API的过程

1.3 Ajax代码集中管理

由于InternetRadio项目中大量用到Ajax功能，客户端Ajax可以直接调用Server端的API，而且每一个Ajax请求都需要Server端根据请求组织要交付Browser端的内容。为了对这些代码集中管理，我们在App_Code中增加了BusinessHandler类，作为Browser端与Server端的中介，负责请求的响应和内容的组织。而且整个项目中，只开放BusinessHandler供客户端直接调用调用。比如：

/// <summary>

/// 根据标签关键词搜索对应的标签

/// </summary>

/// <param name="keyword"></param>

[AjaxMethod]

public string FindTagsByKeyword(string keyword)

{

StringBuilder builder = new StringBuilder();

try

{

IList<Tag> tags = TagManager.FindTagsByKeyword(keyword);

if (tags != null)

{

builder.Append("<ul>");

foreach (Tag tag in tags)

{

builder.Append(string.Format(CultureInfo.CurrentCulture, "<li>{0}</li>", tag.TagName));

}

builder.Append("</ul>");

}

}

catch { }

return builder.ToString();

}

1.4 典型应用

1.4.1 简单的Ajax应用：添加歌曲标签

URL：http://nyxm.vicp.net:5052/Music/Music.aspx?MusicId=26553

功能描述：为当前歌曲添加相应的自定义标签

程序主文件：UserControl/MusicInfoControl.ascx

代码流程：

单击"保存"按钮：SaveTagButtonOnClick()

function SaveTagButtonOnClick()

{

var tagName = $('<%= TagNameTextBox.ClientID %>').value;

var musicId=$('<%= MusicIdHiddenField.ClientID %>').value;

var url = "/BusinessHandler/AddTag.ajax?ajax_tagName=" + encodeURIComponent(tagName) + "&ajax_musicId="+musicId;

AjaxGetFromUrl(url,SaveTagCallBack);

$('<%= TagNameTextBox.ClientID %>').value="";

}

调用AjaxGetFromUrl()方法，通过Prototype向Server端发起Ajax请求。

AjaxHttpHandler拦截到Ajax请求，执行BusinessHandler.AddTag()方法，向Browser输出以<span>形式组织的标签列表：

/// <summary>

/// 添加歌曲的标签

/// </summary>

/// <param name="tagName"></param>

/// <param name="musicId"></param>

[AjaxMethod]

public string AddTag(string tagName, int musicId)

{

int userId = ContextAccessor.Current.UserId;

string createBy = ContextAccessor.Current.UserName;

TagManager.Add(tagName, createBy, musicId, userId);

IList<Tag> tags = TagManager.FindTagsByMusicId(musicId);

StringBuilder returnString = new StringBuilder();

foreach (Tag tag in tags)

{

returnString.Append("<span>");

returnString.Append(PageContentBuilder.BuildTagSearchLink(tag.TagName, tag.TagName));

returnString.Append("</span>  \n");

}

return returnString.ToString();

}

回调函数SaveTagCallBack()检测到 Server端返回的标签列表，将其呈现在页面上：

function SaveTagCallBack(request)

{

$('TagListDiv').innerHTML = request.responseText;

}





1.4.2 结合Script.aculo.us的应用：Autosuggest

URL：http://nyxm.vicp.net:5052/Index.aspx

功能描述：根据关键词框的输入，自动提示补录。

程序主文件：UserControl/ QuickSearchControl.ascx

代码流程：

页面初始化：

当页面载入的时候，利用Script.aculo.us的Autocompleter控件实现对关键词输入框的监控。

function Init() {

new Ajax.Autocompleter(

'<%=KeywordTextBox.ClientID %>',

'AutoSuggestion',

'../BusinessHandler/AutosuggestForKeywordSearch.ajax',

{

tokens:",",

paramName:"ajax_keyword",

callback: AutoSuggestionCallback

}

);

}

Event.observe(window,'load',Init);

当用户在关键词输入框输入关键词时，Autocompleter控件向Server端发起Ajax请求，检索提示内容。AjaxHttpHandler拦截该请求，执行BusinessHandler.AutosuggestForKeywordSearch()方法：

/// <summary>

/// 根据关键词检索对应的音频

/// </summary>

/// <param name="searchType"></param>

/// <param name="keyword"></param>

/// <returns></returns>

[AjaxMethod]

public string AutosuggestForKeywordSearch(string searchType, string keyword)

{

if (searchType.Equals(WebConstants.Search_Player, StringComparison.OrdinalIgnoreCase))

{

return FindPlayersByKeyword(keyword);

}

else if (searchType.Equals(WebConstants.Search_Music, StringComparison.OrdinalIgnoreCase))

{

return FindMusicByKeyword(keyword);

}

else if (searchType.Equals(WebConstants.Search_Tag))

{

return FindTagsByKeyword(keyword);

}

return string.Empty;

}

Server端以无序列表<ul>的形式组织返回给Browser端的Autosuggest内容列表。

回调函数AutoSuggestionCallback()将Autosuggest内容呈现在页面上：

function AutoSuggestionCallback(obj) {

var searchType = "Player";

if($("<%=PlayerRadioButton.ClientID %>").checked == true) searchType = "Player";

else if($("<%=MusicRadioButton.ClientID %>").checked == true) searchType = "Music";

else if($("<%=TagRadioButton.ClientID %>").checked == true) searchType = "Tag";

return "ajax_searchType="+searchType+"&ajax_keyword="+ encodeURIComponent(obj.value);

}