【总结】Ajax Asp.Net 交互处理方式（二）

在（一）中已经阐述了此处理方式的基本工作流程和原理。本章讨论流程前端（Javascript）的设计编写。
本文以Jquery库为例来构建前端处理对象。

通过第一章的分析，我们知道前端的主要任务就是：统一托管，一边托管前台用户的所有Ajax请求，一边对回馈的

“消息协议”进行解析处理。至于第一部分托管前台Ajax请求,可以直接借助Jquery中的Ajax来完成。为此需要构建

一个对象（Jquery插件），相对与全局而言其为一个静态对象（JsonInfo）。

下面对JsonInfo进行进一步设定：

1、为实现Ajax的抛送，我希望JsonInfo有一个公有方法“SendInfo”

2、SendInfo 方法应该有多种参数形式，以保证调用者对传递参数有不同的关心度。因此JsonInfo必须实现伪重载

3、不论我传递何种参数形式最终都必须转换为标准形式，再通过私有方法“_SendInfo（Object）”统一发送。
这里说明下为什么要转换为标准形式。标准形式确切的说是一个Javascript的Object对象，其中各个成员就对应了
各个参数。定义为这种标准形式是为了参数的传递，Ajax请求会有不同的结果（成功，失败），如果要将一些参数
贯穿于整个请求的始末，Object是唯一的很好的选择。同时我定义为Object还有一个原因，相对于不定的参数而言
其有很好的存储和访问方式。后续的设计中很可能采用请求池的方式，这样通过Object来封装请求参数便能够在池
中很好的保存与读取。所以Object的采用一是方便参数传递，另外也便于日后的扩展。

4、需要提供Debug。在设定的域名下Debug自动关闭，保证出错时用户收到的是友好的错误提示。相反在非此域名下
出错后将出现详细信息。

5、支持全局属性设定，同时也支持局部属性设定。

经过这些考虑，我们可以设定出最终的对象代码：

/*======================说明=================

本库基于Jquery制作。此Jsoninfo前端是用来处理
项目中用到的Ajax信息交流，服务端需要配合Net版本
的JsonInfo来实现，具体使用方法见整合实例或浏览
作者博客。

此版本为1.3测试版本，有部分程序块标示为了
TODO，是为以后扩展预留

FoxHunter

=============================================*/

//JS方式的重载实现
function addMethod(object, name, fn){
var old = object[ name ];
object[ name ] = function(){
if ( fn.length == arguments.length ){
return fn.apply( this, arguments );
}
else if ( typeof old == 'function' ){
return old.apply( this, arguments );
}
}
};

$.JsonInfo = new function() {
var Version = "1.3"; //版本标示
var Author = "FoxHunter"; //作者
var Debug = true; //是否开启全局Debug
var Domain = "foxhunter"; //外网域名（在url中出现（包含）此字串时，自动关闭Debug，保证外网只会看到有好的用户提示）
var Cache = false;//全局Ajax缓存设定
CheckUrl();
//========Private Methods========
//检测Url 确定是否关闭全局调试
function CheckUrl() {
if (window.location.href.toLowerCase().indexOf(Domain.toLowerCase()) != -1) {
Debug = false;
}
};

//发送请求（private）
var _SendInfo = function(req) {
//定义一个默认的请求体
var reqObject = {
type: "post",
url: "",
data: "",
//==<option> 可选,您可以自己增加,但是不要删除现有的定义==
timeout: 5000,
tipInfo: "",
cache: Cache,
rightNow: true//后续扩展用

}
$.extend(reqObject, req);

//需要进行请求时的用户提示
if (reqObject.tipInfo != "") {
//TODO：在指定位置 或另外弹出提示层
}

//请求类型为立即请求
if (reqObject.rightNow) {
$.ajax({
type: reqObject.type,
dataType: "json", //设置解析数据方式为json
url: reqObject.url,
cache: reqObject.cache,
data: reqObject.data,
timeout: reqObject.timeout, // 超时时间
//成功执行ajax后的回调函数，e为服务端返回的Javascript Object对象,reqObject为请求时的信息
success: function(e) { doJsonInfoCallBack(e, reqObject) },
error: function(XMLHttpRequest, textStatus, errorThrown)
{ doJsonInfoError(XMLHttpRequest, textStatus, errorThrown, reqObject) }  //ajax执行发生错误后调用，同样将请求时的参数信息传过去
});
} else {
//TODO: 预留 后续采用请求池时使用
}

}

var doJsonInfoCallBack = function(e, reqObject) {
var ALL = e; //ALL 是关键字
if (e._Success != "") alert(e._Success);
if (e._Fail != "") alert(e._Fail);
if (e._Action != "") {
//后续动作
eval(e._Action);
}
}

var doJsonInfoError = function(XMLHttpRequest, textStatus, errorThrown, reqObject) {
//判断错误状态
switch (textStatus) {
case "timeout":
alert("发生超时错误");
break;
case "error":
if (Debug == true) {
document.writeln(("<font style='font-size:20px;color:Blue'>Error:Debug 模式已经打开 </font><div style='padding:10px;color:Green;font-size:14px;'>如果要关闭此模式，请设置js中的Domain值，或通过实例对象的CloseDebug()方法关闭  （<font style='color:red;font-size:14px;'>以下为错误信息：</font>）</div><div style='width:100%;height:100%; border:2px dashed gray; padding:10px;'>" + XMLHttpRequest.responseText + "</div>")); } else {
alert("网络繁忙！请稍后再试！");
}
break;
default:
alert("发生错误");
break;
}

}

//========Private Methods End========

//========Public Methods============

this.About = function() {
alert("Plug Name:JsonInfo (Jquery)\nAuthor:" + Author + "\nVersion:" + Version);
}

this.CloseDebug = function() {
Debug = false;
}

this.SetCache = function(b) {
Cache = b;
}

///发送消息（传入的是消息体）
addMethod(this, "SendInfo", function(req) {
_SendInfo(req);
});

addMethod(this, "SendInfo", function(method, remoteurl, pars) {
_SendInfo({ type: method, url: remoteurl, data: pars });
});

addMethod(this, "SendInfo", function(method, remoteurl, pars, timeout) {
_SendInfo({ type: method, url: remoteurl, data: pars, timeout: timeout });
});

addMethod(this, "SendInfo", function(method, remoteurl, pars, timeout, tipinfo) {
_SendInfo({ type: method, url: remoteurl, data: pars, timeout: timeout, tipInfo: tipinfo });
});

} ();

这样,前台的大致功能就已经完成。值得注意的是doJsonInfoCallBack 方法，其中出现的_Success，_Fail ，_Action这些就

是第一章中提到的“消息协议”的头信息，这里的值是有后台.NET封装时定义的。同时也请注意关键字ALL和eval(e._Action);

ALL的作用就是重新拿到后台传回的所有信息，因此在后台Action中就可以直接“函数名（ALL）”形式来返回。再通过eval就可以出发制定的函数了。

下一章：后台“消息协议” 对象的编码实现
[From: http://foxhunter.yo2.cn/articles/ajax-aspnet-02.html ]