WCF AJAX在asp.net上的初级实现DEMO

最新推荐文章于 2021-08-06 12:11:34 发布

baysos

最新推荐文章于 2021-08-06 12:11:34 发布

阅读量524

点赞数 1

本文链接：https://blog.csdn.net/baysos/article/details/22307547

版权

WCF大家一般都知道，至于和webservice的区别，大家百度就好，最近手头新项目想用一下WCF，于是便花时间写了个简单的WCF AJAX DEMO，仅是DEMO，主要是JSON解析这块，WCF这一块没什么好说的，就是VS直接生成的。PS：JSON解析一块借鉴了一些代码，经过了自己的修修改改。

开发环境：

操作系统：WIN7 64 旗舰

服务器：IIS7

IDE：VS2010

开发语言：C#

1.WCF服务器端编码，其实很简单，VS—右击需要添加WCF文件的文件夹或项目—新建项—在Web项下选择“启用了AJAX的WCF服务”，OK文件生成

代码形如（测试用）：

    [ServiceContract(Namespace = "WCFTest2")]
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class WCFTest2
    {
        // 要使用 HTTP GET，请添加 [WebGet] 特性。(默认 ResponseFormat 为 WebMessageFormat.Json)
        // 要创建返回 XML 的操作，
        //     请添加 [WebGet(ResponseFormat=WebMessageFormat.Xml)]，
        //     并在操作正文中包括以下行:
        //         WebOperationContext.Current.OutgoingResponse.ContentType = "text/xml";
        [OperationContract]
        public void DoWork()
        {
            // 在此处添加操作实现
            return;
        }

        [OperationContract]
        public int test2(int aa, int bb)
        {
            return aa + bb;
        }

        [OperationContract]
        public List<BaseModel> test3(List<BaseModel> aa)
        {
            return aa;
        }

}

注意，如果要在WCF中使用session，请注意以下几点：

1. web.config中设置<serviceHostingEnvironment aspNetCompatibilityEnabled=”true” />

2.服务代码端每个service类前应设置特性为 [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Required)]

3.当然你得设置浏览器允许cookie

4.这时你就可以再service端用session啦，引入System.Web,然后以HttpContext.Current.Session[key] ="Some value" ; 的方式访问

另外：简单需求下web.config文件基本可以不要动，有其他具体需要可以百度……

2. JS端ajax编码

 以下是解析JSON 和ajax 的代码

var ajaxLoc = "http://localhost:80";

//过滤WCF返回的json结果
function JsonResultFilter(result) {
    if (result.d && result.d.length > 0) {
        for (var i = 0; i < result.d.length; i++) {
            var rs = result.d[i];
            if (rs.__type) {
                JsonFilter(rs);
                DateHandler(rs);
            }
        }
    }

    return result.d;
}

function JsonFilter(node) {
    if (node && node.__type) {
        delete node.__type;
    }
    else {
        return;
    }

    for (var item in node) {
        JsonFilter(node[item]);
    }
}

function DateJsonResultHandler(result) {
    if (result && result.length > 0) {
        for (var i = 0; i < result.length; i++) {
            DateHandler(result[i]);
        }
    }
}

//过滤WCF传回的dateTime类型
function DateHandler(node) {
    if (!node) {
        return;
    }

    for (var item in node) {
        if (node[item]) {
            node[item] = $.wcfDate2JsDateString(node[item]);
        }
    }
}

//格式化时间
function TimeFomat(date) {
    if (!date.getFullYear()) {
        return '';
    }

    var tf = function (time) {
        if (time.toString(10).length == 1) {
            return '0' + time.toString();
        }

        return time;
    };

    return tf(date.getFullYear()) + '-' + tf(date.getMonth() + 1) + '-' + tf(date.getDate()) + ' ' + tf(date.getHours()) + ':' + tf(date.getMinutes()) + ':' + tf(date.getSeconds());
}

//简单封装jquery ajax请求
function majax(url1, data1, success1, error1) {
    $.ajax({
        url: ajaxLoc + url1,
        type: "POST",
        contentType: "text/json",
        data: data1,
        dataType: "json",
        success: function (returnValue) {
            var rs = JsonResultFilter(returnValue);
            success1(rs);
        },
        error: error1
    });
}

//将Object对象转换成格式为json的字符串，支持子对象,一般应用于有且只能有一个实体参数的接口
//参数：
//o：object对象
//paramName：传入到后台方法的参数名
//如：
//var paramList = {};
//var obj = {};
//obj.CreateDate = $.jsDate2WcfDate("2010-1-2");
//obj.CreateBy = "11";
//obj.ModifyBy = "zz1";
//obj.test = {};
//obj.test.zz = "11";
//paramList[0] = obj;
//var str = obj2jsonStr(paramList, "aa");
//则str为：{ "aa": [{"CreateDate":"/Date(1262361600000+0000)/","CreateBy": "11", "ModifyBy": "zz1", "test": { "zz": "11"} } ] }
function obj2jsonStrList(o, paramName) {
    var r = obj2jsonStr(o);
    r = r.toString().replace("{{", "[{");

    var len = r.toString().length;
    var arr = r.toString().split('');
    arr[len - 1] = ']';
    var rb = arr.join('');

    rb = '{"' + paramName + '": ' + rb + '}';
    return rb;
}

