【总结】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 ]

转载于:https://www.cnblogs.com/foxhunter/archive/2009/07/30/ajax-aspnet-02.html