在前一篇文章(在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!提供的天氣service的url為http://xml.weather.yahoo.com/forecastrss,該服務還有兩個參數:
p:要查詢天氣的地點代碼(可以在http://weather.yahoo.com/查詢到不同地方的這個代碼)。
u:返回結果中溫度的單位,f代表華氏度,c代表攝氏度。
看來這個yahoo! weather服務還挺簡單的,讓我們測試下好不好用。先到http://weather.yahoo.com/查出來上海的地點代碼為chxx0116。然后在瀏覽器中輸入http://xml.weather.yahoo.com/forecastrss?p=chxx0116&u=c,嗯,返回了如下的一段不是很復雜的xml:
yahoo weather service xml result
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<rss version="2.0" xmlns:yweather="http://xml.weather.yahoo.com/ns/rss/1.0" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#">
<channel>
<title>yahoo! weather - shanghai, ch</title> <link>http://us.rd.yahoo.com/dailynews/rss/weather/shanghai__ch/*http://xml.weather.yahoo.com/forecast/chxx0116_c.html</link>
<description>yahoo! weather for shanghai, ch</description>
<language>en-us</language>
<lastbuilddate>thu, 25 may 2006 11:00 am cst</lastbuilddate>
<ttl>60</ttl>
<yweather:location city="shanghai" region="" country="ch" />
<yweather:units temperature="c" distance="km" pressure="mb" speed="kph" />
<yweather:wind chill="21" direction="260" speed="14" />
<yweather:atmosphere humidity="78" visibility="299" pressure="0" rising="0" />
<yweather:astronomy sunrise="4:52 am" sunset="6:50 pm" />
<image>
<title>yahoo! weather</title>
<width>142</width>
<height>18</height>
<link>http://weather.yahoo.com/</link>
<url>/uploadpic/2007-7/200777192443790.gif</url>
</image>
<item>
<title>conditions for shanghai, ch at 11:00 am cst</title>
<geo:lat>31.17</geo:lat>
<geo:long>121.43</geo:long> <link>http://us.rd.yahoo.com/dailynews/rss/weather/shanghai__ch/*http://xml.weather.yahoo.com/forecast/chxx0116_c.html</link>
<pubdate>thu, 25 may 2006 11:00 am cst</pubdate>
<yweather:condition text="fog" code="20" temp="21" date="thu, 25 may 2006 11:00 am cst" />
<description>
<![cdata[
<img src="/uploadpic/2007-7/200777192443883.gif" /><br />
<b>current conditions:</b><br />
fog, 21 c<br /><br />
<b>forecast:</b><br />
thu - scattered thunderstorms. high: 25 low: 20<br />
fri - am showers. high: 26 low: 18<br />
<br />
<a >full forecast at yahoo! weather</a><br/>
(provided by the weather channel)<br/>
]]>
</description>
<yweather:forecast day="thu" date="25 may 2006" low="20" high="25" text="scattered thunderstorms" code="38" />
<yweather:forecast day="fri" date="26 may 2006" low="18" high="26" text="am showers" code="39" />
<guid ispermalink="false">chxx0116_2006_05_25_11_0_cst</guid>
</item>
</channel>
</rss>
<!-- p1.weather.scd.yahoo.com uncompressed/chunked thu may 25 20:49:07 pdt 2006 -->
我們可以看到,它提供的信息非常全面(連日出日落時間都有……),下面讓我們書寫asbx bridge頁面來對這個service進行mashup。
首先,參考在asp.net atlas中調用web service——創建mashup調用遠端web service(基礎知識以及簡單示例)這篇文章中的那個asbx的聲明,我們可以寫出如下一段:
<?xml version="1.0" encoding="utf-8" ?>
<bridge namespace="dflying" classname="yahooweatherservice">
<proxy type="microsoft.web.services.bridgerestproxy"
serviceurl="http://xml.weather.yahoo.com/forecastrss" />
<method name="getweather">
<input>
<parameter name="p" />
<parameter name="u" value="c" />
</input>
</method>
</bridge>
其中:<bridge>的namespace和classname屬性以及<method>的name屬性讓我們在客戶端javascript中可以通過dflying.yahooweatherservice.getweather()這樣的方法簽名來訪問這個mashup。 <proxy>的serviceurl屬性指定了yahoo! weather service的url。
getweather方法中定義了上面列出來的p和u兩個參數,其中u參數我們指定了它的默認值為c(代表攝氏度),p參數將由調用者負責傳過來。
寫到這一步其實也夠了,客戶端將收到上面瀏覽器中看到的那一段xml string,并且可以在客戶端進行處理并顯示。但客戶端對xml的處理并不是那么容易,也不是那么高效,同時通過網絡傳輸太多不必要的信息也是一種浪費。所以這里我們利用asbx中內建的transformer對這段xml處理一下,提取出我們感興趣的內容并以json的形式發給客戶端。在<method>段中加入下面一段:
<transforms>
<transform type="microsoft.web.services.xpathbridgetransformer">
<data>
<attribute name="selector" value="channel" />
<dictionary name="namespacemapping">
<item name="yweather" value="http://xml.weather.yahoo.com/ns/rss/1.0" />
</dictionary>
<dictionary name="selectednodes">
<item name="title" value="title" />
<item name="description" value="item/description" />
<item name="currentcondition" value="item/yweather:condition/@text" />
</dictionary>
</data>
</transform>
</transforms>
其中<transforms>聲明表示這個mashup方法的返回值將會被一些transformer改變一下,里面聲明了一個類型為microsoft.web.services.xpathbridgetransformer的transformer,表示將用xpath表達式來轉換。在這個xpathbridgetransformer中要聲明如下部分:
name為selector的一個attribute段,其中指定的value屬性為一個xpath表達式,將選取整個xpathbridgetransformer將用到的數據段。
name為namespacemapping的一個dictionary段,其中指定了這個xml文件中的namespace映射。如果在下面的選擇節點過程中我們用到了某個namespace,那么這里就必須有它的聲明。這里我們在其中添加一個對yweather的映射,因為下面要用到。
name為selectednodes的一個dictionary段,其中每一個item的value屬性是一個xpath string,用來從xml中選擇出相應的值,name屬性用來指定相應的在javascript中的屬性名稱。這里作為示例,我只取得其中三段內容,您可以看到,其中currentcondition的xpath中用到了上面指定的namespacemapping。
關于xpath的知識,我就不多講了,感興趣或是不太熟悉的朋友可以自行google,網上資源很多。關于其他類型的transformer,我也不是很熟悉,今后如果遇到了我再講講。完成后的yahooweatherbridge.asbx文件如下:
<?xml version="1.0" encoding="utf-8" ?>
<bridge namespace="dflying" classname="yahooweatherservice">
<proxy type="microsoft.web.services.bridgerestproxy"
serviceurl="http://xml.weather.yahoo.com/forecastrss" />
<method name="getweather">
<input>
<parameter name="p" />
<parameter name="u" value="c" />
</input>
<transforms>
<transform type="microsoft.web.services.xpathbridgetransformer">
<data>
<attribute name="selector" value="channel" />
<dictionary name="namespacemapping">
<item name="yweather" value="http://xml.weather.yahoo.com/ns/rss/1.0" />
</dictionary>
<dictionary name="selectednodes">
<item name="title" value="title" />
<item name="description" value="item/description" />
<item name="currentcondition" value="item/yweather:condition/@text" />
</dictionary>
</data>
</transform>
</transforms>
</method>
</bridge>
現在創建一個asp.net page測試一下,首先依然是重復了一千遍的scriptmanager,還有對bridge的引用:
<atlas:scriptmanager id="sm" runat="server">
<services>
<atlas:servicereference path="yahooweatherbridge.asbx" />
</services>
</atlas:scriptmanager>
然后一個html select元素,里面列入了幾個城市以及相應的城市代碼:
<!-- place selector -->
<select id="place">
<option selected="selected" value="chxx0116">shanghai, ch</option>
<option value="usca0746">mountain view, ca</option>
<option value="chxx0008">beijing, ch</option>
</select>
一個html button,用來觸發對service的調用:
<!-- invoke the service -->
<input id="getweather" type="button" value="get weather" />
一段html用來顯示結果:
<!-- display result -->
<div id="result" >
<div >title</div>
<div id="title"></div>
<div >description</div>
<div id="description"></div>
</div>
然后是javascript,可以看到通過dflying.yahooweatherservice.getweather()調用了mashup,并在方法返回后把經過transform的值輸出到了頁面上:
function getweather_onclick() {
// new atlas 'select' control
var place = new sys.ui.select($('place'));
// invoke the bridge method
dflying.yahooweatherservice.getweather({'p': place.get_selectedvalue()}, ongetcomplete);
}
function ongetcomplete(result) {
$('result').style.display = "block";
$('title').innerhtml = result[0].title;
$('description').innerhtml = result[0].description;
}
新聞熱點
疑難解答
圖片精選