//将Object对象转换成格式为json的字符串，一般应用于非实体参数的接口
//参数：
//o：object对象
//如:
//var obj = {};
//obj.aa = "11";
//obj.bb = "22";
//var str = obj2jsonStr(obj);
//则str为：{"aa":"11","bb":"22"}
function obj2jsonStr(o) {
    var r = [];
    if (typeof o == "string")
        return "\""
                + o.replace(/([\'\"\\])/g, "\\$1").replace(/(\n)/g, "\\n")
                .replace(/(\r)/g, "\\r").replace(/(\t)/g, "\\t") + "\"";
    if (typeof o == "object") {
        if (!o.sort) {
            for (var i in o) {
                if (isNaN(i.toString())) {
                    r.push("\"" + i + "\"" + ":" + obj2jsonStr(o[i]));   //(i + ":" + obj2jsonStr(o[i]));
                }
                else {
                    r.push(obj2jsonStr(o[i]));
                }
            }
            if (!!document.all
                    && !/^\n?function\s*toString\(\)\s*\{\n?\s*\[native code\]\n?\s*\}\n?\s*$/
                    .test(o.toString)) {
                r.push("toString:" + o.toString.toString());
            }
            r = "{" + r.join() + "}"
        } else {
            for (var i = 0; i < o.length; i++)
                r.push(obj2jsonStr(o[i]))
            r = "[" + r.join() + "]"
        }

        return r;
    }
    return o.toString();
}

//jQuery扩展，使WCF兼容c# DateTime类型
jQuery.extend(
    {
        wcfDate2JsDateString: function (wcfDate) {
            if (wcfDate && wcfDate.toString().substring(0, 5) == '/Date') {
                var date = new Date(parseInt(wcfDate.substring(6)));
                return TimeFomat(date);
            }
            return wcfDate;
        },
        jsDate2WcfDate: function (jsDate) {
            var ttmp = jsDate.split(' ');

            var dt;
            var ti = "00:00:00";
            var str = ""; ;
            if (ttmp.length > 0) {
                dt = ttmp[0];
                var d = dt.split('-');
                if (d.length != 3) {
                    alert('请输入正确的日期格式，如：2010-01-01');
                    return;
                }

                //形如：2010/01/01，这样才能在IE低版本中生成正确的Date对象。
                str += d[1].toString() + "/" + d[2] + "/" + d[0] + " ";
            }
            if (ttmp.length > 1) {
                ti = ttmp[1];
            }
            str += ti;

            var date = new Date(str);
            return "\/Date(" + date.getTime() + "+0000)\/";
        }
    }
);

3.页面调用，注：我引入的jquery是1.7.2版本，这个版本基本上可以满足各种层次的开发需求，并且对于IE低版本的兼容性也不错（大家都知道jquery 1.8和之后的版本放弃了对IE678的支持）

<script type="text/javascript">        $(document).ready(function () {
            $("#login").click(function () {
                lo();
            });
        });

        function lo() {
//            var obj = {};
//            obj.ui = $("#ui").val();
//            obj.cc = "cc";
//            var str = obj2jsonStr(obj);

            var paramList = {};
            var obj = {};
            obj.CreateDate = $.jsDate2WcfDate("2010-1-2");
            obj.CreateBy = "呵呵";
            obj.ModifyBy = "zz1";
            obj.test = {};
            obj.test.zz = "11";
            paramList[0] = obj;
            var str = obj2jsonStrList(paramList, "aa");

            majax('/ServiceAPI/WCFTest2.svc/test3',
                str, //'{ "aa": [{"CreateDate":"' + $.jsDate2WcfDate("2010-1-2") + '","CreateBy": "11", "ModifyBy": "zz1", "test": { "zz": "11"} }   ] }',  //, {"CreateDate":"' + $.jsDate2WcfDate("2010-1-2 12:00:00") + '","CreateBy": "12", "ModifyBy": "zz2", "test": { "zz": "12"}}
                function (returnValue) {
                    alert(returnValue[0].CreateBy);
                    //alert(rs);
                    zz = 0;
                    //window.location = "/testWeb1.aspx";
                },
                function (XMLHttpRequest, textStatus, errorThrown) {
                    switch (XMLHttpRequest.status) {
                        case 404:
                            alert("找不到相关服务");
                            break;
                        case 500:
                        default:
                            alert("");
                }
            });
        }
        
    </script>