AjaxPro客户端框架总结

    由于微软构建asp.net 2.0时对ajax技术的不重视，在04、05年ajax风起云涌之时，在asp.net出现了AjaxPro这个Ajax框架，虽然随着asp.net ajax的发布，AjaxPro被强大的asp.net ajax的光芒覆盖，但AjaxPro的简单易用性方面还是非常不错的。

    AjaxPro在客户端会输出三个Core.ashx、Converter.ashx和Prototype.ashx三个文件，其实就是javasript文件。其中Prototype.js对Object建立了extend，然后在extend上增加了Apply和Bin方法，之后的Ajax调用的核心文件Core.ashx就是基于extend上进行的。Prototype.js里对Array,String进行扩展并增加了2个事件方面的方法addEvent与removeEvent方法。

    Array对象扩展:

        push: function(o) {
		this[this.length] = o;
	},
	addRange: function(items) {
		if(items.length > 0) {
			for(var i=0; i<items.length; i++) {
				this.push(items[i]);
			}
		}
	},
	clear: function() {
		this.length = 0;
		return this;
	},
	shift: function() {
		if(this.length == 0) { return null; }
		var o = this[0];
		for(var i=0; i<this.length-1; i++) {
			this[i] = this[i + 1];
		}
		this.length--;
		return o;
	}

    String对象的扩展:

        trimLeft: function() {
		return this.replace(/^\s*/,"");
	},
	trimRight: function() {
		return this.replace(/\s*$/,"");
	},
	trim: function() {
		return this.trimRight().trimLeft();
	},
	endsWith: function(s) {
		if(this.length == 0 || this.length < s.length) { return false; }
		return (this.substr(this.length - s.length) == s);
	},
	startsWith: function(s) {
		if(this.length == 0 || this.length < s.length) { return false; }
		return (this.substr(0, s.length) == s);
	},
	split: function(c) {
		var a = [];
		if(this.length == 0) return a;
		var p = 0;
		for(var i=0; i<this.length; i++) {
			if(this.charAt(i) == c) {
				a.push(this.substring(p, i));
				p = ++i;
			}
		}
		a.push(s.substr(p));
		return a;
	}

    String对象还增加了2个静态方法:

        format: function(s) {
		for(var i=1; i<arguments.length; i++) {
			s = s.replace("{" + (i -1) + "}", arguments[i]);
		}
		return s;
	},
	isNullOrEmpty: function(s) {
		if(s == null || s.length == 0) {
			return true;
		}
		return false;
	}

    可以看到扩展的方法都是C#风格的，使得在javasript中能如C#中一样进行字符串与数组操作。 更重要的是Converter.js中增加了DataTable、DataSet、Dictionary和NameValueCollection，使得我们可以在客户端组装以上对象并在需要的时候发往服务端。可以想象在服务端的ajax方法接受一个DataTable类型的参数，那是如何的愉快。

一、DataTable

    客户端代码：

        function SendDataTable() {
            var dataTable = new Ajax.Web.DataTable();
            dataTable.addColumn("id", "System.Int32");
            dataTable.addColumn("name", "System.String");
            var row = new Object();
            row.id = "001";
            row.name = "xiaopang";
            dataTable.addRow(row);
            var ret = ZyYz_Default.HanderDataTable(dataTable);
            alert(ret.value);
        }

    服务端代码:

        [AjaxPro.AjaxMethod]
        public int HanderDataTable(DataTable dataTable)
        {
            foreach (DataRow dataRow in dataTable.Rows)
            {
                //do somethig...
            }
            return 1;
        }

二、DataSet(基本同DataTable，只是类型为Ajax.Web.DataSet)

三、Dictionary:

    客户端代码:

        function SendDictionary() {
            var dictionary = new Ajax.Web.Dictionary("Dictionary", [["004", "xiaopang"], ["005", "xiaopang005"]]); dictionary.add("006", "xiaopang006"); alert("是否存在005元素:" + dictionary.containsKey("005") + "值为:" + dictionary.getValue("005")); var ret = ZyYz_Default.HandDictionary(dictionary).value; alert("Dictionary元素数目:" + ret); }

服务端代码:

        [AjaxPro.AjaxMethod]
        public int HandDictionary(Dictionary<string, string> dictionary)
        {
            return dictionary.Count;
        }

四、关于直接传递Class

    服务端代码:

        public class TestClass
        {
            public int Id{ get; set; }
            public string Name { get; set; }
        }
    
        [AjaxPro.AjaxMethod]
        public TestClass GetTestClass()
        {
            return new TestClass{ Id =002,Name="oldXiaoPang"};
        }
 
        [AjaxPro.AjaxMethod]
        public TestClass PutTestClass(TestClass testClass)
        {
            testClass.Id = 003;
            return testClass;
        }

    客户端代码:

        function GetTestClass() {
            var testClass = ZyYz_Default.GetTestClass().value;
            testClass.Name = "newName";
            var newTestClass = ZyYz_Default.PutTestClass(testClass).value;
            alert("原Id为:" + testClass.Id + " 现Id为:" + newTestClass.Id);
            alert(" 现Name为:" + newTestClass.Name);
        }

    关于core.js的ajax核心方法还没有仔细看。

转载于:https://www.cnblogs.com/xiaopang2010/archive/2010/07/22/1783349.html