작성자: Dflying Chen ( http://dflying.cnblogs.com/ )
이전 기사(ASP.NET Atlas에서 웹 서비스 호출 - 원격 웹 서비스를 호출하기 위한 매시업 생성(기본 지식 및 간단한 예))에서는 Atlas의 원격 웹 서비스용 Mashup에 대한 몇 가지 기본 지식을 소개하고 가장 기본적인 예를 제시했습니다. 그것은 전혀 유용하지 않습니다. 오늘 이 주제로 돌아가서 좀 더 복잡하지만 다소 유용한 예인 Yahoo! Weather를 제시하겠습니다.
말도 안 되는 소리지만 먼저 Yahoo! 날씨 서비스에 대해 알아봅시다. Yahoo!는 웹사이트( http://weather.yahoo.com/ )에서 일기예보 서비스를 제공하며 웹 서비스 인터페이스( http://weather.yahoo.com/ ) 도 제공합니다. /developer.yahoo.com/weather/ )
위의 두 웹 페이지에서 Yahoo!가 제공하는 날씨 서비스의 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" 인코딩="UTF-8" 독립형="예" ?>
<rss 버전="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>야후! 날씨 - 상하이, CH</title>
<link>http://us.rd.yahoo.com/dailynews/rss/weather/Shanghai__CH/*http://xml.weather.yahoo.com/forecast/CHXX0116_c.html</link>
<description>야후! 상하이 날씨</description>
<언어>en-us</언어>
<lastBuildDate>2006년 5월 25일 목요일 오전 11:00 CST</lastBuildDate>
<ttl>60</ttl>
<yweather:location city="상하이" 지역="" 국가="CH" />
<yweather:단위 온도="C" 거리="km" 압력="mb" 속도="kph" />
<yweather:wind chill="21" 방향="260" 속도="14" />
<yweather:atmosphere 습도="78" visible="299" 압력="0" 상승="0" />
<yweather:astronomy sunrise="오전 4:52" 일몰="오후 6:50" />
<이미지>
<title>야후! 날씨</title>
<너비>142</너비>
<높이>18</높이>
<링크>http://weather.yahoo.com/</link>
<url>/u/info_img/2009-06/30/main_142b.gif</url>
</image>
<아이템>
<title>오전 11시(CST)의 CH 상하이 상황</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>2006년 5월 25일 목요일 오전 11:00 CST</pubDate>
<yweather:condition text="Fog" code="20" temp="21" date="2006년 5월 25일 목요일 오전 11:00 CST" />
<설명>
<![CDATA[
<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="목" date="2006년 5월 25일" low="20" high="25" text="산발적인 뇌우" code="38" />
<yweather:forecast day="Fri" date="2006년 5월 26일" low="18" high="26" text="AM 소나기" code="39" />
<guid isPermaLink="false">CHXX0116_2006_05_25_11_0_CST</guid>
</item>
</채널>
</rss>
<!-- p1.weather.scd.yahoo.com uncompressed/chunked Thu May 25 20:49:07 PDT 2006 -->
우리는 그것이 제공하는 정보가 매우 포괄적이라는 것을 알 수 있습니다(일출 및 일몰 시간까지도...) ), 이 서비스를 매시업하기 위해 asbx Bridge 페이지를 작성해 보겠습니다.
먼저, ASP.NET Atlas에서 웹 서비스 호출 - 원격 웹 서비스를 호출하기 위한 매시업 생성(기본 지식 및 간단한 예) 문서의 asbx 문을 참조하여 다음 단락을 작성할 수 있습니다.
<?xml version= "1.0" 인코딩 ="utf-8" ?>
<bridge 네임스페이스="Dflying" className="YahooWeatherService">
<proxy type="Microsoft.Web.Services.BridgeRestProxy"
serviceUrl=" http://xml.weather.yahoo.com/forecastrss " />
<메소드 이름="GetWeather">
<입력>
<매개변수 이름="p" />
<매개변수 이름="u" 값="c" />
</input>
</method>
</bridge>
안에:
<bridge>의 네임스페이스 및 className 속성과 <method>의 name 속성을 사용하면 Dflying.YahooWeatherService.GetWeather()와 같은 메서드 서명을 통해 클라이언트 JavaScript에서 이 매쉬업에 액세스할 수 있습니다.
<proxy>의 serviceUrl 속성은 Yahoo! Weather Service의 URL을 지정합니다.
GetWeather 메소드는 위에 나열된 두 매개변수 p와 u를 정의합니다. u 매개변수의 기본값을 c(섭씨를 나타냄)로 지정했으며 p 매개변수는 호출자에 의해 전달됩니다.
실제로는 이 단계로 충분합니다. 클라이언트는 위의 브라우저에 표시된 XML 문자열을 수신하고 클라이언트에서 처리하고 표시할 수 있습니다. 그러나 클라이언트의 XML 처리는 그다지 쉽거나 효율적이지 않으며 불필요한 정보를 네트워크를 통해 너무 많이 전송하는 것도 낭비입니다. 따라서 여기서는 asbx에 내장된 Transformer를 사용하여 이 XML을 처리하고 관심 있는 콘텐츠를 추출한 후 JSON 형식으로 클라이언트에 보냅니다. <method> 섹션에 다음 단락을 추가합니다.
<transforms>
<transform type="Microsoft.Web.Services.XPathBridgeTransformer">
<데이터>
<속성 이름="선택기" 값="채널" />
<사전 이름="namespaceMapping">
<item name="yweather" value=" http://xml.weather.yahoo.com/ns/rss/1.0 " />
</사전>
<사전 이름="selectedNodes">
<item name="제목" value="제목" />
<항목 이름="설명" 값="항목/설명" />
<item name="CurrentCondition" value="item/yweather:condition/@text" />
</사전>
</data>
</transform>
</변환>
<transforms> 문은 이 Mashup 메서드의 반환 값이 일부 변환기에 의해 변경될 것임을 나타냅니다. 이는 Microsoft.Web.Services.XPathBridgeTransformer 유형의 변환기를 선언합니다. 이는 XPath 식이 변환에 사용됨을 의미합니다. 이 XPathBridgeTransformer에서는 다음 부분을 선언해야 합니다.
name은 선택기의 속성 세그먼트이고 지정된 값 속성은 전체 XPathBridgeTransformer에서 사용할 데이터 세그먼트를 선택하는 XPath 표현식입니다.
name은 이 XML 파일의 네임스페이스 매핑을 지정하는 네임스페이스Mapping의 사전 세그먼트입니다. 다음 노드 선택 프로세스에서 특정 네임스페이스를 사용하는 경우 해당 선언이 여기에 있어야 합니다. 여기서는 아래에서 사용될 것이므로 yweather에 매핑을 추가합니다.
name은 selectedNodes의 사전 세그먼트입니다. 여기서 각 항목의 value 속성은 XML에서 해당 값을 선택하는 데 사용되는 XPath 문자열이고, name 속성은 JavaScript에서 해당 속성 이름을 지정하는 데 사용됩니다. 여기서는 예를 들어 3개의 콘텐츠만 얻었습니다. 위에서 지정한 네임스페이스 매핑이 CurrentCondition의 XPath에 사용되는 것을 볼 수 있습니다.
XPath에 대해 자세히 설명하지 않겠습니다. XPath에 관심이 있거나 익숙하지 않은 친구들은 스스로 Google을 통해 알아볼 수 있습니다. 나는 다른 유형의 트랜스포머에 대해 잘 알지 못합니다. 나중에 만나면 이에 대해 이야기하겠습니다. 완성된 YahooWeatherBridge.asbx 파일은 다음과 같습니다.
<?xml version="1.0" 인코딩="utf-8" ?>
<bridge 네임스페이스="Dflying" className="YahooWeatherService">
<proxy type="Microsoft.Web.Services.BridgeRestProxy"
serviceUrl=" http://xml.weather.yahoo.com/forecastrss " />
<메소드 이름="GetWeather">
<입력>
<매개변수 이름="p" />
<매개변수 이름="u" 값="c" />
</input>
<변환>
<transform type="Microsoft.Web.Services.XPathBridgeTransformer">
<데이터>
<속성 이름="선택기" 값="채널" />
<사전 이름="namespaceMapping">
<item name="yweather" value=" http://xml.weather.yahoo.com/ns/rss/1.0 " />
</사전>
<사전 이름="selectedNodes">
<item name="제목" value="제목" />
<항목 이름="설명" 값="항목/설명" />
<item name="CurrentCondition" value="item/yweather:condition/@text" />
</사전>
</data>
</transform>
</변환>
</method>
</bridge>
이제 테스트할 ASP.NET 페이지를 만듭니다. 먼저 ScriptManager가 천 번 반복되고 Bridge에 대한 참조가 있습니다. <atlas:ScriptManager ID="sm" runat="server">
<서비스>
<atlas:ServiceReference Path="YahooWeatherBridge.asbx" />
</서비스>
</atlas:ScriptManager>
그 다음에는 여러 도시와 해당 도시 코드를 나열하는 HTML Select 요소가 있습니다:
<!-- 장소 선택기 -->
<select id="장소">
<option selected="selected" value="CHXX0116">상하이, CH</option>
<option value="USCA0746">캘리포니아주 마운틴뷰</option>
<option value="CHXX0008">베이징, CH</option>
</select>
서비스 호출을 트리거하는 데 사용되는 HTML 버튼:
<!-- 서비스 호출 -->
<input id="getWeather" type="button" value="날씨 가져오기" onclick="return getWeather_onclick()" />
결과를 표시하기 위해 HTML 조각이 사용됩니다:
<!-- 결과 표시 -->
<div id="결과" 스타일="표시: 없음;">
<div style="배경색: 회색; 글꼴 가중치: 굵게;">제목</div>
<div id="제목"></div>
<div style="배경색: 회색; 글꼴 가중치: 굵은 글씨;">설명</div>
<div id="설명"></div>
</div>
그런 다음 JavaScript가 나옵니다. Dflying.YahooWeatherService.GetWeather()를 통해 Mashup이 호출되고, 메서드가 반환된 후 변환된 값이 페이지에 출력되는 것을 볼 수 있습니다. function getWeather_onclick() {
// 새로운 아틀라스 '선택' 컨트롤
var place = new Sys.UI.Select($('place'));
// 브릿지 메소드 호출
Dflying.YahooWeatherService.GetWeather({'p': place.get_selectedValue()}, onGetComplete);
}
함수 onGetComplete(결과) {
$('result').style.display = "차단";
$('제목').innerHTML = 결과[0].제목;
$('description').innerHTML = 결과[0].Description;
}