|
0
|
1 |
|
|
|
2 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
|
3 |
<html> |
|
|
4 |
<head> |
|
|
5 |
<title>YUI Library Examples: IO: XML Transaction — Retrieving a Yahoo! Weather RSS (XML) Feed via a Server-Side Proxy</title> |
|
|
6 |
<meta http-equiv="content-type" content="text/html; charset=utf-8"> |
|
|
7 |
<link rel="stylesheet" type="text/css" href="../../assets/yui.css" > |
|
|
8 |
|
|
|
9 |
<style> |
|
|
10 |
/*Supplemental CSS for the YUI distribution*/ |
|
|
11 |
#custom-doc { width: 95%; min-width: 950px; } |
|
|
12 |
#pagetitle {background-image: url(../../assets/bg_hd.gif);} |
|
|
13 |
/* #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/ |
|
|
14 |
</style> |
|
|
15 |
|
|
|
16 |
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css"> |
|
|
17 |
|
|
|
18 |
<!--there is no custom header content for this example--> |
|
|
19 |
|
|
|
20 |
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" /> |
|
|
21 |
<script type="text/javascript" src="../../build/yui/yui-min.js"></script> |
|
|
22 |
|
|
|
23 |
</head> |
|
|
24 |
<body id="yahoo-com" class=" yui-skin-sam"> |
|
|
25 |
<div id="custom-doc" class="yui-t2"> |
|
|
26 |
<div id="hd"> |
|
|
27 |
<div id="ygunav"> |
|
|
28 |
<p> |
|
|
29 |
<em> |
|
|
30 |
<a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i> |
|
|
31 |
</em> |
|
|
32 |
</p> |
|
|
33 |
<form action="http://search.yahoo.com/search" id="sitesearchform"> |
|
|
34 |
<input name="vs" type="hidden" value="developer.yahoo.com"> |
|
|
35 |
<input name="vs" type="hidden" value="yuiblog.com"> |
|
|
36 |
<div id="sitesearch"> |
|
|
37 |
<label for="searchinput">Site Search (YDN & YUIBlog): </label> |
|
|
38 |
<input type="text" id="searchinput" name="p"> |
|
|
39 |
<input type="submit" value="Search" id="searchsubmit" class="ygbt"> |
|
|
40 |
</div> |
|
|
41 |
</form> |
|
|
42 |
</div> |
|
|
43 |
<div id="ygma"><a href="../../"><img src="../../assets/logo.gif" border="0" width="200" height="93"></a></div> |
|
|
44 |
<div id="pagetitle"><h1>YUI Library Examples: IO: XML Transaction — Retrieving a Yahoo! Weather RSS (XML) Feed via a Server-Side Proxy</h1></div> |
|
|
45 |
</div> |
|
|
46 |
<div id="bd"> |
|
|
47 |
|
|
|
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: XML Transaction — Retrieving a Yahoo! Weather RSS (XML) Feed via a Server-Side Proxy</h2> |
|
|
55 |
|
|
|
56 |
<div id="example" class="promo"> |
|
|
57 |
<div class="example-intro"> |
|
|
58 |
<p>This example demonstrates how to use IO and a PHP proxy — to work around XMLHttpRequest's same-domain policy — 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> </div> |
|
|
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 |
|
|
|
84 |
YUI({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 |
<div id="syntax1" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">//Create a YUI instance including support for IO:</span></div></li><li class="li1"><div class="de1">YUI<span class="br0">(</span><span class="br0">{</span>base<span class="sy0">:</span><span class="st0">"../../build/"</span><span class="sy0">,</span> timeout<span class="sy0">:</span> <span class="nu0">10000</span><span class="br0">}</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"io-base"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">// Y is the YUI instance.</span></div></li><li class="li1"><div class="de1"> <span class="co1">// The rest of the following code is encapsulated in this</span></div></li><li class="li2"><div class="de2"> <span class="co1">// anonymous function.</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span> <span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">//Create a YUI instance including support for IO:</span> |
|
|
164 |
YUI<span class="br0">(</span><span class="br0">{</span>base<span class="sy0">:</span><span class="st0">"../../build/"</span><span class="sy0">,</span> timeout<span class="sy0">:</span> <span class="nu0">10000</span><span class="br0">}</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"io-base"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span> |
|
|
165 |
<span class="co1">// Y is the YUI instance.</span> |
|
|
166 |
<span class="co1">// The rest of the following code is encapsulated in this</span> |
|
|
167 |
<span class="co1">// anonymous function.</span> |
|
|
168 |
<span class="br0">}</span> <span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax1-plain">//Create a YUI instance including support for IO: |
|
|
169 |
YUI({base:"../../build/", timeout: 10000}).use("io-base", function(Y) { |
|
|
170 |
// Y is the YUI instance. |
|
|
171 |
// The rest of the following code is encapsulated in this |
|
|
172 |
// anonymous function. |
|
|
173 |
} );</textarea></div> |
|
|
174 |
<h3>Callback Object and the Weather RSS</h3> |
|
|
175 |
<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> |
|
|
176 |
<div id="syntax2" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">//Define a function to handle a successful response from</span></div></li><li class="li1"><div class="de1"><span class="co1">//Yahoo! Weather. The success handler will find the response</span></div></li><li class="li1"><div class="de1"><span class="co1">//object in its second argument:</span></div></li><li class="li1"><div class="de1"><span class="kw2">function</span> successHandler<span class="br0">(</span>id<span class="sy0">,</span> o<span class="br0">)</span><span class="br0">{</span></div></li><li class="li2"><div class="de2"> Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"Success handler called; handler will parse the retrieved XML and insert into DOM."</span><span class="sy0">,</span> <span class="st0">"info"</span><span class="sy0">,</span> <span class="st0">"example"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> root <span class="sy0">=</span> o.<span class="me1">responseXML</span>.<span class="me1">documentElement</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> oTitle <span class="sy0">=</span> root.<span class="me1">getElementsByTagName</span><span class="br0">(</span><span class="st0">'description'</span><span class="br0">)</span><span class="br0">[</span><span class="nu0">0</span><span class="br0">]</span>.<span class="me1">firstChild</span>.<span class="me1">nodeValue</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> oDateTime <span class="sy0">=</span> root.<span class="me1">getElementsByTagName</span><span class="br0">(</span><span class="st0">'lastBuildDate'</span><span class="br0">)</span><span class="br0">[</span><span class="nu0">0</span><span class="br0">]</span>.<span class="me1">firstChild</span>.<span class="me1">nodeValue</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> descriptionNode <span class="sy0">=</span> root.<span class="me1">getElementsByTagName</span><span class="br0">(</span><span class="st0">'description'</span><span class="br0">)</span><span class="br0">[</span><span class="nu0">1</span><span class="br0">]</span>.<span class="me1">firstChild</span>.<span class="me1">nodeValue</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> div.<span class="me1">set</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="sy0">,</span> <span class="st0">"<p>"</span> <span class="sy0">+</span> oTitle <span class="sy0">+</span> <span class="st0">"</p>"</span> <span class="sy0">+</span> <span class="st0">"<p>"</span> <span class="sy0">+</span> oDateTime <span class="sy0">+</span> <span class="st0">"</p>"</span> <span class="sy0">+</span> descriptionNode<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"Success handler is complete."</span><span class="sy0">,</span> <span class="st0">"info"</span><span class="sy0">,</span> <span class="st0">"example"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">//Define a function to handle a successful response from</span> |
|
|
177 |
<span class="co1">//Yahoo! Weather. The success handler will find the response</span> |
|
|
178 |
<span class="co1">//object in its second argument:</span> |
|
|
179 |
<span class="kw2">function</span> successHandler<span class="br0">(</span>id<span class="sy0">,</span> o<span class="br0">)</span><span class="br0">{</span> |
|
|
180 |
Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"Success handler called; handler will parse the retrieved XML and insert into DOM."</span><span class="sy0">,</span> <span class="st0">"info"</span><span class="sy0">,</span> <span class="st0">"example"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
181 |
<span class="kw2">var</span> root <span class="sy0">=</span> o.<span class="me1">responseXML</span>.<span class="me1">documentElement</span><span class="sy0">;</span> |
|
|
182 |
<span class="kw2">var</span> oTitle <span class="sy0">=</span> root.<span class="me1">getElementsByTagName</span><span class="br0">(</span><span class="st0">'description'</span><span class="br0">)</span><span class="br0">[</span><span class="nu0">0</span><span class="br0">]</span>.<span class="me1">firstChild</span>.<span class="me1">nodeValue</span><span class="sy0">;</span> |
|
|
183 |
<span class="kw2">var</span> oDateTime <span class="sy0">=</span> root.<span class="me1">getElementsByTagName</span><span class="br0">(</span><span class="st0">'lastBuildDate'</span><span class="br0">)</span><span class="br0">[</span><span class="nu0">0</span><span class="br0">]</span>.<span class="me1">firstChild</span>.<span class="me1">nodeValue</span><span class="sy0">;</span> |
|
|
184 |
<span class="kw2">var</span> descriptionNode <span class="sy0">=</span> root.<span class="me1">getElementsByTagName</span><span class="br0">(</span><span class="st0">'description'</span><span class="br0">)</span><span class="br0">[</span><span class="nu0">1</span><span class="br0">]</span>.<span class="me1">firstChild</span>.<span class="me1">nodeValue</span><span class="sy0">;</span> |
|
|
185 |
|
|
|
186 |
div.<span class="me1">set</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="sy0">,</span> <span class="st0">"<p>"</span> <span class="sy0">+</span> oTitle <span class="sy0">+</span> <span class="st0">"</p>"</span> <span class="sy0">+</span> <span class="st0">"<p>"</span> <span class="sy0">+</span> oDateTime <span class="sy0">+</span> <span class="st0">"</p>"</span> <span class="sy0">+</span> descriptionNode<span class="br0">)</span><span class="sy0">;</span> |
|
|
187 |
|
|
|
188 |
Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"Success handler is complete."</span><span class="sy0">,</span> <span class="st0">"info"</span><span class="sy0">,</span> <span class="st0">"example"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
189 |
<span class="br0">}</span></pre></div><textarea id="syntax2-plain">//Define a function to handle a successful response from |
|
|
190 |
//Yahoo! Weather. The success handler will find the response |
|
|
191 |
//object in its second argument: |
|
|
192 |
function successHandler(id, o){ |
|
|
193 |
Y.log("Success handler called; handler will parse the retrieved XML and insert into DOM.", "info", "example"); |
|
|
194 |
var root = o.responseXML.documentElement; |
|
|
195 |
var oTitle = root.getElementsByTagName('description')[0].firstChild.nodeValue; |
|
|
196 |
var oDateTime = root.getElementsByTagName('lastBuildDate')[0].firstChild.nodeValue; |
|
|
197 |
var descriptionNode = root.getElementsByTagName('description')[1].firstChild.nodeValue; |
|
|
198 |
|
|
|
199 |
div.set("innerHTML", "<p>" + oTitle + "</p>" + "<p>" + oDateTime + "</p>" + descriptionNode); |
|
|
200 |
|
|
|
201 |
Y.log("Success handler is complete.", "info", "example"); |
|
|
202 |
}</textarea></div> |
|
|
203 |
<h3>Assemble the Querystring and Initiate the Transaction</h3> |
|
|
204 |
<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> |
|
|
205 |
<ul> |
|
|
206 |
<li><code>p</code> — location as U.S. Zip Code or Location ID</li> |
|
|
207 |
</ul> |
|
|
208 |
|
|
|
209 |
<p>The following are some example location IDs (do not include the city name):</p> |
|
|
210 |
<ul> |
|
|
211 |
<li><strong>Beijing</strong>: <em>CHXX0008</em></li> |
|
|
212 |
<li><strong>Helsinki</strong>: <em>FIXX0002</em></li> |
|
|
213 |
<li><strong>London</strong>: <em>UKXX0085</em></li> |
|
|
214 |
<li><strong>Moscow</strong>: <em>RSXX0063</em></li> |
|
|
215 |
<li><strong>Munich</strong>: <em>GMXX0087</em></li> |
|
|
216 |
<li><strong>Paris</strong>: <em>FRXX0076</em></li> |
|
|
217 |
<li><strong>Riyadh</strong>: <em>SAXX0017</em></li> |
|
|
218 |
<li><strong>Tokyo</strong>: <em>JAXX0085</em></li> |
|
|
219 |
</ul> |
|
|
220 |
<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>. |
|
|
221 |
<p>Function <code>getModule</code> retrieves the input values for location and creates a querystring:</p> |
|
|
222 |
<div id="syntax3" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">//When the Get RSS button is clicked, this function will fire</span></div></li><li class="li1"><div class="de1"><span class="co1">//and compose/dispatch the IO request:</span></div></li><li class="li1"><div class="de1"><span class="kw2">function</span> getModule<span class="br0">(</span><span class="br0">)</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Get the input value:</span></div></li><li class="li2"><div class="de2"> <span class="kw2">var</span> iZip <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'#zip'</span><span class="br0">)</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"value"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">//Create a querystring from the input value:</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> queryString <span class="sy0">=</span> <span class="kw1">encodeURI</span><span class="br0">(</span><span class="st0">'?p='</span> <span class="sy0">+</span> iZip<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="co1">//The location of our server-side proxy:</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> entryPoint <span class="sy0">=</span> <span class="st0">'(assets/)weather.php'</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">//Compile the full URI for the request:</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> sUrl <span class="sy0">=</span> entryPoint <span class="sy0">+</span> queryString<span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"Submitting request; zip code: "</span> <span class="sy0">+</span> iZip<span class="sy0">,</span> <span class="st0">"info"</span><span class="sy0">,</span> <span class="st0">"example"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">//Make the reqeust:</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> request <span class="sy0">=</span> Y.<span class="me1">io</span><span class="br0">(</span>sUrl<span class="sy0">,</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> method<span class="sy0">:</span><span class="st0">"GET"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> on<span class="sy0">:</span></div></li><li class="li1"><div class="de1"> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> success<span class="sy0">:</span>successHandler<span class="sy0">,</span></div></li><li class="li1"><div class="de1"> failure<span class="sy0">:</span>failureHandler</div></li><li class="li2"><div class="de2"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"><span class="co1">//Use the Event Utility to wire the Get RSS button</span></div></li><li class="li1"><div class="de1"><span class="co1">//to the getModule function:</span></div></li><li class="li1"><div class="de1">Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">"click"</span><span class="sy0">,</span> getModule<span class="sy0">,</span> <span class="st0">"#getWeather"</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">//When the Get RSS button is clicked, this function will fire</span> |
|
|
223 |
<span class="co1">//and compose/dispatch the IO request:</span> |
|
|
224 |
<span class="kw2">function</span> getModule<span class="br0">(</span><span class="br0">)</span><span class="br0">{</span> |
|
|
225 |
<span class="co1">//Get the input value:</span> |
|
|
226 |
<span class="kw2">var</span> iZip <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'#zip'</span><span class="br0">)</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"value"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
227 |
|
|
|
228 |
<span class="co1">//Create a querystring from the input value:</span> |
|
|
229 |
<span class="kw2">var</span> queryString <span class="sy0">=</span> <span class="kw1">encodeURI</span><span class="br0">(</span><span class="st0">'?p='</span> <span class="sy0">+</span> iZip<span class="br0">)</span><span class="sy0">;</span> |
|
|
230 |
|
|
|
231 |
<span class="co1">//The location of our server-side proxy:</span> |
|
|
232 |
<span class="kw2">var</span> entryPoint <span class="sy0">=</span> <span class="st0">'(assets/)weather.php'</span><span class="sy0">;</span> |
|
|
233 |
|
|
|
234 |
<span class="co1">//Compile the full URI for the request:</span> |
|
|
235 |
<span class="kw2">var</span> sUrl <span class="sy0">=</span> entryPoint <span class="sy0">+</span> queryString<span class="sy0">;</span> |
|
|
236 |
|
|
|
237 |
Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"Submitting request; zip code: "</span> <span class="sy0">+</span> iZip<span class="sy0">,</span> <span class="st0">"info"</span><span class="sy0">,</span> <span class="st0">"example"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
238 |
|
|
|
239 |
<span class="co1">//Make the reqeust:</span> |
|
|
240 |
<span class="kw2">var</span> request <span class="sy0">=</span> Y.<span class="me1">io</span><span class="br0">(</span>sUrl<span class="sy0">,</span> <span class="br0">{</span> |
|
|
241 |
method<span class="sy0">:</span><span class="st0">"GET"</span><span class="sy0">,</span> |
|
|
242 |
on<span class="sy0">:</span> |
|
|
243 |
<span class="br0">{</span> |
|
|
244 |
success<span class="sy0">:</span>successHandler<span class="sy0">,</span> |
|
|
245 |
failure<span class="sy0">:</span>failureHandler |
|
|
246 |
<span class="br0">}</span> |
|
|
247 |
<span class="br0">}</span> |
|
|
248 |
<span class="br0">)</span><span class="sy0">;</span> |
|
|
249 |
<span class="br0">}</span> |
|
|
250 |
|
|
|
251 |
<span class="co1">//Use the Event Utility to wire the Get RSS button</span> |
|
|
252 |
<span class="co1">//to the getModule function:</span> |
|
|
253 |
Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">"click"</span><span class="sy0">,</span> getModule<span class="sy0">,</span> <span class="st0">"#getWeather"</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax3-plain">//When the Get RSS button is clicked, this function will fire |
|
|
254 |
//and compose/dispatch the IO request: |
|
|
255 |
function getModule(){ |
|
|
256 |
//Get the input value: |
|
|
257 |
var iZip = Y.Node.get('#zip').get("value"); |
|
|
258 |
|
|
|
259 |
//Create a querystring from the input value: |
|
|
260 |
var queryString = encodeURI('?p=' + iZip); |
|
|
261 |
|
|
|
262 |
//The location of our server-side proxy: |
|
|
263 |
var entryPoint = '(assets/)weather.php'; |
|
|
264 |
|
|
|
265 |
//Compile the full URI for the request: |
|
|
266 |
var sUrl = entryPoint + queryString; |
|
|
267 |
|
|
|
268 |
Y.log("Submitting request; zip code: " + iZip, "info", "example"); |
|
|
269 |
|
|
|
270 |
//Make the reqeust: |
|
|
271 |
var request = Y.io(sUrl, { |
|
|
272 |
method:"GET", |
|
|
273 |
on: |
|
|
274 |
{ |
|
|
275 |
success:successHandler, |
|
|
276 |
failure:failureHandler |
|
|
277 |
} |
|
|
278 |
} |
|
|
279 |
); |
|
|
280 |
} |
|
|
281 |
|
|
|
282 |
//Use the Event Utility to wire the Get RSS button |
|
|
283 |
//to the getModule function: |
|
|
284 |
Y.on("click", getModule, "#getWeather");</textarea></div> |
|
|
285 |
<h3>Full Script Source</h3> |
|
|
286 |
|
|
|
287 |
<p>Here is the full JavaScript source for this example:</p> |
|
|
288 |
|
|
|
289 |
<div id="syntax4" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">(</span><span class="br0">{</span>base<span class="sy0">:</span><span class="st0">"../../build/"</span><span class="sy0">,</span> timeout<span class="sy0">:</span> <span class="nu0">10000</span><span class="br0">}</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"io"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw2">function</span><span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="co1">//Get a Node reference to the div we'll use for displaying</span></div></li><li class="li1"><div class="de1"> <span class="co1">//results:</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> div <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'#weatherModule'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">//Define a function to handle a successful response from</span></div></li><li class="li2"><div class="de2"> <span class="co1">//Yahoo! Weather. The success handler will find the response</span></div></li><li class="li1"><div class="de1"> <span class="co1">//object in its second argument:</span></div></li><li class="li1"><div class="de1"> <span class="kw2">function</span> successHandler<span class="br0">(</span>id<span class="sy0">,</span> o<span class="br0">)</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"Success handler called; handler will parse the retrieved XML and insert into DOM."</span><span class="sy0">,</span> <span class="st0">"info"</span><span class="sy0">,</span> <span class="st0">"example"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> root <span class="sy0">=</span> o.<span class="me1">responseXML</span>.<span class="me1">documentElement</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="kw2">var</span> oTitle <span class="sy0">=</span> root.<span class="me1">getElementsByTagName</span><span class="br0">(</span><span class="st0">'description'</span><span class="br0">)</span><span class="br0">[</span><span class="nu0">0</span><span class="br0">]</span>.<span class="me1">firstChild</span>.<span class="me1">nodeValue</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> oDateTime <span class="sy0">=</span> root.<span class="me1">getElementsByTagName</span><span class="br0">(</span><span class="st0">'lastBuildDate'</span><span class="br0">)</span><span class="br0">[</span><span class="nu0">0</span><span class="br0">]</span>.<span class="me1">firstChild</span>.<span class="me1">nodeValue</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> descriptionNode <span class="sy0">=</span> root.<span class="me1">getElementsByTagName</span><span class="br0">(</span><span class="st0">'description'</span><span class="br0">)</span><span class="br0">[</span><span class="nu0">1</span><span class="br0">]</span>.<span class="me1">firstChild</span>.<span class="me1">nodeValue</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> div.<span class="me1">set</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="sy0">,</span> <span class="st0">"<p>"</span> <span class="sy0">+</span> oTitle <span class="sy0">+</span> <span class="st0">"</p>"</span> <span class="sy0">+</span> <span class="st0">"<p>"</span> <span class="sy0">+</span> oDateTime <span class="sy0">+</span> <span class="st0">"</p>"</span> <span class="sy0">+</span> descriptionNode<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"Success handler is complete."</span><span class="sy0">,</span> <span class="st0">"info"</span><span class="sy0">,</span> <span class="st0">"example"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">//Provide a function that can help debug failed</span></div></li><li class="li2"><div class="de2"> <span class="co1">//requests:</span></div></li><li class="li1"><div class="de1"> <span class="kw2">function</span> failureHandler<span class="br0">(</span>id<span class="sy0">,</span> o<span class="br0">)</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"Failure handler called; http status: "</span> <span class="sy0">+</span> o.<span class="kw3">status</span><span class="sy0">,</span> <span class="st0">"info"</span><span class="sy0">,</span> <span class="st0">"example"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> div.<span class="me1">set</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="sy0">,</span> o.<span class="kw3">status</span> <span class="sy0">+</span> <span class="st0">" "</span> <span class="sy0">+</span> o.<span class="me1">statusText</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="co1">//When the Get RSS button is clicked, this function will fire</span></div></li><li class="li1"><div class="de1"> <span class="co1">//and compose/dispatch the IO request:</span></div></li><li class="li1"><div class="de1"> <span class="kw2">function</span> getModule<span class="br0">(</span><span class="br0">)</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">//Get the input value:</span></div></li><li class="li2"><div class="de2"> <span class="kw2">var</span> iZip <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'#zip'</span><span class="br0">)</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"value"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">//Create a querystring from the input value:</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> queryString <span class="sy0">=</span> <span class="kw1">encodeURI</span><span class="br0">(</span><span class="st0">'?p='</span> <span class="sy0">+</span> iZip<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="co1">//The location of our server-side proxy:</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> entryPoint <span class="sy0">=</span> <span class="st0">'(assets/)weather.php'</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">//Compile the full URI for the request:</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> sUrl <span class="sy0">=</span> entryPoint <span class="sy0">+</span> queryString<span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"Submitting request; zip code: "</span> <span class="sy0">+</span> iZip<span class="sy0">,</span> <span class="st0">"info"</span><span class="sy0">,</span> <span class="st0">"example"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">//Make the reqeust:</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> request <span class="sy0">=</span> Y.<span class="me1">io</span><span class="br0">(</span>sUrl<span class="sy0">,</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> method<span class="sy0">:</span><span class="st0">"GET"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> on<span class="sy0">:</span></div></li><li class="li1"><div class="de1"> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> success<span class="sy0">:</span>successHandler<span class="sy0">,</span></div></li><li class="li1"><div class="de1"> failure<span class="sy0">:</span>failureHandler</div></li><li class="li2"><div class="de2"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="co1">//Use the Event Utility to wire the Get RSS button</span></div></li><li class="li1"><div class="de1"> <span class="co1">//to the getModule function:</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">"click"</span><span class="sy0">,</span> getModule<span class="sy0">,</span> <span class="st0">"#getWeather"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"When you retrieve weather RSS data, relevant steps in the process will be reported here in the logger/console."</span><span class="sy0">,</span> <span class="st0">"info"</span><span class="sy0">,</span> <span class="st0">"example"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">(</span><span class="br0">{</span>base<span class="sy0">:</span><span class="st0">"../../build/"</span><span class="sy0">,</span> timeout<span class="sy0">:</span> <span class="nu0">10000</span><span class="br0">}</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"io"</span><span class="sy0">,</span> |
|
|
290 |
|
|
|
291 |
<span class="kw2">function</span><span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span> |
|
|
292 |
|
|
|
293 |
<span class="co1">//Get a Node reference to the div we'll use for displaying</span> |
|
|
294 |
<span class="co1">//results:</span> |
|
|
295 |
<span class="kw2">var</span> div <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'#weatherModule'</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
296 |
|
|
|
297 |
<span class="co1">//Define a function to handle a successful response from</span> |
|
|
298 |
<span class="co1">//Yahoo! Weather. The success handler will find the response</span> |
|
|
299 |
<span class="co1">//object in its second argument:</span> |
|
|
300 |
<span class="kw2">function</span> successHandler<span class="br0">(</span>id<span class="sy0">,</span> o<span class="br0">)</span><span class="br0">{</span> |
|
|
301 |
Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"Success handler called; handler will parse the retrieved XML and insert into DOM."</span><span class="sy0">,</span> <span class="st0">"info"</span><span class="sy0">,</span> <span class="st0">"example"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
302 |
<span class="kw2">var</span> root <span class="sy0">=</span> o.<span class="me1">responseXML</span>.<span class="me1">documentElement</span><span class="sy0">;</span> |
|
|
303 |
<span class="kw2">var</span> oTitle <span class="sy0">=</span> root.<span class="me1">getElementsByTagName</span><span class="br0">(</span><span class="st0">'description'</span><span class="br0">)</span><span class="br0">[</span><span class="nu0">0</span><span class="br0">]</span>.<span class="me1">firstChild</span>.<span class="me1">nodeValue</span><span class="sy0">;</span> |
|
|
304 |
<span class="kw2">var</span> oDateTime <span class="sy0">=</span> root.<span class="me1">getElementsByTagName</span><span class="br0">(</span><span class="st0">'lastBuildDate'</span><span class="br0">)</span><span class="br0">[</span><span class="nu0">0</span><span class="br0">]</span>.<span class="me1">firstChild</span>.<span class="me1">nodeValue</span><span class="sy0">;</span> |
|
|
305 |
<span class="kw2">var</span> descriptionNode <span class="sy0">=</span> root.<span class="me1">getElementsByTagName</span><span class="br0">(</span><span class="st0">'description'</span><span class="br0">)</span><span class="br0">[</span><span class="nu0">1</span><span class="br0">]</span>.<span class="me1">firstChild</span>.<span class="me1">nodeValue</span><span class="sy0">;</span> |
|
|
306 |
|
|
|
307 |
div.<span class="me1">set</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="sy0">,</span> <span class="st0">"<p>"</span> <span class="sy0">+</span> oTitle <span class="sy0">+</span> <span class="st0">"</p>"</span> <span class="sy0">+</span> <span class="st0">"<p>"</span> <span class="sy0">+</span> oDateTime <span class="sy0">+</span> <span class="st0">"</p>"</span> <span class="sy0">+</span> descriptionNode<span class="br0">)</span><span class="sy0">;</span> |
|
|
308 |
|
|
|
309 |
Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"Success handler is complete."</span><span class="sy0">,</span> <span class="st0">"info"</span><span class="sy0">,</span> <span class="st0">"example"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
310 |
<span class="br0">}</span> |
|
|
311 |
|
|
|
312 |
<span class="co1">//Provide a function that can help debug failed</span> |
|
|
313 |
<span class="co1">//requests:</span> |
|
|
314 |
<span class="kw2">function</span> failureHandler<span class="br0">(</span>id<span class="sy0">,</span> o<span class="br0">)</span><span class="br0">{</span> |
|
|
315 |
Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"Failure handler called; http status: "</span> <span class="sy0">+</span> o.<span class="kw3">status</span><span class="sy0">,</span> <span class="st0">"info"</span><span class="sy0">,</span> <span class="st0">"example"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
316 |
div.<span class="me1">set</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="sy0">,</span> o.<span class="kw3">status</span> <span class="sy0">+</span> <span class="st0">" "</span> <span class="sy0">+</span> o.<span class="me1">statusText</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
317 |
<span class="br0">}</span> |
|
|
318 |
|
|
|
319 |
<span class="co1">//When the Get RSS button is clicked, this function will fire</span> |
|
|
320 |
<span class="co1">//and compose/dispatch the IO request:</span> |
|
|
321 |
<span class="kw2">function</span> getModule<span class="br0">(</span><span class="br0">)</span><span class="br0">{</span> |
|
|
322 |
<span class="co1">//Get the input value:</span> |
|
|
323 |
<span class="kw2">var</span> iZip <span class="sy0">=</span> Y.<span class="me1">Node</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">'#zip'</span><span class="br0">)</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"value"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
324 |
|
|
|
325 |
<span class="co1">//Create a querystring from the input value:</span> |
|
|
326 |
<span class="kw2">var</span> queryString <span class="sy0">=</span> <span class="kw1">encodeURI</span><span class="br0">(</span><span class="st0">'?p='</span> <span class="sy0">+</span> iZip<span class="br0">)</span><span class="sy0">;</span> |
|
|
327 |
|
|
|
328 |
<span class="co1">//The location of our server-side proxy:</span> |
|
|
329 |
<span class="kw2">var</span> entryPoint <span class="sy0">=</span> <span class="st0">'(assets/)weather.php'</span><span class="sy0">;</span> |
|
|
330 |
|
|
|
331 |
<span class="co1">//Compile the full URI for the request:</span> |
|
|
332 |
<span class="kw2">var</span> sUrl <span class="sy0">=</span> entryPoint <span class="sy0">+</span> queryString<span class="sy0">;</span> |
|
|
333 |
|
|
|
334 |
Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"Submitting request; zip code: "</span> <span class="sy0">+</span> iZip<span class="sy0">,</span> <span class="st0">"info"</span><span class="sy0">,</span> <span class="st0">"example"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
335 |
|
|
|
336 |
<span class="co1">//Make the reqeust:</span> |
|
|
337 |
<span class="kw2">var</span> request <span class="sy0">=</span> Y.<span class="me1">io</span><span class="br0">(</span>sUrl<span class="sy0">,</span> <span class="br0">{</span> |
|
|
338 |
method<span class="sy0">:</span><span class="st0">"GET"</span><span class="sy0">,</span> |
|
|
339 |
on<span class="sy0">:</span> |
|
|
340 |
<span class="br0">{</span> |
|
|
341 |
success<span class="sy0">:</span>successHandler<span class="sy0">,</span> |
|
|
342 |
failure<span class="sy0">:</span>failureHandler |
|
|
343 |
<span class="br0">}</span> |
|
|
344 |
<span class="br0">}</span> |
|
|
345 |
<span class="br0">)</span><span class="sy0">;</span> |
|
|
346 |
<span class="br0">}</span> |
|
|
347 |
|
|
|
348 |
<span class="co1">//Use the Event Utility to wire the Get RSS button</span> |
|
|
349 |
<span class="co1">//to the getModule function:</span> |
|
|
350 |
Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">"click"</span><span class="sy0">,</span> getModule<span class="sy0">,</span> <span class="st0">"#getWeather"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
351 |
|
|
|
352 |
Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"When you retrieve weather RSS data, relevant steps in the process will be reported here in the logger/console."</span><span class="sy0">,</span> <span class="st0">"info"</span><span class="sy0">,</span> <span class="st0">"example"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
353 |
<span class="br0">}</span> |
|
|
354 |
<span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax4-plain">YUI({base:"../../build/", timeout: 10000}).use("io", |
|
|
355 |
|
|
|
356 |
function(Y) { |
|
|
357 |
|
|
|
358 |
//Get a Node reference to the div we'll use for displaying |
|
|
359 |
//results: |
|
|
360 |
var div = Y.Node.get('#weatherModule'); |
|
|
361 |
|
|
|
362 |
//Define a function to handle a successful response from |
|
|
363 |
//Yahoo! Weather. The success handler will find the response |
|
|
364 |
//object in its second argument: |
|
|
365 |
function successHandler(id, o){ |
|
|
366 |
Y.log("Success handler called; handler will parse the retrieved XML and insert into DOM.", "info", "example"); |
|
|
367 |
var root = o.responseXML.documentElement; |
|
|
368 |
var oTitle = root.getElementsByTagName('description')[0].firstChild.nodeValue; |
|
|
369 |
var oDateTime = root.getElementsByTagName('lastBuildDate')[0].firstChild.nodeValue; |
|
|
370 |
var descriptionNode = root.getElementsByTagName('description')[1].firstChild.nodeValue; |
|
|
371 |
|
|
|
372 |
div.set("innerHTML", "<p>" + oTitle + "</p>" + "<p>" + oDateTime + "</p>" + descriptionNode); |
|
|
373 |
|
|
|
374 |
Y.log("Success handler is complete.", "info", "example"); |
|
|
375 |
} |
|
|
376 |
|
|
|
377 |
//Provide a function that can help debug failed |
|
|
378 |
//requests: |
|
|
379 |
function failureHandler(id, o){ |
|
|
380 |
Y.log("Failure handler called; http status: " + o.status, "info", "example"); |
|
|
381 |
div.set("innerHTML", o.status + " " + o.statusText); |
|
|
382 |
} |
|
|
383 |
|
|
|
384 |
//When the Get RSS button is clicked, this function will fire |
|
|
385 |
//and compose/dispatch the IO request: |
|
|
386 |
function getModule(){ |
|
|
387 |
//Get the input value: |
|
|
388 |
var iZip = Y.Node.get('#zip').get("value"); |
|
|
389 |
|
|
|
390 |
//Create a querystring from the input value: |
|
|
391 |
var queryString = encodeURI('?p=' + iZip); |
|
|
392 |
|
|
|
393 |
//The location of our server-side proxy: |
|
|
394 |
var entryPoint = '(assets/)weather.php'; |
|
|
395 |
|
|
|
396 |
//Compile the full URI for the request: |
|
|
397 |
var sUrl = entryPoint + queryString; |
|
|
398 |
|
|
|
399 |
Y.log("Submitting request; zip code: " + iZip, "info", "example"); |
|
|
400 |
|
|
|
401 |
//Make the reqeust: |
|
|
402 |
var request = Y.io(sUrl, { |
|
|
403 |
method:"GET", |
|
|
404 |
on: |
|
|
405 |
{ |
|
|
406 |
success:successHandler, |
|
|
407 |
failure:failureHandler |
|
|
408 |
} |
|
|
409 |
} |
|
|
410 |
); |
|
|
411 |
} |
|
|
412 |
|
|
|
413 |
//Use the Event Utility to wire the Get RSS button |
|
|
414 |
//to the getModule function: |
|
|
415 |
Y.on("click", getModule, "#getWeather"); |
|
|
416 |
|
|
|
417 |
Y.log("When you retrieve weather RSS data, relevant steps in the process will be reported here in the logger/console.", "info", "example"); |
|
|
418 |
} |
|
|
419 |
);</textarea></div> |
|
|
420 |
<h3>Proxy and Response</h3> |
|
|
421 |
<p> |
|
|
422 |
Once <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. |
|
|
423 |
</p> |
|
|
424 |
|
|
|
425 |
<div id="syntax5" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">//Within a PHP block:</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="co1">// Since the result is an XML document, the Content-type</span></div></li><li class="li1"><div class="de1"><span class="co1">// header must be set to "text/xml" for the data to be</span></div></li><li class="li2"><div class="de2"><span class="co1">// treated as XML and to populate responseXML.</span></div></li><li class="li1"><div class="de1">header<span class="br0">(</span><span class="st0">"Content-Type:text/xml"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="co1">// io-weather_clean.html is the resource path of the Y! Weather RSS</span></div></li><li class="li1"><div class="de1"><span class="co1">// with the appended querystring of zip code/location id.</span></div></li><li class="li2"><div class="de2">$url <span class="sy0">=</span> <span class="st0">'http://xml.weather.yahoo.com/forecastrss?'</span>.<span class="me1">getenv</span><span class="br0">(</span><span class="st0">'QUERY_STRING'</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="co1">// This function initializes CURL, sets the necessary CURL</span></div></li><li class="li1"><div class="de1"><span class="co1">// options, executes the request and returns the results.</span></div></li><li class="li1"><div class="de1"><span class="kw2">function</span> getResource<span class="br0">(</span>io<span class="sy0">-</span>weather_clean.<span class="me1">html</span><span class="br0">)</span><span class="br0">{</span></div></li><li class="li2"><div class="de2"> $ch <span class="sy0">=</span> curl_init<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> curl_setopt<span class="br0">(</span>$ch<span class="sy0">,</span> CURLOPT_URL<span class="sy0">,</span> $url<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> curl_setopt<span class="br0">(</span>$ch<span class="sy0">,</span> CURLOPT_RETURNTRANSFER<span class="sy0">,</span> <span class="nu0">1</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> $result <span class="sy0">=</span> curl_exec<span class="br0">(</span>$ch<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> curl_close<span class="br0">(</span>$ch<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="kw1">return</span> $result<span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="co1">// Call getResource to make the request.</span></div></li><li class="li2"><div class="de2">$feed <span class="sy0">=</span> getResource<span class="br0">(</span>$url<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="co1">// Return the results.</span></div></li><li class="li1"><div class="de1">echo $feed<span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">//Within a PHP block:</span> |
|
|
426 |
|
|
|
427 |
<span class="co1">// Since the result is an XML document, the Content-type</span> |
|
|
428 |
<span class="co1">// header must be set to "text/xml" for the data to be</span> |
|
|
429 |
<span class="co1">// treated as XML and to populate responseXML.</span> |
|
|
430 |
header<span class="br0">(</span><span class="st0">"Content-Type:text/xml"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
431 |
|
|
|
432 |
<span class="co1">// io-weather_clean.html is the resource path of the Y! Weather RSS</span> |
|
|
433 |
<span class="co1">// with the appended querystring of zip code/location id.</span> |
|
|
434 |
$url <span class="sy0">=</span> <span class="st0">'http://xml.weather.yahoo.com/forecastrss?'</span>.<span class="me1">getenv</span><span class="br0">(</span><span class="st0">'QUERY_STRING'</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
435 |
|
|
|
436 |
<span class="co1">// This function initializes CURL, sets the necessary CURL</span> |
|
|
437 |
<span class="co1">// options, executes the request and returns the results.</span> |
|
|
438 |
<span class="kw2">function</span> getResource<span class="br0">(</span>io<span class="sy0">-</span>weather_clean.<span class="me1">html</span><span class="br0">)</span><span class="br0">{</span> |
|
|
439 |
$ch <span class="sy0">=</span> curl_init<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
440 |
curl_setopt<span class="br0">(</span>$ch<span class="sy0">,</span> CURLOPT_URL<span class="sy0">,</span> $url<span class="br0">)</span><span class="sy0">;</span> |
|
|
441 |
curl_setopt<span class="br0">(</span>$ch<span class="sy0">,</span> CURLOPT_RETURNTRANSFER<span class="sy0">,</span> <span class="nu0">1</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
442 |
$result <span class="sy0">=</span> curl_exec<span class="br0">(</span>$ch<span class="br0">)</span><span class="sy0">;</span> |
|
|
443 |
curl_close<span class="br0">(</span>$ch<span class="br0">)</span><span class="sy0">;</span> |
|
|
444 |
|
|
|
445 |
<span class="kw1">return</span> $result<span class="sy0">;</span> |
|
|
446 |
<span class="br0">}</span> |
|
|
447 |
|
|
|
448 |
<span class="co1">// Call getResource to make the request.</span> |
|
|
449 |
$feed <span class="sy0">=</span> getResource<span class="br0">(</span>$url<span class="br0">)</span><span class="sy0">;</span> |
|
|
450 |
|
|
|
451 |
<span class="co1">// Return the results.</span> |
|
|
452 |
echo $feed<span class="sy0">;</span></pre></div><textarea id="syntax5-plain">//Within a PHP block: |
|
|
453 |
|
|
|
454 |
// Since the result is an XML document, the Content-type |
|
|
455 |
// header must be set to "text/xml" for the data to be |
|
|
456 |
// treated as XML and to populate responseXML. |
|
|
457 |
header("Content-Type:text/xml"); |
|
|
458 |
|
|
|
459 |
// io-weather_clean.html is the resource path of the Y! Weather RSS |
|
|
460 |
// with the appended querystring of zip code/location id. |
|
|
461 |
$url = 'http://xml.weather.yahoo.com/forecastrss?'.getenv('QUERY_STRING'); |
|
|
462 |
|
|
|
463 |
// This function initializes CURL, sets the necessary CURL |
|
|
464 |
// options, executes the request and returns the results. |
|
|
465 |
function getResource(io-weather_clean.html){ |
|
|
466 |
$ch = curl_init(); |
|
|
467 |
curl_setopt($ch, CURLOPT_URL, $url); |
|
|
468 |
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); |
|
|
469 |
$result = curl_exec($ch); |
|
|
470 |
curl_close($ch); |
|
|
471 |
|
|
|
472 |
return $result; |
|
|
473 |
} |
|
|
474 |
|
|
|
475 |
// Call getResource to make the request. |
|
|
476 |
$feed = getResource($url); |
|
|
477 |
|
|
|
478 |
// Return the results. |
|
|
479 |
echo $feed;</textarea></div> </div> |
|
|
480 |
<div class="yui-u sidebar"> |
|
|
481 |
|
|
|
482 |
|
|
|
483 |
<div id="examples" class="mod box4"> |
|
|
484 |
<div class="hd"> |
|
|
485 |
<h4> |
|
|
486 |
IO Examples:</h4> |
|
|
487 |
</div> |
|
|
488 |
<div class="bd"> |
|
|
489 |
<ul> |
|
|
490 |
<li><a href='../io/io-get.html'>GET Transaction</a></li><li><a href='../io/io-post.html'>POST Transaction</a></li><li class='selected'><a href='../io/io-weather.html'>XML Transaction — 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 — Retrieving a News Feed from Yahoo! Pipes</a></li><li><a href='../node-menunav/node-menunav-8.html'>Adding Submenus On The Fly (included with examples for MenuNav Node Plugin)</a></li><li><a href='../overlay/overlay-io-plugin.html'>IO Plugin (included with examples for Overlay)</a></li><li><a href='../dd/portal-drag.html'>Portal Style Example (included with examples for Drag & Drop)</a></li> </ul> |
|
|
491 |
</div> |
|
|
492 |
</div> |
|
|
493 |
|
|
|
494 |
<div class="mod box4"> |
|
|
495 |
<div class="hd"> |
|
|
496 |
<h4>More IO Resources:</h4> |
|
|
497 |
</div> |
|
|
498 |
<div class="bd"> |
|
|
499 |
<ul> |
|
|
500 |
<!-- <li><a href="http://developer.yahoo.com/yui/io/">User's Guide</a> (external)</li> --> |
|
|
501 |
<li><a href="../../api/module_io.html">API Documentation</a></li></ul> |
|
|
502 |
</div> |
|
|
503 |
</div> |
|
|
504 |
</div> |
|
|
505 |
</div> |
|
|
506 |
|
|
|
507 |
</div> |
|
|
508 |
</div> |
|
|
509 |
|
|
|
510 |
|
|
|
511 |
<div class="yui-b toc3" id="tocWrapper"> |
|
|
512 |
<!-- TABLE OF CONTENTS --> |
|
|
513 |
<div id="toc"> |
|
|
514 |
|
|
|
515 |
<ul> |
|
|
516 |
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</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="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</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="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget <img src='http://l.yimg.com/a/i/not/beta_1.gif'></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="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Browser History - Functional Examples" href="../../examples/history/index.html">Browser History</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag & Drop - Functional Examples" href="../../examples/dd/index.html">Drag & Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</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="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></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 Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</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="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></ul> |
|
|
517 |
</div> |
|
|
518 |
</div> |
|
|
519 |
</div><!--closes bd--> |
|
|
520 |
|
|
|
521 |
<div id="ft"> |
|
|
522 |
<p class="first">Copyright © 2009 Yahoo! Inc. All rights reserved.</p> |
|
|
523 |
<p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - |
|
|
524 |
<a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - |
|
|
525 |
<a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - |
|
|
526 |
<a href="http://careers.yahoo.com/">Job Openings</a></p> |
|
|
527 |
</div> |
|
|
528 |
</div> |
|
|
529 |
<script language="javascript"> |
|
|
530 |
var yuiConfig = {base:"../../build/", timeout: 10000}; |
|
|
531 |
</script> |
|
|
532 |
<script src="../../assets/syntax.js"></script> |
|
|
533 |
<script src="../../assets/dpSyntaxHighlighter.js"></script> |
|
|
534 |
<script language="javascript"> |
|
|
535 |
dp.SyntaxHighlighter.HighlightAll('code'); |
|
|
536 |
</script> |
|
|
537 |
</body> |
|
|
538 |
</html> |