作者:Dflying Chen http://dflying.cnblogs.com/

在前一篇文章(ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(基础知识以及简单示例))中,我介绍了一些Atlas中对远程Web Service进行Mashup的基础知识,并给出了一个最基础的没有丝毫用处例子。今天再回到这个话题上,我将给出一个更复杂点的,但有一些用处的例子——Yahoo! Weather

废话到此为止,让我们先熟悉一下Yahoo! Weather服务:Yahoo!在其网站上提供了天气预报服务(http://weather.yahoo.com/),并且它也提供了Web Service的接口(http://developer.yahoo.com/weather/
从上面两个网页上面,我们可以知道Yahoo!提供的天气ServiceURLhttp://xml.weather.yahoo.com/forecastrss,该服务还有两个参数:

  1. p:要查询天气的地点代码(可以在http://weather.yahoo.com/查询到不同地方的这个代码)。
  2. u:返回结果中温度的单位,f代表华氏度,c代表摄氏度。

看来这个Yahoo! Weather服务还挺简单的,让我们测试下好不好用。先到http://weather.yahoo.com/查出来上海的地点代码为CHXX0116。然后在浏览器中输入http://xml.weather.yahoo.com/forecastrss?p=CHXX0116&u=c,嗯,返回了如下的一段不是很复杂的XML

-->

我们可以看到,它提供的信息非常全面(连日出日落时间都有……),下面让我们书写asbx Bridge页面来对这个Service进行Mashup

首先,参考ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(基础知识以及简单示例)这篇文章中的那个asbx的声明,我们可以写出如下一段:

在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)<?xml version="1.0" encoding="utf-8" ?>
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)
<bridge namespace="Dflying" className="YahooWeatherService">
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)  
<proxy type="Microsoft.Web.Services.BridgeRestProxy" 
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)         serviceUrl
="http://xml.weather.yahoo.com/forecastrss" />
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)  
<method name="GetWeather">
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)    
<input>
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)      
<parameter name="p" />
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)      
<parameter name="u" value="c" />
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)    
</input>
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)  
</method>
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)
</bridge>

其中:
  1. <bridge>namespaceclassName属性以及<method>name属性让我们在客户端JavaScript中可以通过Dflying.YahooWeatherService.GetWeather()这样的方法签名来访问这个Mashup
  2. <proxy>serviceUrl属性指定了Yahoo! Weather ServiceURL
  3. GetWeather方法中定义了上面列出来的pu两个参数,其中u参数我们指定了它的默认值为c(代表摄氏度),p参数将由调用者负责传过来。

写到这一步其实也够了,客户端将收到上面浏览器中看到的那一段XML String,并且可以在客户端进行处理并显示。但客户端对XML的处理并不是那么容易,也不是那么高效,同时通过网络传输太多不必要的信息也是一种浪费。所以这里我们利用asbx中内建的Transformer对这段XML处理一下,提取出我们感兴趣的内容并以JSON的形式发给客户端。在<method>段中加入下面一段:

在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)<transforms>
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)  
<transform type="Microsoft.Web.Services.XPathBridgeTransformer">
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)    
<data>
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)      
<attribute name="selector" value="channel" />
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)      
<dictionary name="namespaceMapping">
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)        
<item name="yweather" value="http://xml.weather.yahoo.com/ns/rss/1.0" />
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)      
</dictionary>
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)      
<dictionary name="selectedNodes">
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)        
<item name="Title" value="title" />
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)        
<item name="Description" value="item/description" />
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)        
<item name="CurrentCondition" value="item/yweather:condition/@text" />
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)      
</dictionary>
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)    
</data>
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)  
</transform>
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)
</transforms>

