การเรียกบริการเว็บใน ASP.NET Atlas—การสร้าง Mashup เพื่อเรียกบริการเว็บระยะไกล (อินสแตนซ์ Yahoo! Weather)

ผู้เขียน：Eve Cole เวลาอัปเดต：2009-06-30 16:41:42

ผู้แต่ง: Dflying Chen ( http://dflying.cnblogs.com/ )
ในบทความก่อนหน้านี้ (การเรียกบริการเว็บใน ASP.NET Atlas - การสร้าง Mashup เพื่อเรียกบริการเว็บระยะไกล (ความรู้พื้นฐานและตัวอย่างง่ายๆ)) ฉันได้แนะนำความรู้พื้นฐานเกี่ยวกับ Mashup สำหรับบริการเว็บระยะไกลใน Atlas และยกตัวอย่างพื้นฐานที่สุด นั่นไม่มีประโยชน์เลย กลับมาที่หัวข้อนี้วันนี้ฉันจะยกตัวอย่างที่ซับซ้อนมากขึ้น แต่ค่อนข้างมีประโยชน์ - Yahoo!

เรื่องไร้สาระ เรา มา ทำความรู้จักกับบริการ Yahoo! Weather กันก่อน: Yahoo! /developer.yahoo.com/weather/ )
จากหน้าเว็บสองหน้าข้างต้น เราจะทราบได้ว่า URL ของบริการสภาพอากาศที่ Yahoo! ให้บริการคือ http://xml.weather.yahoo.com/forecastrss บริการนี้มีพารามิเตอร์สองตัวด้วย:

