展现Ajax
关键词： Ajax的一些高级功能的展现
说明:这一篇文字是对Ajax.net的一些功能介绍,笔者只是对原文的一种摘录而已,为了是方便阅读.
摘录的过程中略有删节,同时注意原文中有一些笔误,在摘录时也做了修正.
愿共同学习Ajax.net的同仁提供更多宝贵想法与珍贵资源!
1
使用Ajax:
21.使用Unicode字符发送反馈.
3 这个例子发送一个Form到Server端,调用Server端的Test1方法,并返回一个HTML的字符串.
4
5 在Server端有一个标准的方法,附加有一个额外的属性:
6 [Ajax.AjaxMethod]
7 public string Test1(string firstName, string familyName, string email, string comment)
8 {
9 string html = "";
10
11 html += "Hello " + firstName + " " + familyName + "<br>";
12 html += "Thank you for your comment <b>";
13 html += System.Web.HttpUtility.HtmlEncode(comment);
14 html += "</b>.";
15
16 return html;
17 }
18
19 客户端调用:
20 Test1:function(firstName,familyName,email,comment,callback,context){
21 return new ajax_request(this.url + '?_method=Test1&_session=no',
22 'firstName=' + enc(firstName)+ '\r\nfamilyName=' +
23 enc(familyName)+ '\r\nemail=' + enc(email)+ '\r\ncomment=' + enc(comment),
24 callback,
25 context);
26
27 其中callback定义对返回结果的处理.
282.使用自定义的类型为参数:发送一个真正的.net对象到Server端处理.
29 Client端调用:
30 var d = new DateTime(2005,08,30,0,0,0);
31 DemoMethods.Test2(d,callback);
32 Server端:
33 [Ajax.AjaxMethod]
34 public string Test2(DateTime d)
35 {
36 d = d.AddDays(1);
37 return "The next day will be " + d.ToLongDateString() + ".";
38 }
39
40 目前已经做了类型转化的有:(要实现类型转换的兼容,IAjaxObjectConverters是必要的接口)
41 - System.Collections.ArrayList
42 - System.Data.DataSet/DataTable/DataRow
43 - System.DateTime/TimeSpan
44 - System.Array
453.使用System.Data.DataSet对象来填充下拉框
46 Client端调用,当Server端返回一个DataSet时,我们的callback函数这么写:(把其中的res.value当作DataSet处理)
47 function callback(res)
48 {
49 var html = [];
50 for(var i=0; i<res.value.Tables[0].Rows.length; i++)
51 html[html.length] = "<option>" + res.value.Tables[0].Rows[i].Country + "</option>";
52 document.getElementById("display").innerHTML = "<select id=\"sel\">" + html.join("") + "</select>";
53 }
544.注意处理Server端产生的Ajax异常:返回值的error.
55 如果Server端产生了Ajax异常,那么我们在处理返回值的时候可以加以识别,callback函数:
56 function callback(res)
57 {
58 if(res.error != null){
59 alert(res.error); //处理错误的方法
60 }
61 }
625.存取SessionState,对于SessionState访问需要AjaxMethod方法带有HttpSessionStateRequirement.ReadWrite的参数说明
63例如Server端:
64 [Ajax.AjaxMethod(HttpSessionStateRequirement.ReadWrite)]
65 public void Test5(string value)
66 {
67 System.Web.HttpContext.Current.Session["example"] = value;
68 }
69 [Ajax.AjaxMethod(HttpSessionStateRequirement.Read)]
70 public string Test6()
71 {
72 if(System.Web.HttpContext.Current.Session["example"] != null)
73 return (string)System.Web.HttpContext.Current.Session["test"];
74 return "First set the value
";
75 }
766.一次请求的处理进行中,耗费时间较长,但并不影响其他请求或操作的进行.他们可以是同步进行的.
77 [Ajax.AjaxMethod]
78 public void Test7()
79 {
80 int c = 0;
81 do
82 {
83 System.Threading.Thread.Sleep(1000);
84 c++;
85 }while(c < 10);
86 }
87 当该请求完成的时候,他会触发回调callback函数的执行,所以不会引起network tracffic的发生.
88显然,这个请求需要耗费10秒,但是他的处理并不影响别的请求的进行,客户端并不会等待,而是同步进行别的活动.
89
907.在Client端使用Context,利用context存储一定的信息:
91 <script language="javascript">
92 function test8(ele)
93 {
94 DemoMethods.Test8(test8_callback, ele); // the server-side method has no arguments!
95 }
96 function test8_callback(res)
97 {
98 if(res.error == null && res.context != null)
99 res.context.innerHTML = res.value;
100 }
101 </script>
102 <span onclick="test8(this);">Element1</span>
103 <span onclick="test8(this);">Element2</span>
104
105 在这个例子中,我们就把span区域的对象作为请求的context传给请求函数,当回调callback函数接受结果时,结果中也包含这个context,
106 因此可以方便把值设给它.
1078.从Server端返回数组＆System.Collections.ICollection对象.
108 [Ajax.AjaxMethod]
109 public System.Collections.Specialized.StringCollection Test9()
110 {
111 System.Collections.Specialized.StringCollection s = new System.Collections.Specialized.StringCollection();
112 s.Add("Michael");
113 s.Add("Hans");
114 return s;
115 }
116
117 [Ajax.AjaxMethod]
118 public object[] Test10()
119 {
120 object[] o = new object[3];
121 o[0] = "Michael";
122 o[1] = DateTime.Now;
123 o[2] = true;
124 return o;
125 }
126 当然实现了ICollection接口的类都是可以的,比如ArrayList,这时我们在Client端存取的方法:
127
128 function test11_callback(res)
129 {
130 if(res.value[2]) // bolean
131 alert(res.value[1].toLocaleString()); // date
132 alert(res.value[3].FirstName + " + " + res.value[4].FirstName);
133 }
134
135 也就是说返回的value是一个数组,我们通过[]的方法存取.
1369.增加自己扩展的支持类型,需要实现IAjaxObjectConverters,增到系统中,需要修改web.config文件,
137在ajaxConverters中用add项增加Converter,用remove项删除已有的Converter:
138<configuration>
139 <configSections>
140 <sectionGroup name="ajaxNet">
141 <section name="ajaxSettings" type="Ajax.AjaxSettingsSectionHandler, Ajax" />
142 <section name="ajaxConverters" type="Ajax.AjaxConverterSectionHandler, Ajax" />
143 </sectionGroup>
144 </configSections>
145 <ajaxNet>
146 <ajaxConverters>
147 <add type="Namespace.Class1, Assembly" />
148 <remove type="Ajax.JSON.DataSetConverter, Ajax" >
149 </ajaxConverters>
150 </ajaxNet>
151</configuration>
152
15310.从Server端返回自定义的类对象,这个对象需要申明为Serializable的,而在Client端对它的操作和在Server端的操作是一样的:
154Server:
155 [Serializable]
156 public class Person
157 {
158 public string FirstName;
159 public string FamilyName;
160 public int Age = 0;
161 public Person NewChild()
162 {
163 Person p = new Person();
164 p.FamilyName = FamilyName;
165 return p;
166 }
167 public Person[] Children = null;
168 }
169Client处理返回回来的Person对象:
170 function test12_callback(res)
171 {
172 var s = res.value.FirstName + " " + res.value.FamilyName + ":\r\n";
173 for(var i=0; i<res.value.Children.length; i++)
174 s += "\t" + res.value.Children[i].FirstName + "\r\n";
175 alert(s);
176 }
17711.返回一个图片:
178 Server端:
179 [Ajax.AjaxMethod]
180 public System.Drawing.Bitmap Test16()
181 {
182 Bitmap bmp = new Bitmap(200, 50);
183 Graphics g = Graphics.FromImage(bmp);
184 g.FillRectangle(new SolidBrush(Color.Yellow), 0, 0, 199, 49);
185 g.DrawString(DateTime.Now.ToString(), new Font("Arial", 10), new SolidBrush(Color.Red), 10, 10);
186 return bmp;
187 }
188 Client端:
189 function test16_callback(res)
190 {
191 if(typeof(res.value) == 'object')
192 document.getElementById("imageholder").appendChild(res.value);
193 }
194 其中imageholder是一个div标签区域.
195
19612.使用数组作为参数:
197 在Server端有Ajax方法:
198 [Ajax.AjaxMethod]
199 public string Test18(string[] s)
200 {
201 string r = "";
202 foreach(string ss in s)
203 r += "<p>" + ss + "</p>\r\n";
204 return r;
205 }
206 在Client端可以这样调用:
207 alert(DemoMethods.Test18( ["aaaa","bbbb","ccc\"ccccc"] ).value);
208 同时也支持int[],其他的类型慢慢也会加入到Ajax中来
20913.传递HtmlControl到Server端,处理完了并返回.
210 Server端返回一个新建的HtmlSelect:
211 [Ajax.AjaxMethod]
212 public System.Web.UI.HtmlControls.HtmlSelect Test19(string car)
213 {
214 System.Web.UI.HtmlControls.HtmlSelect control = new System.Web.UI.HtmlControls.HtmlSelect();
215 switch(car)
216 {
217 case "VW":
218 control.Items.Add("Golf");
219 control.Items.Add("Passat");
220 control.Items.Add("Beetle");
221 control.Items.Add("Phaeton");
222 break;
223
224 case "Mercedes":
225 control.Items.Add("S Class");
226 control.Items.Add("E Class");
227 control.Items.Add("A Class");
228 control.Items.Add("M Class");
229 break;
230 case "Citroen":
231 control.Items.Add("C3 Pluriel");
232 control.Items.Add("C5 Break");
233 control.Items.Add("C8");
234 control.Items.Add("Berlingo");
235 break;
236 }
237 return control;
238 }
239 客户端接受到这个控件,并放在一个Span区域内(id='ele'):
240 var res = Test19("VW");
241 var ele = document.getElementById('ele');
242 ele.innerHTML = res.value;
243 完成了从server端接受一个Html控件的过程,对于所有的HtmlControls亦是如此.
24414.缓存请求,以节约CPU时间:
245 对于某些频繁的请求,如果缓存下来的结果也满足要求的话,那么缓存结果将使得CPU时间得到节约.
246 要缓存很简单,只需要在Server的方法上加上缓存时间就可以,缓存时间以秒为单位(sec):
247 [Ajax.AjaxMethod(30)]
248 public System.DateTime Test20()
249 {
250 return DateTime.Now;
251 }
252 在第一次请求后的30秒内,任何的请求结果都是第一次请求的缓存.
posted on 2007-07-03 13:07
TRE-China R&D 阅读(410)
评论(0) 编辑 收藏 引用 所属分类:
AJAX 、
C#