深入Atlas系列之客户端支持

在创建了Sys.Net.WebRequest对象后，并不是将用户传入的那些回调函数直接注册给它的事件，而是使用了Sys.Net.WebMethod里的onXXXX，进行了进一步的处理，代码如下：

　　onXXX函数分析：

1 function onComplete(response, eventArgs) { 2 　// 获得Status Code 3 　var statusCode = response.get_statusCode(); 4 5 　var result = null; 6 7 8 　try { 9 　　// 尝试将Data序列化成对象 10　 result = response.get_object(); 11 } 12 catch (ex) { // 失败了，说明不是传出对象 13　 try { 14　　 // 获得XML 15　　 result = response.get_xml(); 16　 } 17　 catch (ex) { } 18 } 19 20 // 如果没有成功（statusCode不是2XX），或者 21 // result为Sys.Net.MethodRequestError类型， 22 // 表示Web Services出错了（例如抛出了Exception） 23 if (((statusCode ＜ 200) || (statusCode ＞= 300)) || 24 Sys.Net.MethodRequestError.isInstanceOfType(result)) { 25 26　 // 如果提供了onMethodError回调函数，那么执行 27　 if (onMethodError) { 28　　 onMethodError(result, response, userContext); 29　 } 30　 else { 31　　 // 没有提供onMethodError的话那么就Trace 32　　 debug.trace("The server method '" + methodName + "' failed with the following error:"); 33 34　　 if (result != null) { 35　　　 debug.trace(result.get_exceptionType() + ": " + result.get_message()); 36　　 } 37　　 else { 38　　　 debug.trace(response.get_data()); 39　　 } 40　 } 41 } 42 else if (onMethodComplete) { // 调用成功了 43　 // 如果提供了onMethodComplete回调函数，那么执行 44　 onMethodComplete(result, response, userContext); 45 } 46 } 47 48 function onTimeout(request, eventArgs) { 49　 if (onMethodTimeout) { 50　　 onMethodTimeout(request, userContext); 51　 } 52 } 53 54 function onAborted(request, eventArgs) { 55　 if (onMethodAborted) { 56　　 onMethodAborted(request, userContext); 57　 } 58 }

　　在onComplete方法中，会查看status code。在HTTP 1.x中，2xx代表了Success（关于完整Status Code的描述，请参考http://www.w3.org/Protocols/HTTP/HTRESP.html）。由此可以得知该如何调用用户提供的回调函数。在调用回调函数时会将用户提供的userContext作为参数传入，这种做法在异步调用中被经常使用，例如.NET Framework中Delegate的异步调用。

　　至此，Sys.Net.WebMethod就被解释完了，并不复杂，甚至我觉得我的解释有些累赘。不过它提供的方法非常重要，是客户端访问服务器端函数的核心（客户端方面）。而调用Web Services，则需要Sys.Net.ServiceMethod这个Sys.Net.WebMethod的子类来提供那五个抽象函数的具体实现，分析如下：

　　Sys.Net.ServiceMethod代码分析：

1 // 如果要访问的Web Services是http://www.sample.com/abc/ws.amsx中 2 // HelloWorld方法的话，则 3 // url：Web Services的地址，以上例为"/abc/ws.amsx" 4 // methodName：方法名，以上例为"HelloWorld" 5 // appUrl：该Web应用程序的URL，以上例（可能，也有可能不是）为"http://www.sample.com/" 6 Sys.Net.ServiceMethod = function(url, methodName, appUrl) { 7 Sys.Net.ServiceMethod.initializeBase(this); 8 9 this.get_methodName = function() { return methodName; } 10 11 // header：一个以Dictionary，用key - value的方式 12 // 表示Header的对象，Object类型 13 this.addHeaders = function(headers) { 14　 // Content-Type设为"application/json"， 15　 // 表示要通过JSON方式来传递数据 16　 headers['Content-Type'] = 'application/json'; 17 } 18 19 // param：一个Dictionary，用key - value的方式 20 // 保存即将传递给Web Services的参数。 21 // useGetMethod：是否使用HTTP GET方法，Boolean类型 22 this.get_url = function(params, useGetMethod) { 23　 // 如果不是用HTTP GET方法，或者没有提供params， 24　 if (!useGetMethod || !params) 25　 { 26　　 // 将params设为空对象，params将被作为Query String添加在 27　　 // URL上，自然使用HTTP POST方法时不需要那些Query String 28　　 params = {}; 29 　} 30 31　 // 添加一个mn，值为methodName， 32　 // 这句代码等价于params["mn"] = methodName; 33　 params.mn = methodName; 34　 // 调用Sys.Net.WebRequest.createUrl方法获得url， 35　 // 将params作为Query String放在url后。 36　 // 在这里，正常情况下只有mn一个参数。 37　 var fullUrl = Sys.Net.WebRequest.createUrl(url, params); 38　 // 删除mn 39　 delete params.mn; 40　 return fullUrl; 41 } 42 43 this.get_body = function(params, useGetMethod) { 44　 // 如果使用HTTP GET方法，则不用body 45　 if (useGetMethod) return null; 46 47　 // 将params序列化作为body 48　 var body = Sys.Serialization.JSON.serialize(params); 49 50　 // 如果是空对象，则返回空body。 51　 if (body == "{}") return ""; 52 53　 return body; 54 } 55 56 this.get_appUrl = function() { 57　 return appUrl; 58 } 59 } 60 Sys.Net.ServiceMethod.registerClass('Sys.Net.ServiceMethod', Sys.Net.WebMethod);

　　对于传入参数url和appUrl，可能需要重新解释一下。如果url传入的是相对路径，则appUrl可以为null。

　　为了有更深的理解，我们来看一个例子：

　　ws.asmx代码：
　　ws.asmx文件代码：

1 ＜%@ WebService Language="C#" Class="ws" %＞ 2 3 using System; 4 using System.Web; 5 using System.Web.Services; 6 using System.Web.Services.Protocols; 7 8 [WebService(Namespace = "http://tempuri.org/")] 9 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 10 public class ws : System.Web.Services.WebService { 11 12 [WebMethod] 13 public object[] HelloWorld(int param1) { 14 　return new object[] { "You passed parameter: " + param1, DateTime.Now }; 15 } 16 }

　　HelloWorld函数接受一个整数作为参数，返回一个数组。第一个元素为一个字符串，第二个元素为服务器当前时间。

　　Default.aspx文件代码：
　　Default.aspx文件代码：

1 ＜%@ Page Language="C#" %＞ 2 ＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞ 3 4 ＜html xmlns="http://www.w3.org/1999/xhtml" ＞ 5 ＜head runat="server"＞ 6 ＜title＞Web Service Call by Sys.Net.ServiceMethod＜/title＞ 7 ＜script language="javascript"＞ 8 function invoke() 9 { 10 　var params = { "param1" : Math.round(Math.random() * 100) }; 11 　var method = new Sys.Net.ServiceMethod("ws.asmx", "HelloWorld", null); 12 　 13 　method.invoke(params, onMethodComplete); 14 } 15 16 function onMethodComplete(result, response, userContext) 17 { 18 　document.getElementById("display").innerHTML = 19 　result[0] + "＜br /＞" + "Server Time: " + result[1]; 20 } 21 ＜/script＞ 22 ＜/head＞ 23 ＜body style="font-family:Arial;"＞ 24 ＜form id="form1" runat="server"＞ 25 ＜div＞ 26 ＜atlas:ScriptManager runat="server" ID="ScriptManager1" EnableScriptComponents="true" /＞ 27 28 ＜div id="display"＞＜/div＞ 29 30 ＜input onclick="invoke();" value="Invoke" type="button" /＞ 31 ＜/div＞ 32 ＜/form＞ 33 ＜/body＞ 34 ＜/html＞

　　在这里使用的是invoke函数的第二种调用方法，传入一个随机数作为参数，并将信息显示在页面上。效果如下：


　　我们打开Fiddler，看看具体的请求如何，请注意红色框出的地方：

　　Request：


　　Request Body：


　　Response Body：


　　是不是和我们预料的完全相同？有了JSON，我们可以非常方便地构造和表示一个客户端对象，Atlas在客户端和服务器端都提供了非常强大的JSON Serializer。这些方法可以应用在任何需要场合，即使脱离了Atlas。

　　到现在为止，已经将Atlas以AJAX方式调用Web Services的客户端基础代码分析完了。但是这其实还远远不够，有了客户端代码，至少还需要服务器端的支持。那么在服务器端Atlas又是如何提供以AJAX方式调用Web Services方法的功能呢？

　　我们将在下一篇文章中讨论这个问题。

查看本文来源