المؤلف: Dflying Chen ( http://dflying.cnblogs.com/ )
في المقالة السابقة (الاتصال بخدمة الويب في ASP.NET Atlas - إنشاء Mashup للاتصال بخدمة الويب عن بعد (المعرفة الأساسية ومثال بسيط))، قدمت بعض المعرفة الأساسية حول Mashup لخدمة الويب عن بعد في Atlas وقدمت مثالًا أساسيًا وهذا غير مفيد على الإطلاق. بالعودة إلى هذا الموضوع اليوم، سأقدم مثالًا أكثر تعقيدًا ولكنه مفيد إلى حد ما - Yahoo!
كفى هراء، دعونا نتعرف أولاً على خدمة Yahoo! Weather: توفر Yahoo! خدمة التنبؤ بالطقس على موقعها الإلكتروني ( http://weather.yahoo.com/ )، كما أنها توفر واجهة خدمة ويب ( http:/) /developer.yahoo.com/weather/ )
من صفحتي الويب أعلاه، يمكننا معرفة أن عنوان URL لخدمة الطقس التي تقدمها Yahoo! هو 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 التالي غير المعقد للغاية:
نتيجة XML لخدمة الطقس من Yahoo
<?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>طقس ياهو - شنغهاي، CH</title>
<link>http://us.rd.yahoo.com/dailynews/rss/weather/Shanghai__CH/*http://xml.weather.yahoo.com/forecast/CHXX0116_c.html</link>
<وصف>ياهو الطقس لشنغهاي، CH</description>
<language>en-us</language>
<lastBuildDate>الخميس، 25 مايو 2006، الساعة 11:00 صباحًا بتوقيت وسط أمريكا</lastBuildDate>
<ttl>60</ttl>
<yweather:location city = "منطقة شنغهاي" = "" البلد = "CH" />
<yweather:وحدات درجة الحرارة = "C" المسافة = "كم" الضغط = "ميغابايت" السرعة = "كيلومتر في الساعة" />
<yweather:ريح الرياح = "21" اتجاه = "260" السرعة = "14" />
<yweather:رطوبة الغلاف الجوي = "78" الرؤية = "299" الضغط = "0" الارتفاع = "0" />
<yweather:علم الفلك الشروق = "4:52 صباحًا" الغروب = "6:50 مساءً" />
<صورة>
<العنوان>ياهو الطقس</العنوان>
<العرض>142</العرض>
<الارتفاع>18</الارتفاع>
<link>http://weather.yahoo.com/</link>
<url>/u/info_img/2009-06/30/main_142b.gif</url>
</الصورة>
<العنصر>
<title>الظروف في شنغهاي، CH الساعة 11:00 صباحًا بتوقيت وسط أمريكا</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 مايو 2006، الساعة 11:00 صباحًا بتوقيت وسط أمريكا</pubDate>
<yweather:condition text="Fog" code="20" temp="21" date="الخميس، 25 مايو 2006 الساعة 11:00 صباحًا بتوقيت وسط أمريكا" />
<وصف>
<![CDATA[
<img src=" <b>الظروف الحالية:</b><br />
ضباب، 21 درجة مئوية<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/>
(مقدمة من قناة الطقس)<br/>
]]>
</وصف>
<yweather:forecast day="Thu" date="25 مايو 2006" low="20" High="25" text="العواصف الرعدية المتفرقة" code="38" />
<yweather:يوم التوقعات = "الجمعة" تاريخ = "26 مايو 2006" منخفض = "18" مرتفع = "26" نص = "AM زخات مطر" كود = "39" />
<guid isPermaLink="false">CHXX0116_2006_05_25_11_0_CST</guid>
</البند>
</القناة>
</rss>
<!-- p1.weather.scd.yahoo.com uncompressed/chunked Thu 25 May 20:49:07 PDT 2006 -->
يمكننا أن نرى أن المعلومات التي يقدمها شاملة للغاية (حتى أوقات شروق الشمس وغروبها... )، دعنا نكتب صفحة asbx Bridge لمزج هذه الخدمة.
أولاً، بالإشارة إلى عبارة asbx في المقالة Calling Web Service in ASP.NET Atlas - إنشاء Mashup لاستدعاء خدمة الويب عن بعد (المعرفة الأساسية ومثال بسيط)، يمكننا كتابة الفقرة التالية:
ترميز <?xml version= "1.0" = "utf-8" ?>
<bridge namespace = "Dflying" className = "YahooWeatherService">
<proxy type = "Microsoft.Web.Services.BridgeRestProxy"
ServiceUrl=" http://xml.weather.yahoo.com/forecastrss " />
<method name="GetWeather">
<الإدخال>
<اسم المعلمة = "p" />
<اسم المعلمة = "u" value = "c" />
</الإدخال>
</الطريقة>
</الجسر>
في:
تسمح لنا سمات مساحة الاسم وclassName الخاصة بـ <bridge> وسمة الاسم الخاصة بـ <method> بالوصول إلى Mashup هذا في عميل JavaScript من خلال توقيعات الطريقة مثل Dflying.YahooWeatherService.GetWeather().
تحدد سمة ServiceUrl الخاصة بـ <proxy> عنوان URL الخاص بخدمة الطقس في Yahoo!
تحدد طريقة GetWeather المعلمتين p وu المذكورتين أعلاه. لقد حددنا القيمة الافتراضية للمعلمة u على أنها c (تمثل درجة مئوية)، وسيتم تمرير المعلمة p بواسطة المتصل.
هذه الخطوة في الواقع كافية. سيتلقى العميل سلسلة XML الموضحة في المتصفح أعلاه، ويمكن معالجتها وعرضها على العميل. لكن معالجة XML للعميل ليست بهذه السهولة أو الكفاءة، كما أن نقل الكثير من المعلومات غير الضرورية عبر الشبكة يعد أيضًا مضيعة للوقت. لذلك نستخدم هنا المحول المدمج في asbx لمعالجة XML هذا واستخراج المحتوى الذي نهتم به وإرساله إلى العميل في شكل JSON. قم بإضافة الفقرة التالية إلى القسم <method>:
<transforms>
<transform type="Microsoft.Web.Services.XPathBridgeTransformer">
<البيانات>
<اسم السمة = "المحدد" value = "القناة" />
<اسم القاموس = "namespaceMapping">
<اسم العنصر = "yweather" value=" http://xml.weather.yahoo.com/ns/rss/1.0 " />
</القاموس>
<اسم القاموس = "العقد المختارة">
<اسم العنصر = "العنوان" value = "العنوان" />
<اسم العنصر = "الوصف" القيمة = "العنصر/الوصف" />
<اسم العنصر = "CurrentCondition" value = "item/yweather:condition/@text" />
</القاموس>
</البيانات>
</تحويل>
</التحويلات>
تشير عبارة <transforms> إلى أن القيمة المرجعة لأسلوب Mashup هذا سيتم تغييرها بواسطة بعض المحولات، وهي تعلن عن محول من النوع Microsoft.Web.Services.XPathBridgeTransformer، مما يعني أنه سيتم استخدام تعبيرات XPath للتحويل. يجب الإعلان عن الأجزاء التالية في XPathBridgeTransformer:
الاسم هو مقطع سمة للمحدد، وسمة القيمة المحددة هي تعبير XPath، الذي سيحدد مقطع البيانات الذي سيتم استخدامه بواسطة XPathBridgeTransformer بأكمله.
الاسم هو مقطع قاموس من namespaceMapping، والذي يحدد تعيين مساحة الاسم في ملف XML هذا. إذا استخدمنا مساحة اسم معينة في عملية اختيار العقدة التالية، فيجب أن يكون إعلانها هنا. نضيف هنا خريطة إلى yweather، لأنه سيتم استخدامها أدناه.
الاسم هو مقطع قاموس من العقد المحددة، حيث تكون سمة القيمة لكل عنصر عبارة عن سلسلة XPath، تُستخدم لتحديد القيمة المقابلة من XML، ويتم استخدام سمة الاسم لتحديد اسم السمة المقابل في JavaScript. كمثال هنا، حصلت على ثلاثة أجزاء فقط من المحتوى. يمكنك أن ترى أن تعيين مساحة الاسم المحدد أعلاه يُستخدم في XPath الخاص بـ CurrentCondition.
لن أخوض في تفاصيل حول XPath، يمكن للأصدقاء المهتمين به أو غير المطلعين عليه أن يبحثوا عنه في Google بأنفسهم. هناك العديد من الموارد عبر الإنترنت. لست على دراية بالأنواع الأخرى من المحولات وسأتحدث عنها إذا واجهتها في المستقبل. ملف 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">
<الإدخال>
<اسم المعلمة = "p" />
<اسم المعلمة = "u" value = "c" />
</الإدخال>
<التحويلات>
<transform type="Microsoft.Web.Services.XPathBridgeTransformer">
<البيانات>
<اسم السمة = "المحدد" value = "القناة" />
<اسم القاموس = "namespaceMapping">
<اسم العنصر = "yweather" value=" http://xml.weather.yahoo.com/ns/rss/1.0 " />
</القاموس>
<اسم القاموس = "العقد المختارة">
<اسم العنصر = "العنوان" value = "العنوان" />
<اسم العنصر = "الوصف" القيمة = "العنصر/الوصف" />
<اسم العنصر = "CurrentCondition" value = "item/yweather:condition/@text" />
</القاموس>
</البيانات>
</تحويل>
</التحويلات>
</الطريقة>
</الجسر>
الآن قم بإنشاء صفحة ASP.NET للاختبار أولاً، لا يزال هناك ScriptManager يتكرر ألف مرة، وإشارة إلى Bridge: <atlas:ScriptManager ID="sm" runat="server">.
<الخدمات>
<atlas:ServiceReference Path="YahooWeatherBridge.asbx" />
</الخدمات>
</atlas:ScriptManager>
ثم هناك عنصر تحديد HTML، الذي يسرد العديد من المدن ورموز المدن المقابلة:
<!-- محدد المكان -->
<اختر معرف = "مكان">
<option Selected="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="background-color: Gray;font-weight:old;">العنوان</div>
<div id="title"></div>
<div style="background-color: Gray;font-weight:old;">الوصف</div>
<div id="description"></div>
</div>
ثم يأتي JavaScript. يمكنك أن ترى أنه يتم استدعاء Mashup من خلال Dflying.YahooWeatherService.GetWeather()، ويتم إخراج القيمة المحولة إلى الصفحة بعد إرجاع الطريقة: function getWeather_onclick() {.
// عنصر تحكم "تحديد" أطلس جديد
var place = new Sys.UI.Select($('place'));
// استدعاء طريقة الجسر
Dflying.YahooWeatherService.GetWeather({'p': place.get_selectedValue()}, onGetComplete);
}
دالة onGetComplete(نتيجة) {
$('result').style.display = "block";
$('title').innerHTML = result[0].Title;
$('description').innerHTML = result[0].Description;
}