其中<transforms>声明表示这个Mashup方法的返回值将会被一些transformer改变一下,里面声明了一个类型为Microsoft.Web.Services.XPathBridgeTransformertransformer,表示将用XPath表达式来转换。在这个XPathBridgeTransformer中要声明如下部分:
  1. nameselector的一个attribute段,其中指定的value属性为一个XPath表达式,将选取整个XPathBridgeTransformer将用到的数据段。
  2. namenamespaceMapping的一个dictionary段,其中指定了这个XML文件中的namespace映射。如果在下面的选择节点过程中我们用到了某个namespace,那么这里就必须有它的声明。这里我们在其中添加一个对yweather的映射,因为下面要用到。
  3. nameselectedNodes的一个dictionary段,其中每一个itemvalue属性是一个XPath String,用来从XML中选择出相应的值,name属性用来指定相应的在JavaScript中的属性名称。这里作为示例,我只取得其中三段内容,您可以看到,其中CurrentConditionXPath中用到了上面指定的namespaceMapping

关于XPath的知识,我就不多讲了,感兴趣或是不太熟悉的朋友可以自行Google,网上资源很多。关于其他类型的Transformer,我也不是很熟悉,今后如果遇到了我再讲讲。完成后的YahooWeatherBridge.asbx文件如下:

在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)<?xml version="1.0" encoding="utf-8" ?>
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)
<bridge namespace="Dflying" className="YahooWeatherService">
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)  
<proxy type="Microsoft.Web.Services.BridgeRestProxy" 
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)         serviceUrl
="http://xml.weather.yahoo.com/forecastrss" />
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)  
<method name="GetWeather">
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)    
<input>
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)      
<parameter name="p" />
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)      
<parameter name="u" value="c" />
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)    
</input>
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)    
<transforms>
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)      
<transform type="Microsoft.Web.Services.XPathBridgeTransformer">
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)        
<data>
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)          
<attribute name="selector" value="channel" />
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)          
<dictionary name="namespaceMapping">
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)            
<item name="yweather" value="http://xml.weather.yahoo.com/ns/rss/1.0" />
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)          
</dictionary>
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)          
<dictionary name="selectedNodes">
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)            
<item name="Title" value="title" />
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)            
<item name="Description" value="item/description" />
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)            
<item name="CurrentCondition" value="item/yweather:condition/@text" />
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)          
</dictionary>
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)        
</data>
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)      
</transform>
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)    
</transforms>
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)  
</method>
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)
</bridge>

现在创建一个ASP.NET Page测试一下,首先依然是重复了一千遍的ScriptManager,还有对Bridge的引用:
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)<atlas:ScriptManager ID="sm" runat="server">
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)    
<Services>
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)        
<atlas:ServiceReference Path="YahooWeatherBridge.asbx" />
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)    
</Services>
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)
</atlas:ScriptManager>

然后一个HTML Select元素,里面列入了几个城市以及相应的城市代码:

在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)<!-- place selector -->
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)
<select id="place">
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)    
<option selected="selected" value="CHXX0116">Shanghai, CH</option>
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)    
<option value="USCA0746">Mountain View, CA</option>
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)    
<option value="CHXX0008">Beijing, CH</option>
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)
</select>

一个HTML Button,用来触发对Service的调用:

在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)<!-- invoke the service -->
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)
<input id="getWeather" type="button" value="Get Weather" onclick="return getWeather_onclick()" />

一段HTML用来显示结果:

在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)<!-- display result -->
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)
<div id="result" style="display: none;">
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)    
<div style="background-color: Gray; font-weight: bold;">Title</div>
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)    
<div id="title"></div>
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)    
<div style="background-color: Gray; font-weight: bold;">Description</div>
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)    
<div id="description"></div>
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)
</div>

然后是JavaScript,可以看到通过Dflying.YahooWeatherService.GetWeather()调用了Mashup,并在方法返回后把经过transform的值输出到了页面上:
}

最后浏览器中看一下结果,上海天气:
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)

Mountain View天气:
在ASP.NET Atlas中调用Web Service——创建Mashup调用远端Web Service(Yahoo!天气实例)

该实例程序的源代码可以在此下载:https://files.cnblogs.com/dflying/YahooWeatherBridge.zip

相关文章: