source: cows/branches/cows-vis/cows/pylons/project_templates/cows_server/+package+/public/js/yui/examples/io/io-weather_log.html @ 5259

Subversion URL: http://proj.badc.rl.ac.uk/svn/ndg/cows/branches/cows-vis/cows/pylons/project_templates/cows_server/+package+/public/js/yui/examples/io/io-weather_log.html@5259
Revision 5259, 19.0 KB checked in by domlowe, 11 years ago (diff)

adding yui javascript

Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3<head>
4        <title>YUI Library Examples: IO Utility: XML Transaction &mdash; Retrieving a Yahoo! Weather RSS (XML) Feed via a Server-Side Proxy</title>
5    <meta http-equiv="content-type" content="text/html; charset=utf-8">
6        <link rel="stylesheet" type="text/css" href="../../assets/yui.css" >
7
8<style>
9    /*Supplemental CSS for the YUI distribution*/
10    #custom-doc { width: 95%; min-width: 950px; }
11    #pagetitle {background-image: url(../../assets/bg_hd.gif);}
12    #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}
13</style>
14
15<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
16
17<!--there is no custom header content for this example-->
18
19<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
20<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
21
22</head>
23<body id="yahoo-com" class=" yui-skin-sam">
24<div id="custom-doc" class="yui-t2">
25<div id="hd">
26        <div id="ygunav">
27                <p>
28            <em>
29                <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i> 
30            </em>
31                </p>
32                <form action="http://search.yahoo.com/search" id="sitesearchform">
33            <input name="vs" type="hidden" value="developer.yahoo.com">
34            <input name="vs" type="hidden" value="yuiblog.com">
35                    <div id="sitesearch">
36                        <label for="searchinput">Site Search (YDN &amp; YUIBlog): </label>
37                            <input type="text" id="searchinput" name="p">
38                            <input type="submit" value="Search" id="searchsubmit" class="ygbt">
39                    </div>
40                </form>
41    </div>
42        <div id="ygma"><a href="../../"><img src="../../assets/logo.gif"  border="0" width="200" height="93"></a></div>
43        <div id="pagetitle"><h1>YUI Library Examples: IO Utility: XML Transaction &mdash; Retrieving a Yahoo! Weather RSS (XML) Feed via a Server-Side Proxy</h1></div>
44</div>
45<div id="bd">
46
47        <div id="bar-note"><p><strong>Note:</strong> This is YUI 3.x. Looking for <a href="http://developer.yahoo.com/yui/">YUI 2.x</a>?</p></div>
48
49        <div id="yui-main">
50                <div class="yui-b">
51                  <div class="yui-ge">
52                          <div class="yui-u first example" id="main">
53
54        <h2>IO Utility: XML Transaction &mdash; Retrieving a Yahoo! Weather RSS (XML) Feed via a Server-Side Proxy</h2>
55
56        <div id="example" class="promo">
57        <p>
58        <p>This example demonstrates how to use IO and a PHP proxy &mdash; to work around XMLHttpRequest's same-domain policy &mdash; to retrieve an XML document from <code>http://xml.weather.yahoo.com/forecastrss</code>.</p>
59
60<p>To try out the example, fill in your five-digit US zip code, or Location ID.</p>     </p>   
61
62        <div class="module example-container ">
63                        <div class="hd exampleHd">
64                        <p class="newWindowButton yui-skin-sam">
65                <a href="io-weather_clean.html" target="_blank">View example in new window.</a>
66            </p>
67                </div>          <div id="example-canvas" class="bd">
68
69               
70        <!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
71       
72        <form id="wForm">
73<fieldset>
74        <label>Zip Code or Location ID</label> <input type="text" id="zip" value="94089">
75        <p>Please enter a U.S. Zip Code or a location ID to get the current temperature.  The default is Zip Code 94089 for Sunnyvale, California; its location ID is: USCA1116.</p>
76</fieldset>
77<div id="weatherModule"></div>
78<input type="button" value="Get Weather RSS" id="getWeather">
79</form>
80
81
82<script language="javascript">
83
84YUI({base:"../../build/", timeout: 10000}).use("io",
85
86        function(Y) {
87
88                //Get a Node reference to the div we'll use for displaying
89                //results:
90                var div = Y.Node.get('#weatherModule');
91
92                //Define a function to handle a successful response from
93                //Yahoo! Weather.  The success handler will find the response
94                //object in its second argument:
95                function successHandler(id, o){
96                        Y.log("Success handler called; handler will parse the retrieved XML and insert into DOM.", "info", "example");
97                        var root = o.responseXML.documentElement;
98                        var oTitle = root.getElementsByTagName('description')[0].firstChild.nodeValue;
99                        var oDateTime = root.getElementsByTagName('lastBuildDate')[0].firstChild.nodeValue;
100                        var descriptionNode = root.getElementsByTagName('description')[1].firstChild.nodeValue;
101
102                        div.set("innerHTML", "<p>" + oTitle + "</p>" + "<p>" + oDateTime + "</p>" + descriptionNode);
103
104                        Y.log("Success handler is complete.", "info", "example");
105                }
106
107                //Provide a function that can help debug failed
108                //requests:
109                function failureHandler(id, o){
110                        Y.log("Failure handler called; http status: " + o.status, "info", "example");
111                        div.set("innerHTML", o.status + " " + o.statusText);
112                }
113
114                //When the Get RSS button is clicked, this function will fire
115                //and compose/dispatch the IO request:
116                function getModule(){
117                        //Get the input value:
118                        var iZip = Y.Node.get('#zip').get("value");
119
120                        //Create a querystring from the input value:
121                        var queryString = encodeURI('?p=' + iZip);
122
123                        //The location of our server-side proxy:
124                        var entryPoint = 'assets/weather.php';
125
126                        //Compile the full URI for the request:
127                        var sUrl = entryPoint + queryString;
128
129                        Y.log("Submitting request; zip code: " + iZip, "info", "example");
130
131                        //Make the reqeust:
132                        var request = Y.io(sUrl, {
133                                method:"GET",
134                                on:
135                                        {
136                                                success:successHandler,
137                                                failure:failureHandler
138                                        }
139                                }
140                        );
141                }
142
143                //Use the Event Utility to wire the Get RSS button
144                //to the getModule function:
145                Y.on("click", getModule, "#getWeather");
146
147                Y.log("When you retrieve weather RSS data, relevant steps in the process will be reported here in the logger/console.", "info", "example");
148        }
149);
150</script>
151       
152        <!--END SOURCE CODE FOR EXAMPLE =============================== -->
153       
154               
155                </div>
156        </div>                 
157        </div>
158               
159        <h2 class="first">Exploring the Code for This Example</h2>
160
161<p>Create a YUI instance, using IO, for this example:</p>
162
163<textarea name="code" class="JScript" cols="60" rows="1">
164//Create a YUI instance including support for IO:
165YUI({base:"../../build/", timeout: 10000}).use("io", function(Y) {
166        // Y is the YUI instance.
167        // The rest of the following code is encapsulated in this
168        // anonymous function.
169} );
170</textarea>
171
172<h3>Callback Object and the Weather RSS</h3>
173<p><a href="http://developer.yahoo.com/weather/">Yahoo! Weather RSS</a> will return an XML document if the transaction is successful. The following <code>success</code> callback handlers is used to process the response.</p>
174<textarea name="code" class="JScript" cols="60" rows="1">//Define a function to handle a successful response from
175//Yahoo! Weather.  The success handler will find the response
176//object in its second argument:
177function successHandler(id, o){
178    Y.log("Success handler called; handler will parse the retrieved XML and insert into DOM.", "info", "example");
179    var root = o.responseXML.documentElement;
180    var oTitle = root.getElementsByTagName('description')[0].firstChild.nodeValue;
181    var oDateTime = root.getElementsByTagName('lastBuildDate')[0].firstChild.nodeValue;
182    var descriptionNode = root.getElementsByTagName('description')[1].firstChild.nodeValue;
183
184    div.set("innerHTML", "<p>" + oTitle + "</p>" + "<p>" + oDateTime + "</p>" + descriptionNode);
185
186    Y.log("Success handler is complete.", "info", "example");
187}</textarea>
188
189<h3>Assemble the Querystring and Initiate the Transaction</h3>
190<p>The Yahoo! Weather RSS feed requires a simple HTTP GET request with a base URL and a querystring containing the required information as a name-value pair.  In this example, we will use the following parameter:</p>
191<ul>
192        <li><code>p</code> &mdash; location as U.S. Zip Code or Location ID</li>
193</ul>
194
195<p>The following are some example location IDs (do not include the city name):</p>
196<ul>
197        <li><strong>Beijing</strong>: <em>CHXX0008</em></li>
198        <li><strong>Helsinki</strong>: <em>FIXX0002</em></li>
199        <li><strong>London</strong>: <em>UKXX0085</em></li>
200        <li><strong>Moscow</strong>: <em>RSXX0063</em></li>
201        <li><strong>Munich</strong>: <em>GMXX0087</em></li>
202        <li><strong>Paris</strong>: <em>FRXX0076</em></li>
203        <li><strong>Riyadh</strong>: <em>SAXX0017</em></li>
204        <li><strong>Tokyo</strong>: <em>JAXX0085</em></li>
205</ul>
206<p>For more details on the Yahoo! Weather RSS feed and other location IDs, please visit <a href="http://developer.yahoo.com/weather/index.html">http://developer.yahoo.com/weather/index.html</a>.
207<p>Function <code>getModule</code> retrieves the input values for location and creates a querystring:</p>
208<textarea name="code" class="JScript" cols="60" rows="1">//When the Get RSS button is clicked, this function will fire
209//and compose/dispatch the IO request:
210function getModule(){
211    //Get the input value:
212    var iZip = Y.Node.get('#zip').get("value");
213
214    //Create a querystring from the input value:
215    var queryString = encodeURI('?p=' + iZip);
216
217    //The location of our server-side proxy:
218    var entryPoint = 'assets/weather.php';
219
220    //Compile the full URI for the request:
221    var sUrl = entryPoint + queryString;
222
223    Y.log("Submitting request; zip code: " + iZip, "info", "example");
224
225    //Make the reqeust:
226    var request = Y.io(sUrl, {
227        method:"GET",
228        on:
229            {
230                success:successHandler,
231                failure:failureHandler
232            }
233        }
234    );
235}
236
237//Use the Event Utility to wire the Get RSS button
238//to the getModule function:
239Y.on("click", getModule, "#getWeather");</textarea>
240
241<h3>Full Script Source</h3>
242
243<p>Here is the full JavaScript source for this example:</p>
244
245<textarea name="code" class="JScript" cols="60" rows="1">
246
247YUI({base:"../../build/", timeout: 10000}).use("io",
248
249        function(Y) {
250
251                //Get a Node reference to the div we'll use for displaying
252                //results:
253                var div = Y.Node.get('#weatherModule');
254
255                //Define a function to handle a successful response from
256                //Yahoo! Weather.  The success handler will find the response
257                //object in its second argument:
258                function successHandler(id, o){
259                        Y.log("Success handler called; handler will parse the retrieved XML and insert into DOM.", "info", "example");
260                        var root = o.responseXML.documentElement;
261                        var oTitle = root.getElementsByTagName('description')[0].firstChild.nodeValue;
262                        var oDateTime = root.getElementsByTagName('lastBuildDate')[0].firstChild.nodeValue;
263                        var descriptionNode = root.getElementsByTagName('description')[1].firstChild.nodeValue;
264
265                        div.set("innerHTML", "<p>" + oTitle + "</p>" + "<p>" + oDateTime + "</p>" + descriptionNode);
266
267                        Y.log("Success handler is complete.", "info", "example");
268                }
269
270                //Provide a function that can help debug failed
271                //requests:
272                function failureHandler(id, o){
273                        Y.log("Failure handler called; http status: " + o.status, "info", "example");
274                        div.set("innerHTML", o.status + " " + o.statusText);
275                }
276
277                //When the Get RSS button is clicked, this function will fire
278                //and compose/dispatch the IO request:
279                function getModule(){
280                        //Get the input value:
281                        var iZip = Y.Node.get('#zip').get("value");
282
283                        //Create a querystring from the input value:
284                        var queryString = encodeURI('?p=' + iZip);
285
286                        //The location of our server-side proxy:
287                        var entryPoint = 'assets/weather.php';
288
289                        //Compile the full URI for the request:
290                        var sUrl = entryPoint + queryString;
291
292                        Y.log("Submitting request; zip code: " + iZip, "info", "example");
293
294                        //Make the reqeust:
295                        var request = Y.io(sUrl, {
296                                method:"GET",
297                                on:
298                                        {
299                                                success:successHandler,
300                                                failure:failureHandler
301                                        }
302                                }
303                        );
304                }
305
306                //Use the Event Utility to wire the Get RSS button
307                //to the getModule function:
308                Y.on("click", getModule, "#getWeather");
309
310                Y.log("When you retrieve weather RSS data, relevant steps in the process will be reported here in the logger/console.", "info", "example");
311        }
312);
313</textarea>
314
315<h3>Proxy and Response</h3>
316<p>
317Once <code>weather.php</code> receives the querystring, it will construct and send an HTTP GET using CURL to retrieve the results from the Yahoo! Weather RSS feed.  This allows the transaction to succeed while working around XMLHttpRequest's strict security policy.
318</p>
319
320<textarea name="code" class="PHP" cols="60" rows="1">
321//Within a PHP block:
322
323// Since the result is an XML document, the Content-type
324// header must be set to "text/xml" for the data to be
325// treated as XML and to populate responseXML.
326header("Content-Type:text/xml");
327
328// $url is the resource path of the Y! Weather RSS
329// with the appended querystring of zip code/location id.
330$url = 'http://xml.weather.yahoo.com/forecastrss?'.getenv('QUERY_STRING');
331
332// This function initializes CURL, sets the necessary CURL
333// options, executes the request and returns the results.
334function getResource($url){
335        $ch = curl_init();
336        curl_setopt($ch, CURLOPT_URL, $url);
337        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
338        $result = curl_exec($ch);
339        curl_close($ch);
340
341        return $result;
342}
343
344// Call getResource to make the request.
345$feed = getResource($url);
346
347// Return the results.
348echo $feed;
349</textarea>                             </div>
350                                <div class="yui-u sidebar">
351                                       
352                               
353                                        <div id="examples" class="mod box4">
354                        <div class="hd">
355                                                <h4>
356    IO Utility Examples:</h4>
357                        </div>
358                                                <div class="bd">
359                                                        <ul>
360                                                                <li><a href='../io/io-post.html'>POST Transaction</a></li><li class='selected'><a href='../io/io-weather.html'>XML Transaction &mdash; Retrieving a Yahoo! Weather RSS (XML) Feed via a Server-Side Proxy</a></li><li><a href='../io/io-xdr.html'>Cross-Domain JSON Transaction &mdash; Retrieving a News Feed from Yahoo! Pipes</a></li>                                                       </ul>
361                                                </div>
362                                        </div>
363                                       
364                                        <div class="mod box4">
365                        <div class="hd">
366                                                <h4>More IO Utility Resources:</h4>
367                        </div>
368                        <div class="bd">
369                                                <ul>
370                                                        <!-- <li><a href="http://developer.yahoo.com/yui/io/">User's Guide</a> (external)</li> -->
371                                                <li><a href="../../api/module_io.html">API Documentation</a></li>
372</ul>
373                        </div>
374                                        </div>
375                          </div>
376                </div>
377               
378                </div>
379        </div>
380
381
382<div class="yui-b toc3" id="tocWrapper">
383<!-- TABLE OF CONTENTS -->
384<div id="toc">
385       
386<ul>
387<li class="sect first">YUI 3.x Project</li><li class="item"><a title="The Yahoo! User Interface (YUI) Library, 3.x Branch, " href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site (external)</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="The YUI Library can be downloaded from SourceForge" href="http://sourceforge.net/projects/yui/">YUI 3 on Sourceforge (external)</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/3/license.html">YUI License (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI (Global Prerequisite) - Functional Examples" href="../../examples/yui/index.html">YUI (Global Prerequisite)</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Base - Functional Examples" href="../../examples/base/index.html">Base</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="Drag &amp; Drop - Functional Examples" href="../../examples/dd/index.html">Drag &amp; Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="selected "><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="Queue - Functional Examples" href="../../examples/queue/index.html">Queue</a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Grids - Functional Examples" href="../../examples/cssgrids/index.html">CSS Grids</a></li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">The YUI Community</li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="item"><a title="The Yahoo! Group YDN-JavaScript hosts the YUI community forum" href="http://tech.groups.yahoo.com/group/ydn-javascript/">YUI Forum (external)</a></li><li class="item"><a title="The Yahoo! Group yui3 is dedicated to the 3.x branch of the Yahoo! User Interface (YUI) Library." href="http://tech.groups.yahoo.com/group/yui3/">YUI 3 Forum (external)</a></li><li class="item"><a title="YUI is used by Yahoo! and by hundreds of other sites, including many you know and love." href="/yui/poweredby/">YUI Sightings (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li><li class="sect">YUI Articles on the YUI Website</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Reporting Bugs and Making Feature Requests for YUI Components" href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests (external)</a></li><li class="item"><a title="Serve YUI source files from Yahoo! -- free, fast, and simple" href="http://developer.yahoo.com/yui/3/articles/hosting/">Serving YUI Files from Yahoo! (external)</a></li></ul>
388</div>
389</div>
390        </div><!--closes bd-->
391
392        <div id="ft">
393        <p class="first">Copyright &copy; 2008 Yahoo! Inc. All rights reserved.</p>
394        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> -
395            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> -
396            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> -
397            <a href="http://careers.yahoo.com/">Job Openings</a></p>
398        </div>
399</div>
400<script src="../../assets/dpSyntaxHighlighter.js"></script>
401<script language="javascript"> 
402dp.SyntaxHighlighter.HighlightAll('code'); 
403</script>
404</body>
405</html>
406<!-- delightfuture.corp.yahoo.com uncompressed/chunked Wed Aug 13 16:45:32 PDT 2008 -->
Note: See TracBrowser for help on using the repository browser.