p: รหัสตำแหน่งโดยที่ ต้องสอบถามสภาพอากาศ ( สามารถตรวจสอบ Code นี้ได้จากที่ต่างๆ ได้ที่ 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 ที่ไม่ซับซ้อนมากต่อไปนี้:

ผลลัพธ์ XML ของ Yahoo Weather Service
<?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 #">
<ช่อง>
<title>สภาพอากาศ Yahoo! - เซี่ยงไฮ้, 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! สำหรับเซี่ยงไฮ้ CH</description>
<ภาษา>en-us</ภาษา>
<lastBuildDate>พฤ. 25 พฤษภาคม 2549 11:00 น. CST</lastBuildDate>
<ttl>60</ttl>
<yweather:location city="เซี่ยงไฮ้" ภูมิภาค="" country="CH" />
<yweather:units temperature="C" Distance="km" pressure="mb" speed="kph" />
<yweather:ลมหนาว="21" ทิศทาง="260" ความเร็ว="14" />
<yweather:บรรยากาศความชื้น="78" การมองเห็น="299" ความดัน="0" เพิ่มขึ้น="0" />
<yweather:ดาราศาสตร์พระอาทิตย์ขึ้น="4:52 น." พระอาทิตย์ตก="18:50 น." />
<ภาพ>
<title>สภาพอากาศของ Yahoo!</title>
<ความกว้าง>142</ความกว้าง>
<ความสูง>18</ความสูง>
<link>http://weather.yahoo.com/</link>
<url>/u/info_img/2009-06/30/main_142b.gif</url>
</ภาพ>
<รายการ>
<title>เงื่อนไขสำหรับเซี่ยงไฮ้ CH เวลา 11:00 น. 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>พฤ. 25 พฤษภาคม 2549 11:00 น. CST</pubDate>
<yweather:condition text="Fog" code="20" temp="21" date="Thu, 25 May 2006 11:00 am CST" />
<คำอธิบาย>
<![ซีดีข้อมูล[
<img src=" <b>เงื่อนไขปัจจุบัน:</b><br />
หมอก 21 C<BR /><BR />
<b>พยากรณ์:</b><BR />
พฤ - พายุฝนฟ้าคะนองกระจาย สูง: 25 ต่ำ: 20<br />
ศุกร์ - บ่าย ฝนตกสูงสุด: 26 ต่ำสุด: 18<br />
<br />
<a href=" http://us.rd.yahoo.com/dailynews/rss/weather/Shanghai__CH/*http://xml.weather.yahoo.com/forecast/CHXX0116_c.html"> พยากรณ์ฉบับเต็มได้ ที่ Yahoo! สภาพอากาศ</a><BR/>
(จัดทำโดย The Weather Channel)<br/>
-
</คำอธิบาย>
<yweather:forecast day="Thu" date="25 พฤษภาคม 2549" low="20" high="25" text="พายุฝนฟ้าคะนองกระจาย" code="38" />
<yweather:forecast day="Fri" date="26 พฤษภาคม 2549" low="18" high="26" text="AM ฝนตก" code="39" />
<guid isPermaLink="false">CHXX0116_2006_05_25_11_0_CST</guid>
</รายการ>
</ช่อง>
</rss>

เราจะเห็นว่าข้อมูลที่ให้นั้นครอบคลุมมาก (แม้แต่เวลาพระอาทิตย์ขึ้นและพระอาทิตย์ตก... ) ให้เราเขียนหน้า asbx Bridge ไปที่ Mashup this Service

ขั้นแรก อ้างถึงคำสั่ง asbx ในบทความ การเรียกบริการเว็บใน ASP.NET Atlas - การสร้าง Mashup เพื่อเรียกบริการเว็บระยะไกล (ความรู้พื้นฐานและตัวอย่างง่ายๆ) เราสามารถเขียนย่อหน้าต่อไปนี้:

การเข้ารหัส <?xml version= "1.0" ="utf-8" ?>
< สะพาน namespace = "Dflying" className = "YahooWeatherService">

< ประเภทพร็อกซี = "Microsoft.Web.Services.BridgeRestProxy"
serviceUrl=" http://xml.weather.yahoo.com/forecastrss " />

<ชื่อวิธี = "GetWeather">
<อินพุต>
<ชื่อพารามิเตอร์ = "p" />
<ชื่อพารามิเตอร์ = "u" ค่า = "c" />
</อินพุต>
</วิธีการ>
</สะพาน>

ใน:
คุณลักษณะเนมสเปซและ className ของ <bridge> และแอตทริบิวต์ชื่อของ <method> ช่วยให้เราเข้าถึง Mashup นี้ในไคลเอ็นต์ JavaScript ผ่านทางลายเซ็นของวิธีการ เช่น Dflying.YahooWeatherService.GetWeather()
คุณลักษณะ serviceUrl ของ <proxy> ระบุ URL ของ Yahoo! Weather Service
เมธอด GetWeather กำหนดพารามิเตอร์สองตัว p และ u ที่แสดงไว้ด้านบน เราได้ระบุค่าเริ่มต้นของพารามิเตอร์ u เป็น c (แทนองศาเซลเซียส) และผู้เรียกจะส่งผ่านพารามิเตอร์ p
ขั้นตอนนี้เพียงพอแล้ว ไคลเอ็นต์จะได้รับสตริง XML ที่เห็นในเบราว์เซอร์ด้านบน และสามารถประมวลผลและแสดงบนไคลเอ็นต์ได้ แต่การประมวลผล XML ของไคลเอ็นต์นั้นไม่ง่ายหรือมีประสิทธิภาพ และการส่งข้อมูลที่ไม่จำเป็นมากเกินไปผ่านเครือข่ายก็ถือเป็นการสิ้นเปลืองเช่นกัน ดังนั้นที่นี่เราใช้ Transformer ในตัวใน asbx เพื่อประมวลผล XML นี้ แยกเนื้อหาที่เราสนใจ และส่งไปยังไคลเอนต์ในรูปแบบของ JSON เพิ่มย่อหน้าต่อไปนี้ในส่วน <method>:

คำสั่ง <transforms> ระบุว่าค่าที่ส่งคืนของวิธี Mashup นี้จะถูกเปลี่ยนโดยหม้อแปลงบางตัว โดยจะประกาศหม้อแปลงประเภท Microsoft.Web.Services.XPathBridgeTransformer ซึ่งหมายความว่านิพจน์ XPath จะถูกนำมาใช้สำหรับการแปลง ควรประกาศส่วนต่อไปนี้ใน XPathBridgeTransformer นี้:
name เป็นส่วนแอตทริบิวต์ของตัวเลือก และแอตทริบิวต์ค่าที่ระบุคือนิพจน์ XPath ซึ่งจะเลือกส่วนข้อมูลที่จะใช้โดย XPathBridgeTransformer ทั้งหมด
name เป็นส่วนพจนานุกรมของ namespaceMapping ซึ่งระบุการแมปเนมสเปซในไฟล์ XML นี้ หากเราใช้เนมสเปซบางอย่างในกระบวนการเลือกโหนดต่อไปนี้ การประกาศจะต้องอยู่ที่นี่ ที่นี่เราเพิ่มการแมปลงใน yweather เนื่องจากจะใช้ด้านล่างนี้
name เป็นส่วนพจนานุกรมของ SelectedNodes โดยที่แอตทริบิวต์ value ของแต่ละรายการคือสตริง XPath ซึ่งใช้เพื่อเลือกค่าที่สอดคล้องกันจาก XML และแอตทริบิวต์ name ใช้เพื่อระบุชื่อแอตทริบิวต์ที่สอดคล้องกันใน JavaScript ตามตัวอย่างที่นี่ ฉันได้รับเนื้อหาเพียงสามชิ้น คุณจะเห็นว่ามีการใช้ namespaceMapping ที่ระบุไว้ข้างต้นใน XPath ของ CurrentCondition
ฉันจะไม่ลงรายละเอียดเกี่ยวกับ XPath เพื่อนๆ ที่สนใจหรือไม่คุ้นเคยสามารถ Google ได้ด้วยตัวเอง มีแหล่งข้อมูลออนไลน์มากมาย ฉันไม่ค่อยคุ้นเคยกับ Transformers ประเภทอื่น ฉันจะพูดถึงพวกเขาหากพบพวกเขาในอนาคต ไฟล์ YahooWeatherBridge.asbx ที่เสร็จสมบูรณ์มีลักษณะดังนี้:

<?xml version="1.0" encoding="utf-8" ?>
< สะพาน namespace = "Dflying" className = "YahooWeatherService">

< ประเภทพร็อกซี = "Microsoft.Web.Services.BridgeRestProxy"
serviceUrl=" http://xml.weather.yahoo.com/forecastrss " />

<ชื่อวิธี = "GetWeather">
<อินพุต>
<ชื่อพารามิเตอร์ = "p" />
<ชื่อพารามิเตอร์ = "u" ค่า = "c" />
</อินพุต>
<แปลงร่าง>
<transform type="Microsoft.Web.Services.XPathBridgeTransformer">
<ข้อมูล>
<ชื่อแอตทริบิวต์ = "ตัวเลือก" ค่า = "ช่อง" />
<ชื่อพจนานุกรม = "namespaceMapping">
<ชื่อรายการ = "yweather" value=" http://xml.weather.yahoo.com/ns/rss/1.0 " />
</พจนานุกรม>
<ชื่อพจนานุกรม = "selectedNodes">
<ชื่อสินค้า = "ชื่อ" ค่า = "ชื่อ" />
<ชื่อสินค้า = "คำอธิบาย" ค่า = "สินค้า/คำอธิบาย" />
<ชื่อสินค้า="CurrentCondition" value="item/yweather:condition/@text" />
</พจนานุกรม>
</ข้อมูล>
</แปลง>
</แปลง>
</วิธีการ>
</สะพาน>

ตอนนี้สร้างเพจ ASP.NET เพื่อทดสอบ ขั้นแรกยังคงมี ScriptManager ซ้ำนับพันครั้งและการอ้างอิงถึง Bridge: <atlas:ScriptManager ID="sm" runat="server">
<บริการ>
<atlas:ServiceReference Path="YahooWeatherBridge.asbx" />
</บริการ>
</atlas:ScriptManager>
จากนั้นจะมีองค์ประกอบ HTML Select ซึ่งแสดงรายการเมืองหลายแห่งและรหัสเมืองที่เกี่ยวข้อง:

<select id="สถานที่">
<option select="selected" value="CHXX0116">เซี่ยงไฮ้ CH</option>
<option value="USCA0746">เมาน์เทนวิว แคลิฟอร์เนีย</option>
<option value="CHXX0008">ปักกิ่ง CH</option>
</เลือก>
ปุ่ม HTML ที่ใช้ในการทริกเกอร์การเรียกไปยังบริการ:

<input id="getWeather" type="button" value="รับสภาพอากาศ" onclick="return getWeather_onclick()" />
ส่วนของ HTML ใช้ในการแสดงผล:

<div id="result" style="display: none;">
<div style="พื้นหลังสี: สีเทา; ตัวอักษรน้ำหนัก: ตัวหนา;">ชื่อเรื่อง</div>
<div id="title"></div>
<div style="พื้นหลังสี: สีเทา; ตัวอักษรน้ำหนัก: ตัวหนา;">คำอธิบาย</div>
<div id="คำอธิบาย"></div>
</div>

จากนั้นก็มาถึง JavaScript คุณจะเห็นว่า Mashup ถูกเรียกผ่าน Dflying.YahooWeatherService.GetWeather() และค่าที่แปลงแล้วจะถูกส่งออกไปยังเพจหลังจากที่เมธอดส่งคืน: function getWeather_onclick() {
// การควบคุม 'เลือก' ของ Atlas ใหม่
var place = new Sys.UI.Select($('place'));

// เรียกใช้วิธีบริดจ์
Dflying.YahooWeatherService.GetWeather({'p': place.get_selectedValue()}, onGetComplete);
-
ฟังก์ชั่น onGetComplete (ผลลัพธ์) {
$('result').style.display = "บล็อก";
$('title').innerHTML = result[0].Title;
$('คำอธิบาย').innerHTML = ผล[0].คำอธิบาย;
-