|
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: Get: Getting a Script Node with JSON Data</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 |
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" /> |
|
|
18 |
<script type="text/javascript" src="../../build/yui/yui-debug.js"></script> |
|
|
19 |
<style type="text/css"> |
|
|
20 |
#container ol { |
|
|
21 |
/*bringing lists on to the page with breathing room */ |
|
|
22 |
margin-left:2em !important; |
|
|
23 |
} |
|
|
24 |
|
|
|
25 |
#container ol li { |
|
|
26 |
/*giving OL's LIs generated numbers*/ |
|
|
27 |
list-style: decimal outside !important; |
|
|
28 |
} |
|
|
29 |
|
|
|
30 |
#container h3 { |
|
|
31 |
margin-top: 1em; |
|
|
32 |
} |
|
|
33 |
</style> |
|
|
34 |
</head> |
|
|
35 |
<body id="yahoo-com" class=" yui-skin-sam"> |
|
|
36 |
<div id="custom-doc" class="yui-t2"> |
|
|
37 |
<div id="hd"> |
|
|
38 |
<div id="ygunav"> |
|
|
39 |
<p> |
|
|
40 |
<em> |
|
|
41 |
<a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i> |
|
|
42 |
</em> |
|
|
43 |
</p> |
|
|
44 |
<form action="http://search.yahoo.com/search" id="sitesearchform"> |
|
|
45 |
<input name="vs" type="hidden" value="developer.yahoo.com"> |
|
|
46 |
<input name="vs" type="hidden" value="yuiblog.com"> |
|
|
47 |
<div id="sitesearch"> |
|
|
48 |
<label for="searchinput">Site Search (YDN & YUIBlog): </label> |
|
|
49 |
<input type="text" id="searchinput" name="p"> |
|
|
50 |
<input type="submit" value="Search" id="searchsubmit" class="ygbt"> |
|
|
51 |
</div> |
|
|
52 |
</form> |
|
|
53 |
</div> |
|
|
54 |
<div id="ygma"><a href="../../"><img src="../../assets/logo.gif" border="0" width="200" height="93"></a></div> |
|
|
55 |
<div id="pagetitle"><h1>YUI Library Examples: Get: Getting a Script Node with JSON Data</h1></div> |
|
|
56 |
</div> |
|
|
57 |
<div id="bd"> |
|
|
58 |
|
|
|
59 |
|
|
|
60 |
<div id="yui-main"> |
|
|
61 |
<div class="yui-b"> |
|
|
62 |
<div class="yui-ge"> |
|
|
63 |
<div class="yui-u first example" id="main"> |
|
|
64 |
|
|
|
65 |
<h2>Get: Getting a Script Node with JSON Data</h2> |
|
|
66 |
|
|
|
67 |
<div id="example" class="promo"> |
|
|
68 |
<div class="example-intro"> |
|
|
69 |
<p>This example employs the <a href="http://developer.yahoo.com/yui/3/get/">YUI |
|
|
70 |
Get Utility</a> in a simple use case: retrieving JSON data from a cross-domain |
|
|
71 |
web service. While this is a relatively common usage, it's important to |
|
|
72 |
understand the security ramifications of this technique. Scripts loaded via the |
|
|
73 |
Get Utility (or any other "script node" solution) execute immediately |
|
|
74 |
once they are loaded. If you do not fully control (or fully trust) the script's |
|
|
75 |
source, this is not a safe technique and it can put the security of your users' |
|
|
76 |
data at risk. (For more information on the dangers of cross-site scripting |
|
|
77 |
[XSS] exploits, <a |
|
|
78 |
href="http://en.wikipedia.org/wiki/Cross-site_scripting">check out the |
|
|
79 |
Wikipedia entry on this subject</a>.)</p> <p>Here, we will use a trusted Yahoo! |
|
|
80 |
Search web service called <a |
|
|
81 |
href="http://developer.yahoo.com/search/siteexplorer/V1/inlinkData.html">Site |
|
|
82 |
Explorer</a> to return a list of inbound links for a given URL. The principal |
|
|
83 |
difference between this example and similar examples using <a |
|
|
84 |
href="http://developer.yahoo.com/yui/3/io/">YUI IO Utility</a> is |
|
|
85 |
that this technique does not require a server-side proxy. The browser connects |
|
|
86 |
directly to the third-party web service without bouncing through a proxy page |
|
|
87 |
as is required when using the XMLHttpRequest object (on which IO Utility |
|
|
88 |
relies).</p> |
|
|
89 |
</div> |
|
|
90 |
|
|
|
91 |
<div class="module example-container "> |
|
|
92 |
<div class="hd exampleHd"> |
|
|
93 |
<p class="newWindowButton yui-skin-sam"> |
|
|
94 |
<a href="get-script-basic_clean.html" target="_blank">View example in new window.</a> |
|
|
95 |
</p> |
|
|
96 |
</div> <div id="example-canvas" class="bd"> |
|
|
97 |
|
|
|
98 |
|
|
|
99 |
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== --> |
|
|
100 |
|
|
|
101 |
<div id="container"> |
|
|
102 |
|
|
|
103 |
<!--Use a real form that works without JavaScript:--> |
|
|
104 |
<form method="GET" action="http://siteexplorer.search.yahoo.com/advsearch" id="siteExplorer"> |
|
|
105 |
|
|
|
106 |
<label for="searchString">Site URL:</label> <input type="text" name="p" id="searchString" value="http://developer.yahoo.com/yui" size="40"> |
|
|
107 |
|
|
|
108 |
<input type="hidden" name="bwm" value="i"> |
|
|
109 |
<input type="hidden" name="bwms" value="p"> |
|
|
110 |
|
|
|
111 |
<input type="submit" id="siteExplorerData" value="Click here to get JSON data."> |
|
|
112 |
|
|
|
113 |
</form> |
|
|
114 |
|
|
|
115 |
<div id="results"> |
|
|
116 |
<!--JSON output will be written to the DOM here--> |
|
|
117 |
|
|
|
118 |
</div> |
|
|
119 |
</div> |
|
|
120 |
|
|
|
121 |
<script type="text/javascript"> |
|
|
122 |
|
|
|
123 |
YUI({base:"../../build/", timeout: 10000, filter:"debug", logInclude: {get:true, event:true, example:true}}).use("node", "dump", |
|
|
124 |
|
|
|
125 |
function(Y) { |
|
|
126 |
|
|
|
127 |
// We are going to create a global variable to get the |
|
|
128 |
// data back from the web service |
|
|
129 |
MyNamespace = YUI.namespace('example.SiteExplorer'); |
|
|
130 |
|
|
|
131 |
var elResults = Y.one("#results"), |
|
|
132 |
tIds = {}, |
|
|
133 |
loading = false, |
|
|
134 |
current = null; |
|
|
135 |
|
|
|
136 |
// We use the Get Utility's success handler in conjunction with |
|
|
137 |
// the web service callback in order to detect bad responses |
|
|
138 |
// from the web service. |
|
|
139 |
var onSiteExplorerSuccess = function(o) { |
|
|
140 |
|
|
|
141 |
// stop blocking requests |
|
|
142 |
loading = false; |
|
|
143 |
|
|
|
144 |
// A success response means the script node is inserted. However, the |
|
|
145 |
// utility is unable to detect whether or not the content of the script |
|
|
146 |
// node is correct, or even if there was a bad response (like a 404 |
|
|
147 |
// error). To get around this, we use the web service callback to |
|
|
148 |
// verify that the script contents was correct. |
|
|
149 |
if (o.tId in tIds) { |
|
|
150 |
Y.log("The Get Utility has fired the success handler indicating that the " + |
|
|
151 |
"requested script has loaded and is ready for use.", "info", "example"); |
|
|
152 |
} else { |
|
|
153 |
Y.log("The Get utility has fired onSuccess but the webservice callback did not " + |
|
|
154 |
"fire. We could retry the transaction here, or notify the user of the " + |
|
|
155 |
"failure.", "info", "example"); |
|
|
156 |
} |
|
|
157 |
|
|
|
158 |
}; |
|
|
159 |
|
|
|
160 |
var onSiteExplorerFailure = function(o) { |
|
|
161 |
Y.log("The Get Utility failed.", "info", "example"); |
|
|
162 |
}; |
|
|
163 |
|
|
|
164 |
var onSiteExplorerTimeout = function(o) { |
|
|
165 |
Y.log("The Get Utility timed out.", "info", "example"); |
|
|
166 |
}; |
|
|
167 |
|
|
|
168 |
//function to retrieve data from Yahoo! Site Explorer web service -- |
|
|
169 |
// http://developer.yahoo.com/search/siteexplorer/V1/inlinkData.html |
|
|
170 |
var getSiteExplorerData = function() { |
|
|
171 |
Y.log("Button clicked; getSiteExplorerData firing.", "info", "example"); |
|
|
172 |
|
|
|
173 |
// block multiple requests |
|
|
174 |
if (loading) { |
|
|
175 |
return; |
|
|
176 |
} |
|
|
177 |
loading = true; |
|
|
178 |
|
|
|
179 |
//Load the transitional state of the results section: |
|
|
180 |
elResults.set("innerHTML", "<h3>Retrieving incoming links for " + |
|
|
181 |
Y.one("#searchString").get('value') + ":</h3>" + |
|
|
182 |
"<img src='http://l.yimg.com/a/i/nt/ic/ut/bsc/busybar_1.gif' " + |
|
|
183 |
"alt='Please wait...'>"); |
|
|
184 |
|
|
|
185 |
//prepare the URL for the Yahoo Site Explorer API: |
|
|
186 |
var sURL = "http://search.yahooapis.com/SiteExplorerService/V1/inlinkData?" + |
|
|
187 |
"appid=3wEDxLHV34HvAU2lMnI51S4Qra5m.baugqoSv4gcRllqqVZm3UrMDZWToMivf5BJ3Mom" + |
|
|
188 |
"&results=20&output=json&omit_inlinks=domain" + |
|
|
189 |
"&callback=MyNamespace.callback" + |
|
|
190 |
"&query=" + encodeURIComponent(Y.one("#searchString").get('value')); |
|
|
191 |
|
|
|
192 |
//This simple line is the call to the Get Utility; we pass |
|
|
193 |
//in the URL and the configuration object, which in this case |
|
|
194 |
//consists merely of our success and failure callbacks: |
|
|
195 |
var transactionObj = Y.Get.script(sURL, { |
|
|
196 |
onSuccess: onSiteExplorerSuccess, |
|
|
197 |
onFailure: onSiteExplorerFailure, |
|
|
198 |
onTimeout: onSiteExplorerTimeout, |
|
|
199 |
timeout: 20000, |
|
|
200 |
context: Y |
|
|
201 |
}); |
|
|
202 |
|
|
|
203 |
//The script method returns a single-field object containing the |
|
|
204 |
//tranaction id: |
|
|
205 |
Y.log("Get Utility transaction started; transaction object: " + Y.dump(transactionObj), "info", "example"); |
|
|
206 |
|
|
|
207 |
// keep track of the current transaction id. The transaction will be |
|
|
208 |
// considered complete only if the web service callback is executed. |
|
|
209 |
current = transactionObj.tId; |
|
|
210 |
}; |
|
|
211 |
|
|
|
212 |
MyNamespace.callback = function(results) { |
|
|
213 |
Y.log("Web service returned data to Y.example.SiteExplorer.callback; beginning to process.", "info", "example"); |
|
|
214 |
|
|
|
215 |
// Mark the transaction as complete. This will be checked by the onSuccess |
|
|
216 |
// handler to determine if the transaction really succeeded. |
|
|
217 |
tIds[current] = true; |
|
|
218 |
|
|
|
219 |
//work with the returned data to extract meaningful fields: |
|
|
220 |
var aResults = results.ResultSet.Result; |
|
|
221 |
var totalLinks = results.ResultSet.totalResultsAvailable; |
|
|
222 |
var returnedLinkCount = results.ResultSet.totalResultsReturned; |
|
|
223 |
|
|
|
224 |
if(aResults) {//there are inbound links; process and display them: |
|
|
225 |
|
|
|
226 |
//write header and open list of inbound links: |
|
|
227 |
var html = "<h3>There are " + |
|
|
228 |
totalLinks + |
|
|
229 |
" inbound links for this page; here are the first " + |
|
|
230 |
returnedLinkCount + |
|
|
231 |
":</h3><ol>"; |
|
|
232 |
|
|
|
233 |
//process list of inbound links: |
|
|
234 |
for (var i=0; i < aResults.length; i++) { |
|
|
235 |
html += "<li><strong>" + |
|
|
236 |
aResults[i].Title + |
|
|
237 |
":</strong> <a href='" + |
|
|
238 |
aResults[i].Url + |
|
|
239 |
"'>" + aResults[i].Url + |
|
|
240 |
"</a></li>"; |
|
|
241 |
} |
|
|
242 |
|
|
|
243 |
//close list of inbound links |
|
|
244 |
html += "</ol>"; |
|
|
245 |
|
|
|
246 |
} else {//no inbound links exist for this page: |
|
|
247 |
|
|
|
248 |
var html = "<h3>There are no inbound links for the page specified.</h3>"; |
|
|
249 |
|
|
|
250 |
} |
|
|
251 |
|
|
|
252 |
//insert string into DOM: |
|
|
253 |
elResults.set('innerHTML', html); |
|
|
254 |
}; |
|
|
255 |
|
|
|
256 |
//suppress default form behavior |
|
|
257 |
Y.on("submit", function(e) { |
|
|
258 |
e.preventDefault(); |
|
|
259 |
getSiteExplorerData(); |
|
|
260 |
}, "#siteExplorer"); |
|
|
261 |
|
|
|
262 |
}); |
|
|
263 |
|
|
|
264 |
</script> |
|
|
265 |
|
|
|
266 |
<!--END SOURCE CODE FOR EXAMPLE =============================== --> |
|
|
267 |
|
|
|
268 |
|
|
|
269 |
</div> |
|
|
270 |
</div> |
|
|
271 |
</div> |
|
|
272 |
|
|
|
273 |
<h2 class="first">Using the Get Utility to Get a Script File with JSON-formatted Contents</h2> |
|
|
274 |
|
|
|
275 |
<p>Here, we'll use <a href="http://developer.yahoo.com/yui/3/get/">the YUI Get Utility</a> to retrieve data via the <a href="http://developer.yahoo.com/search/siteexplorer/V1/inlinkData.html">Yahoo! Search Site-Explorer web service</a>, one of many Yahoo! APIs that support JSON.</p> |
|
|
276 |
|
|
|
277 |
<p>First, we create a plain HTML form that will work for users who do not have JavaScript enabled:</p> |
|
|
278 |
|
|
|
279 |
<div id="syntax1" class="yui-syntax-highlight"><div class="numbers"><pre class="html4strict" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"container"</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc-1"><!-- Use a real form that works without JavaScript: --></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">form</span> <span class="kw3">method</span><span class="sy0">=</span><span class="st0">"GET"</span> <span class="kw3">action</span><span class="sy0">=</span><span class="st0">"http://siteexplorer.search.yahoo.com/advsearch"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"siteExplorer"</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">label</span> <span class="kw3">for</span><span class="sy0">=</span><span class="st0">"searchString"</span>></span>Site URL:<span class="sc2"><<span class="sy0">/</span><span class="kw2">label</span>></span></div></li><li class="li2"><div class="de2"> <span class="sc2"><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"text"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"searchString"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"p"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"http://developer.yahoo.com/yui"</span> <span class="kw3">size</span><span class="sy0">=</span><span class="st0">"40"</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"hidden"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"bwm"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"i"</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"hidden"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"bwms"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"p"</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"submit"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"siteExplorerButton"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"Click here to get JSON data."</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">form</span>></span></div></li><li class="li2"><div class="de2"> <span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"results"</span>></span></div></li><li class="li1"><div class="de1"> <span class="sc-1"><!--JSON output will be written to the DOM here--></span></div></li><li class="li1"><div class="de1"> <span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li><li class="li1"><div class="de1"><span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></li></ol></pre></div><div class="nonumbers"><pre class="html4strict" style="font-family:monospace;"><span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"container"</span>></span> |
|
|
280 |
<span class="sc-1"><!-- Use a real form that works without JavaScript: --></span> |
|
|
281 |
<span class="sc2"><<span class="kw2">form</span> <span class="kw3">method</span><span class="sy0">=</span><span class="st0">"GET"</span> <span class="kw3">action</span><span class="sy0">=</span><span class="st0">"http://siteexplorer.search.yahoo.com/advsearch"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"siteExplorer"</span>></span> |
|
|
282 |
<span class="sc2"><<span class="kw2">label</span> <span class="kw3">for</span><span class="sy0">=</span><span class="st0">"searchString"</span>></span>Site URL:<span class="sc2"><<span class="sy0">/</span><span class="kw2">label</span>></span> |
|
|
283 |
<span class="sc2"><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"text"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"searchString"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"p"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"http://developer.yahoo.com/yui"</span> <span class="kw3">size</span><span class="sy0">=</span><span class="st0">"40"</span>></span> |
|
|
284 |
<span class="sc2"><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"hidden"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"bwm"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"i"</span>></span> |
|
|
285 |
<span class="sc2"><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"hidden"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"bwms"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"p"</span>></span> |
|
|
286 |
<span class="sc2"><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"submit"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"siteExplorerButton"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"Click here to get JSON data."</span>></span> |
|
|
287 |
<span class="sc2"><<span class="sy0">/</span><span class="kw2">form</span>></span> |
|
|
288 |
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"results"</span>></span> |
|
|
289 |
<span class="sc-1"><!--JSON output will be written to the DOM here--></span> |
|
|
290 |
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span> |
|
|
291 |
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></pre></div><textarea id="syntax1-plain"><div id="container"> |
|
|
292 |
<!-- Use a real form that works without JavaScript: --> |
|
|
293 |
<form method="GET" action="http://siteexplorer.search.yahoo.com/advsearch" id="siteExplorer"> |
|
|
294 |
<label for="searchString">Site URL:</label> |
|
|
295 |
<input type="text" name="searchString" id="p" value="http://developer.yahoo.com/yui" size="40"> |
|
|
296 |
<input type="hidden" name="bwm" value="i"> |
|
|
297 |
<input type="hidden" name="bwms" value="p"> |
|
|
298 |
<input type="submit" id="siteExplorerButton" value="Click here to get JSON data."> |
|
|
299 |
</form> |
|
|
300 |
<div id="results"> |
|
|
301 |
<!--JSON output will be written to the DOM here--> |
|
|
302 |
</div> |
|
|
303 |
</div></textarea></div> |
|
|
304 |
<p>With this in place, we can progressively enhance the form to create an in-page interaction for users with JavaScript turned on.</p> |
|
|
305 |
|
|
|
306 |
<p>The most important JavaScript piece here is the method that we fire on form submission. This method triggers our call to the Get Utility. This method, called <code>getSiteExplorerData</code>, accomplishes four things:</p> |
|
|
307 |
<ol> |
|
|
308 |
<li>It loads a transitional state for the display, alerting the user to the fact that data is being retrieved as a result of her action;</li> |
|
|
309 |
<li>It prepares the URL that will be passed to the Get Utility;</li> |
|
|
310 |
<li>It calls the Get Utility, passing in the URL of the script resource to load (in this case, the URL of our web service with the relevant paramaters assembled in the querystring);</li> |
|
|
311 |
<li>It specifies the callback and the context in which the callback should |
|
|
312 |
run. Note that in this example the web service itself provides callback |
|
|
313 |
functionality, allowing us to pass a globally accessible callback function |
|
|
314 |
name as one of the parameters of the REST API; you can see this reference |
|
|
315 |
below. As a result, we're making direct use of the intrinsic web service |
|
|
316 |
callback in this example and just stubbing out the built-in Get Utility |
|
|
317 |
callback for the sake of illustration.</li> </ol> <p> |
|
|
318 |
|
|
|
319 |
<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">//function to retrieve data from Yahoo! Site Explorer web service --</span></div></li><li class="li1"><div class="de1"><span class="co1">// http://developer.yahoo.com/search/siteexplorer/V1/inlinkData.html</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="kw2">var</span> getSiteExplorerData <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span><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">"Button clicked; getSiteExplorerData firing."</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></li><li class="li1"><div class="de1"> <span class="co1">// block multiple requests</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>loading<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">return</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"> loading <span class="sy0">=</span> <span class="kw2">true</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">//Load the transitional state of the results section:</span></div></li><li class="li1"><div class="de1"> elResults.<span class="me1">set</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="sy0">,</span> <span class="st0">"<h3>Retrieving incoming links for "</span> <span class="sy0">+</span></div></li><li class="li2"><div class="de2"> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#searchString"</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> <span class="st0">":</h3>"</span> <span class="sy0">+</span></div></li><li class="li1"><div class="de1"> <span class="st0">"<img src='http://l.yimg.com/a/i/nt/ic/ut/bsc/busybar_1.gif' "</span> <span class="sy0">+</span></div></li><li class="li1"><div class="de1"> <span class="st0">"alt='Please wait...'>"</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">//prepare the URL for the Yahoo Site Explorer API:</span></div></li><li class="li2"><div class="de2"> <span class="kw2">var</span> sURL <span class="sy0">=</span> <span class="st0">"http://search.yahooapis.com/SiteExplorerService/V1/inlinkData?"</span> <span class="sy0">+</span></div></li><li class="li1"><div class="de1"> <span class="st0">"appid=3wEDxLHV34HvAU2lMnI51S4Qra5m.baugqoSv4gcRllqqVZm3UrMDZWToMivf5BJ3Mom"</span> <span class="sy0">+</span></div></li><li class="li1"><div class="de1"> <span class="st0">"&results=20&output=json&omit_inlinks=domain"</span> <span class="sy0">+</span></div></li><li class="li1"><div class="de1"> <span class="st0">"&callback=MyNamespace.callback"</span> <span class="sy0">+</span></div></li><li class="li1"><div class="de1"> <span class="st0">"&query="</span> <span class="sy0">+</span> encodeURIComponent<span class="br0">(</span>Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#searchString"</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="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="co1">//This simple line is the call to the Get Utility; we pass</span></div></li><li class="li1"><div class="de1"> <span class="co1">//in the URL and the configuration object, which in this case</span></div></li><li class="li1"><div class="de1"> <span class="co1">//consists merely of our success and failure callbacks:</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> transactionObj <span class="sy0">=</span> Y.<span class="me1">Get</span>.<span class="me1">script</span><span class="br0">(</span>sURL<span class="sy0">,</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> onSuccess<span class="sy0">:</span> onSiteExplorerSuccess<span class="sy0">,</span></div></li><li class="li1"><div class="de1"> onFailure<span class="sy0">:</span> onSiteExplorerFailure<span class="sy0">,</span></div></li><li class="li1"><div class="de1"> onTimeout<span class="sy0">:</span> onSiteExplorerTimeout<span class="sy0">,</span></div></li><li class="li1"><div class="de1"> timeout<span class="sy0">:</span> <span class="nu0">20000</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> context<span class="sy0">:</span> Y</div></li><li class="li2"><div class="de2"> <span class="br0">}</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">//The script method returns a single-field object containing the</span></div></li><li class="li1"><div class="de1"> <span class="co1">//tranaction id:</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"Get Utility transaction started; transaction object: "</span> <span class="sy0">+</span> Y.<span class="me1">dump</span><span class="br0">(</span>transactionObj<span class="br0">)</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"> </div></li><li class="li1"><div class="de1"> <span class="co1">// keep track of the current transaction id. The transaction will be</span></div></li><li class="li1"><div class="de1"> <span class="co1">// considered complete only if the web service callback is executed.</span></div></li><li class="li1"><div class="de1"> current <span class="sy0">=</span> transactionObj.<span class="me1">tId</span><span class="sy0">;</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;"><span class="co1">//function to retrieve data from Yahoo! Site Explorer web service --</span> |
|
|
320 |
<span class="co1">// http://developer.yahoo.com/search/siteexplorer/V1/inlinkData.html</span> |
|
|
321 |
|
|
|
322 |
<span class="kw2">var</span> getSiteExplorerData <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> |
|
|
323 |
Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"Button clicked; getSiteExplorerData firing."</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> |
|
|
324 |
|
|
|
325 |
<span class="co1">// block multiple requests</span> |
|
|
326 |
<span class="kw1">if</span> <span class="br0">(</span>loading<span class="br0">)</span> <span class="br0">{</span> |
|
|
327 |
<span class="kw1">return</span><span class="sy0">;</span> |
|
|
328 |
<span class="br0">}</span> |
|
|
329 |
loading <span class="sy0">=</span> <span class="kw2">true</span><span class="sy0">;</span> |
|
|
330 |
|
|
|
331 |
<span class="co1">//Load the transitional state of the results section:</span> |
|
|
332 |
elResults.<span class="me1">set</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="sy0">,</span> <span class="st0">"<h3>Retrieving incoming links for "</span> <span class="sy0">+</span> |
|
|
333 |
Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#searchString"</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> <span class="st0">":</h3>"</span> <span class="sy0">+</span> |
|
|
334 |
<span class="st0">"<img src='http://l.yimg.com/a/i/nt/ic/ut/bsc/busybar_1.gif' "</span> <span class="sy0">+</span> |
|
|
335 |
<span class="st0">"alt='Please wait...'>"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
336 |
|
|
|
337 |
<span class="co1">//prepare the URL for the Yahoo Site Explorer API:</span> |
|
|
338 |
<span class="kw2">var</span> sURL <span class="sy0">=</span> <span class="st0">"http://search.yahooapis.com/SiteExplorerService/V1/inlinkData?"</span> <span class="sy0">+</span> |
|
|
339 |
<span class="st0">"appid=3wEDxLHV34HvAU2lMnI51S4Qra5m.baugqoSv4gcRllqqVZm3UrMDZWToMivf5BJ3Mom"</span> <span class="sy0">+</span> |
|
|
340 |
<span class="st0">"&results=20&output=json&omit_inlinks=domain"</span> <span class="sy0">+</span> |
|
|
341 |
<span class="st0">"&callback=MyNamespace.callback"</span> <span class="sy0">+</span> |
|
|
342 |
<span class="st0">"&query="</span> <span class="sy0">+</span> encodeURIComponent<span class="br0">(</span>Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#searchString"</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="br0">)</span><span class="sy0">;</span> |
|
|
343 |
|
|
|
344 |
<span class="co1">//This simple line is the call to the Get Utility; we pass</span> |
|
|
345 |
<span class="co1">//in the URL and the configuration object, which in this case</span> |
|
|
346 |
<span class="co1">//consists merely of our success and failure callbacks:</span> |
|
|
347 |
<span class="kw2">var</span> transactionObj <span class="sy0">=</span> Y.<span class="me1">Get</span>.<span class="me1">script</span><span class="br0">(</span>sURL<span class="sy0">,</span> <span class="br0">{</span> |
|
|
348 |
onSuccess<span class="sy0">:</span> onSiteExplorerSuccess<span class="sy0">,</span> |
|
|
349 |
onFailure<span class="sy0">:</span> onSiteExplorerFailure<span class="sy0">,</span> |
|
|
350 |
onTimeout<span class="sy0">:</span> onSiteExplorerTimeout<span class="sy0">,</span> |
|
|
351 |
timeout<span class="sy0">:</span> <span class="nu0">20000</span><span class="sy0">,</span> |
|
|
352 |
context<span class="sy0">:</span> Y |
|
|
353 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
354 |
|
|
|
355 |
<span class="co1">//The script method returns a single-field object containing the</span> |
|
|
356 |
<span class="co1">//tranaction id:</span> |
|
|
357 |
Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"Get Utility transaction started; transaction object: "</span> <span class="sy0">+</span> Y.<span class="me1">dump</span><span class="br0">(</span>transactionObj<span class="br0">)</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> |
|
|
358 |
|
|
|
359 |
<span class="co1">// keep track of the current transaction id. The transaction will be</span> |
|
|
360 |
<span class="co1">// considered complete only if the web service callback is executed.</span> |
|
|
361 |
current <span class="sy0">=</span> transactionObj.<span class="me1">tId</span><span class="sy0">;</span> |
|
|
362 |
<span class="br0">}</span><span class="sy0">;</span></pre></div><textarea id="syntax2-plain">//function to retrieve data from Yahoo! Site Explorer web service -- |
|
|
363 |
// http://developer.yahoo.com/search/siteexplorer/V1/inlinkData.html |
|
|
364 |
|
|
|
365 |
var getSiteExplorerData = function() { |
|
|
366 |
Y.log("Button clicked; getSiteExplorerData firing.", "info", "example"); |
|
|
367 |
|
|
|
368 |
// block multiple requests |
|
|
369 |
if (loading) { |
|
|
370 |
return; |
|
|
371 |
} |
|
|
372 |
loading = true; |
|
|
373 |
|
|
|
374 |
//Load the transitional state of the results section: |
|
|
375 |
elResults.set("innerHTML", "<h3>Retrieving incoming links for " + |
|
|
376 |
Y.one("#searchString").get('value') + ":</h3>" + |
|
|
377 |
"<img src='http://l.yimg.com/a/i/nt/ic/ut/bsc/busybar_1.gif' " + |
|
|
378 |
"alt='Please wait...'>"); |
|
|
379 |
|
|
|
380 |
//prepare the URL for the Yahoo Site Explorer API: |
|
|
381 |
var sURL = "http://search.yahooapis.com/SiteExplorerService/V1/inlinkData?" + |
|
|
382 |
"appid=3wEDxLHV34HvAU2lMnI51S4Qra5m.baugqoSv4gcRllqqVZm3UrMDZWToMivf5BJ3Mom" + |
|
|
383 |
"&results=20&output=json&omit_inlinks=domain" + |
|
|
384 |
"&callback=MyNamespace.callback" + |
|
|
385 |
"&query=" + encodeURIComponent(Y.one("#searchString").get('value')); |
|
|
386 |
|
|
|
387 |
//This simple line is the call to the Get Utility; we pass |
|
|
388 |
//in the URL and the configuration object, which in this case |
|
|
389 |
//consists merely of our success and failure callbacks: |
|
|
390 |
var transactionObj = Y.Get.script(sURL, { |
|
|
391 |
onSuccess: onSiteExplorerSuccess, |
|
|
392 |
onFailure: onSiteExplorerFailure, |
|
|
393 |
onTimeout: onSiteExplorerTimeout, |
|
|
394 |
timeout: 20000, |
|
|
395 |
context: Y |
|
|
396 |
}); |
|
|
397 |
|
|
|
398 |
//The script method returns a single-field object containing the |
|
|
399 |
//tranaction id: |
|
|
400 |
Y.log("Get Utility transaction started; transaction object: " + Y.dump(transactionObj), "info", "example"); |
|
|
401 |
|
|
|
402 |
// keep track of the current transaction id. The transaction will be |
|
|
403 |
// considered complete only if the web service callback is executed. |
|
|
404 |
current = transactionObj.tId; |
|
|
405 |
};</textarea></div></p> |
|
|
406 |
<p>The full JavaScript codeblock for this example reads as follows:</p> |
|
|
407 |
|
|
|
408 |
<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">// We are going to create a global variable to get the </span></div></li><li class="li1"><div class="de1"><span class="co1">// data back from the web service</span></div></li><li class="li1"><div class="de1">MyNamespace <span class="sy0">=</span> YUI.<span class="kw2">namespace</span><span class="br0">(</span><span class="st0">'example.SiteExplorer'</span><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="kw2">var</span> elResults <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#results"</span><span class="br0">)</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> tIds <span class="sy0">=</span> <span class="br0">{</span><span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> loading <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> current <span class="sy0">=</span> <span class="kw2">null</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"><span class="co1">// We use the Get Utility's success handler in conjunction with</span></div></li><li class="li1"><div class="de1"><span class="co1">// the web service callback in order to detect bad responses </span></div></li><li class="li1"><div class="de1"><span class="co1">// from the web service.</span></div></li><li class="li1"><div class="de1"><span class="kw2">var</span> onSiteExplorerSuccess <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span>o<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">// stop blocking requests</span></div></li><li class="li1"><div class="de1"> loading <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// A success response means the script node is inserted. However, the</span></div></li><li class="li1"><div class="de1"> <span class="co1">// utility is unable to detect whether or not the content of the script</span></div></li><li class="li2"><div class="de2"> <span class="co1">// node is correct, or even if there was a bad response (like a 404</span></div></li><li class="li1"><div class="de1"> <span class="co1">// error). To get around this, we use the web service callback to</span></div></li><li class="li1"><div class="de1"> <span class="co1">// verify that the script contents was correct.</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>o.<span class="me1">tId</span> <span class="kw1">in</span> tIds<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">"The Get Utility has fired the success handler indicating that the "</span> <span class="sy0">+</span></div></li><li class="li2"><div class="de2"> <span class="st0">"requested script has loaded and is ready for use."</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> <span class="kw1">else</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">"The Get utility has fired onSuccess but the webservice callback did not "</span> <span class="sy0">+</span></div></li><li class="li1"><div class="de1"> <span class="st0">"fire. We could retry the transaction here, or notify the user of the "</span> <span class="sy0">+</span></div></li><li class="li1"><div class="de1"> <span class="st0">"failure."</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"> </div></li><li class="li1"><div class="de1"><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="kw2">var</span> onSiteExplorerFailure <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</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">"The Get Utility failed."</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><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="kw2">var</span> onSiteExplorerTimeout <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</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">"The Get Utility timed out."</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><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="co1">//function to retrieve data from Yahoo! Site Explorer web service --</span></div></li><li class="li1"><div class="de1"><span class="co1">// http://developer.yahoo.com/search/siteexplorer/V1/inlinkData.html</span></div></li><li class="li1"><div class="de1"><span class="kw2">var</span> getSiteExplorerData <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span><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">"Button clicked; getSiteExplorerData firing."</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></li><li class="li1"><div class="de1"> <span class="co1">// block multiple requests</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>loading<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">return</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"> loading <span class="sy0">=</span> <span class="kw2">true</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">//Load the transitional state of the results section:</span></div></li><li class="li1"><div class="de1"> elResults.<span class="me1">set</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="sy0">,</span> <span class="st0">"<h3>Retrieving incoming links for "</span> <span class="sy0">+</span></div></li><li class="li2"><div class="de2"> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#searchString"</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> <span class="st0">":</h3>"</span> <span class="sy0">+</span></div></li><li class="li1"><div class="de1"> <span class="st0">"<img src='http://l.yimg.com/a/i/nt/ic/ut/bsc/busybar_1.gif' "</span> <span class="sy0">+</span></div></li><li class="li1"><div class="de1"> <span class="st0">"alt='Please wait...'>"</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">//prepare the URL for the Yahoo Site Explorer API:</span></div></li><li class="li2"><div class="de2"> <span class="kw2">var</span> sURL <span class="sy0">=</span> <span class="st0">"http://search.yahooapis.com/SiteExplorerService/V1/inlinkData?"</span> <span class="sy0">+</span></div></li><li class="li1"><div class="de1"> <span class="st0">"appid=3wEDxLHV34HvAU2lMnI51S4Qra5m.baugqoSv4gcRllqqVZm3UrMDZWToMivf5BJ3Mom"</span> <span class="sy0">+</span></div></li><li class="li1"><div class="de1"> <span class="st0">"&results=20&output=json&omit_inlinks=domain"</span> <span class="sy0">+</span></div></li><li class="li1"><div class="de1"> <span class="st0">"&callback=MyNamespace.callback"</span> <span class="sy0">+</span></div></li><li class="li1"><div class="de1"> <span class="st0">"&query="</span> <span class="sy0">+</span> encodeURIComponent<span class="br0">(</span>Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#searchString"</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="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="co1">//This simple line is the call to the Get Utility; we pass</span></div></li><li class="li1"><div class="de1"> <span class="co1">//in the URL and the configuration object, which in this case</span></div></li><li class="li1"><div class="de1"> <span class="co1">//consists merely of our success and failure callbacks:</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> transactionObj <span class="sy0">=</span> Y.<span class="me1">Get</span>.<span class="me1">script</span><span class="br0">(</span>sURL<span class="sy0">,</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> onSuccess<span class="sy0">:</span> onSiteExplorerSuccess<span class="sy0">,</span></div></li><li class="li1"><div class="de1"> onFailure<span class="sy0">:</span> onSiteExplorerFailure<span class="sy0">,</span></div></li><li class="li1"><div class="de1"> onTimeout<span class="sy0">:</span> onSiteExplorerTimeout<span class="sy0">,</span></div></li><li class="li1"><div class="de1"> timeout<span class="sy0">:</span> <span class="nu0">20000</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> context<span class="sy0">:</span> Y</div></li><li class="li2"><div class="de2"> <span class="br0">}</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">//The script method returns a single-field object containing the</span></div></li><li class="li1"><div class="de1"> <span class="co1">//tranaction id:</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"Get Utility transaction started; transaction object: "</span> <span class="sy0">+</span> Y.<span class="me1">dump</span><span class="br0">(</span>transactionObj<span class="br0">)</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"> </div></li><li class="li1"><div class="de1"> <span class="co1">// keep track of the current transaction id. The transaction will be</span></div></li><li class="li1"><div class="de1"> <span class="co1">// considered complete only if the web service callback is executed.</span></div></li><li class="li1"><div class="de1"> current <span class="sy0">=</span> transactionObj.<span class="me1">tId</span><span class="sy0">;</span> </div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1">MyNamespace.<span class="me1">callback</span> <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span>results<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">"Web service returned data to Y.example.SiteExplorer.callback; beginning to process."</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></li><li class="li1"><div class="de1"> <span class="co1">// Mark the transaction as complete. This will be checked by the onSuccess</span></div></li><li class="li2"><div class="de2"> <span class="co1">// handler to determine if the transaction really succeeded.</span></div></li><li class="li1"><div class="de1"> tIds<span class="br0">[</span>current<span class="br0">]</span> <span class="sy0">=</span> <span class="kw2">true</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">//work with the returned data to extract meaningful fields:</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> aResults <span class="sy0">=</span> results.<span class="me1">ResultSet</span>.<span class="me1">Result</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="kw2">var</span> totalLinks <span class="sy0">=</span> results.<span class="me1">ResultSet</span>.<span class="me1">totalResultsAvailable</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> returnedLinkCount <span class="sy0">=</span> results.<span class="me1">ResultSet</span>.<span class="me1">totalResultsReturned</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">if</span><span class="br0">(</span>aResults<span class="br0">)</span> <span class="br0">{</span><span class="co1">//there are inbound links; process and display them:</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="co1">//write header and open list of inbound links: </span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> html <span class="sy0">=</span> <span class="st0">"<h3>There are "</span> <span class="sy0">+</span></div></li><li class="li1"><div class="de1"> totalLinks <span class="sy0">+</span> </div></li><li class="li1"><div class="de1"> <span class="st0">" inbound links for this page; here are the first "</span> <span class="sy0">+</span> </div></li><li class="li1"><div class="de1"> returnedLinkCount <span class="sy0">+</span></div></li><li class="li2"><div class="de2"> <span class="st0">":</h3><ol>"</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">//process list of inbound links:</span></div></li><li class="li1"><div class="de1"> <span class="kw1">for</span> <span class="br0">(</span><span class="kw2">var</span> i<span class="sy0">=</span><span class="nu0">0</span><span class="sy0">;</span> i <span class="sy0"><</span> aResults.<span class="me1">length</span><span class="sy0">;</span> i<span class="sy0">++</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> html <span class="sy0">+=</span> <span class="st0">"<li><strong>"</span> <span class="sy0">+</span></div></li><li class="li2"><div class="de2"> aResults<span class="br0">[</span>i<span class="br0">]</span>.<span class="me1">Title</span> <span class="sy0">+</span></div></li><li class="li1"><div class="de1"> <span class="st0">":</strong> <a href='"</span> <span class="sy0">+</span></div></li><li class="li1"><div class="de1"> aResults<span class="br0">[</span>i<span class="br0">]</span>.<span class="me1">Url</span> <span class="sy0">+</span></div></li><li class="li1"><div class="de1"> <span class="st0">"'>"</span> <span class="sy0">+</span> aResults<span class="br0">[</span>i<span class="br0">]</span>.<span class="me1">Url</span> <span class="sy0">+</span></div></li><li class="li1"><div class="de1"> <span class="st0">"</a></li>"</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"> </div></li><li class="li1"><div class="de1"> <span class="co1">//close list of inbound links</span></div></li><li class="li1"><div class="de1"> html <span class="sy0">+=</span> <span class="st0">"</ol>"</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="br0">}</span> <span class="kw1">else</span> <span class="br0">{</span><span class="co1">//no inbound links exist for this page:</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> html <span class="sy0">=</span> <span class="st0">"<h3>There are no inbound links for the page specified.</h3>"</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </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">//insert string into DOM:</span></div></li><li class="li1"><div class="de1"> elResults.<span class="me1">set</span><span class="br0">(</span><span class="st0">'innerHTML'</span><span class="sy0">,</span> html<span class="br0">)</span><span class="sy0">;</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"> </div></li><li class="li2"><div class="de2"><span class="co1">//suppress default form behavior</span></div></li><li class="li1"><div class="de1">Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">"submit"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> e.<span class="me1">preventDefault</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> getSiteExplorerData<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">,</span> <span class="st0">"#siteExplorer"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">// We are going to create a global variable to get the </span> |
|
|
409 |
<span class="co1">// data back from the web service</span> |
|
|
410 |
MyNamespace <span class="sy0">=</span> YUI.<span class="kw2">namespace</span><span class="br0">(</span><span class="st0">'example.SiteExplorer'</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
411 |
|
|
|
412 |
<span class="kw2">var</span> elResults <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#results"</span><span class="br0">)</span><span class="sy0">,</span> |
|
|
413 |
tIds <span class="sy0">=</span> <span class="br0">{</span><span class="br0">}</span><span class="sy0">,</span> |
|
|
414 |
loading <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">,</span> |
|
|
415 |
current <span class="sy0">=</span> <span class="kw2">null</span><span class="sy0">;</span> |
|
|
416 |
|
|
|
417 |
<span class="co1">// We use the Get Utility's success handler in conjunction with</span> |
|
|
418 |
<span class="co1">// the web service callback in order to detect bad responses </span> |
|
|
419 |
<span class="co1">// from the web service.</span> |
|
|
420 |
<span class="kw2">var</span> onSiteExplorerSuccess <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span>o<span class="br0">)</span> <span class="br0">{</span> |
|
|
421 |
|
|
|
422 |
<span class="co1">// stop blocking requests</span> |
|
|
423 |
loading <span class="sy0">=</span> <span class="kw2">false</span><span class="sy0">;</span> |
|
|
424 |
|
|
|
425 |
<span class="co1">// A success response means the script node is inserted. However, the</span> |
|
|
426 |
<span class="co1">// utility is unable to detect whether or not the content of the script</span> |
|
|
427 |
<span class="co1">// node is correct, or even if there was a bad response (like a 404</span> |
|
|
428 |
<span class="co1">// error). To get around this, we use the web service callback to</span> |
|
|
429 |
<span class="co1">// verify that the script contents was correct.</span> |
|
|
430 |
<span class="kw1">if</span> <span class="br0">(</span>o.<span class="me1">tId</span> <span class="kw1">in</span> tIds<span class="br0">)</span> <span class="br0">{</span> |
|
|
431 |
Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"The Get Utility has fired the success handler indicating that the "</span> <span class="sy0">+</span> |
|
|
432 |
<span class="st0">"requested script has loaded and is ready for use."</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> |
|
|
433 |
<span class="br0">}</span> <span class="kw1">else</span> <span class="br0">{</span> |
|
|
434 |
Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"The Get utility has fired onSuccess but the webservice callback did not "</span> <span class="sy0">+</span> |
|
|
435 |
<span class="st0">"fire. We could retry the transaction here, or notify the user of the "</span> <span class="sy0">+</span> |
|
|
436 |
<span class="st0">"failure."</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> |
|
|
437 |
<span class="br0">}</span> |
|
|
438 |
|
|
|
439 |
<span class="br0">}</span><span class="sy0">;</span> |
|
|
440 |
|
|
|
441 |
<span class="kw2">var</span> onSiteExplorerFailure <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span>o<span class="br0">)</span> <span class="br0">{</span> |
|
|
442 |
Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"The Get Utility failed."</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> |
|
|
443 |
<span class="br0">}</span><span class="sy0">;</span> |
|
|
444 |
|
|
|
445 |
<span class="kw2">var</span> onSiteExplorerTimeout <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span>o<span class="br0">)</span> <span class="br0">{</span> |
|
|
446 |
Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"The Get Utility timed out."</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> |
|
|
447 |
<span class="br0">}</span><span class="sy0">;</span> |
|
|
448 |
|
|
|
449 |
<span class="co1">//function to retrieve data from Yahoo! Site Explorer web service --</span> |
|
|
450 |
<span class="co1">// http://developer.yahoo.com/search/siteexplorer/V1/inlinkData.html</span> |
|
|
451 |
<span class="kw2">var</span> getSiteExplorerData <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span> |
|
|
452 |
Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"Button clicked; getSiteExplorerData firing."</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> |
|
|
453 |
|
|
|
454 |
<span class="co1">// block multiple requests</span> |
|
|
455 |
<span class="kw1">if</span> <span class="br0">(</span>loading<span class="br0">)</span> <span class="br0">{</span> |
|
|
456 |
<span class="kw1">return</span><span class="sy0">;</span> |
|
|
457 |
<span class="br0">}</span> |
|
|
458 |
loading <span class="sy0">=</span> <span class="kw2">true</span><span class="sy0">;</span> |
|
|
459 |
|
|
|
460 |
<span class="co1">//Load the transitional state of the results section:</span> |
|
|
461 |
elResults.<span class="me1">set</span><span class="br0">(</span><span class="st0">"innerHTML"</span><span class="sy0">,</span> <span class="st0">"<h3>Retrieving incoming links for "</span> <span class="sy0">+</span> |
|
|
462 |
Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#searchString"</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> <span class="st0">":</h3>"</span> <span class="sy0">+</span> |
|
|
463 |
<span class="st0">"<img src='http://l.yimg.com/a/i/nt/ic/ut/bsc/busybar_1.gif' "</span> <span class="sy0">+</span> |
|
|
464 |
<span class="st0">"alt='Please wait...'>"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
465 |
|
|
|
466 |
<span class="co1">//prepare the URL for the Yahoo Site Explorer API:</span> |
|
|
467 |
<span class="kw2">var</span> sURL <span class="sy0">=</span> <span class="st0">"http://search.yahooapis.com/SiteExplorerService/V1/inlinkData?"</span> <span class="sy0">+</span> |
|
|
468 |
<span class="st0">"appid=3wEDxLHV34HvAU2lMnI51S4Qra5m.baugqoSv4gcRllqqVZm3UrMDZWToMivf5BJ3Mom"</span> <span class="sy0">+</span> |
|
|
469 |
<span class="st0">"&results=20&output=json&omit_inlinks=domain"</span> <span class="sy0">+</span> |
|
|
470 |
<span class="st0">"&callback=MyNamespace.callback"</span> <span class="sy0">+</span> |
|
|
471 |
<span class="st0">"&query="</span> <span class="sy0">+</span> encodeURIComponent<span class="br0">(</span>Y.<span class="me1">one</span><span class="br0">(</span><span class="st0">"#searchString"</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="br0">)</span><span class="sy0">;</span> |
|
|
472 |
|
|
|
473 |
<span class="co1">//This simple line is the call to the Get Utility; we pass</span> |
|
|
474 |
<span class="co1">//in the URL and the configuration object, which in this case</span> |
|
|
475 |
<span class="co1">//consists merely of our success and failure callbacks:</span> |
|
|
476 |
<span class="kw2">var</span> transactionObj <span class="sy0">=</span> Y.<span class="me1">Get</span>.<span class="me1">script</span><span class="br0">(</span>sURL<span class="sy0">,</span> <span class="br0">{</span> |
|
|
477 |
onSuccess<span class="sy0">:</span> onSiteExplorerSuccess<span class="sy0">,</span> |
|
|
478 |
onFailure<span class="sy0">:</span> onSiteExplorerFailure<span class="sy0">,</span> |
|
|
479 |
onTimeout<span class="sy0">:</span> onSiteExplorerTimeout<span class="sy0">,</span> |
|
|
480 |
timeout<span class="sy0">:</span> <span class="nu0">20000</span><span class="sy0">,</span> |
|
|
481 |
context<span class="sy0">:</span> Y |
|
|
482 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
483 |
|
|
|
484 |
<span class="co1">//The script method returns a single-field object containing the</span> |
|
|
485 |
<span class="co1">//tranaction id:</span> |
|
|
486 |
Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"Get Utility transaction started; transaction object: "</span> <span class="sy0">+</span> Y.<span class="me1">dump</span><span class="br0">(</span>transactionObj<span class="br0">)</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> |
|
|
487 |
|
|
|
488 |
<span class="co1">// keep track of the current transaction id. The transaction will be</span> |
|
|
489 |
<span class="co1">// considered complete only if the web service callback is executed.</span> |
|
|
490 |
current <span class="sy0">=</span> transactionObj.<span class="me1">tId</span><span class="sy0">;</span> |
|
|
491 |
<span class="br0">}</span><span class="sy0">;</span> |
|
|
492 |
|
|
|
493 |
MyNamespace.<span class="me1">callback</span> <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">(</span>results<span class="br0">)</span> <span class="br0">{</span> |
|
|
494 |
Y.<span class="me1">log</span><span class="br0">(</span><span class="st0">"Web service returned data to Y.example.SiteExplorer.callback; beginning to process."</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> |
|
|
495 |
|
|
|
496 |
<span class="co1">// Mark the transaction as complete. This will be checked by the onSuccess</span> |
|
|
497 |
<span class="co1">// handler to determine if the transaction really succeeded.</span> |
|
|
498 |
tIds<span class="br0">[</span>current<span class="br0">]</span> <span class="sy0">=</span> <span class="kw2">true</span><span class="sy0">;</span> |
|
|
499 |
|
|
|
500 |
<span class="co1">//work with the returned data to extract meaningful fields:</span> |
|
|
501 |
<span class="kw2">var</span> aResults <span class="sy0">=</span> results.<span class="me1">ResultSet</span>.<span class="me1">Result</span><span class="sy0">;</span> |
|
|
502 |
<span class="kw2">var</span> totalLinks <span class="sy0">=</span> results.<span class="me1">ResultSet</span>.<span class="me1">totalResultsAvailable</span><span class="sy0">;</span> |
|
|
503 |
<span class="kw2">var</span> returnedLinkCount <span class="sy0">=</span> results.<span class="me1">ResultSet</span>.<span class="me1">totalResultsReturned</span><span class="sy0">;</span> |
|
|
504 |
|
|
|
505 |
<span class="kw1">if</span><span class="br0">(</span>aResults<span class="br0">)</span> <span class="br0">{</span><span class="co1">//there are inbound links; process and display them:</span> |
|
|
506 |
|
|
|
507 |
<span class="co1">//write header and open list of inbound links: </span> |
|
|
508 |
<span class="kw2">var</span> html <span class="sy0">=</span> <span class="st0">"<h3>There are "</span> <span class="sy0">+</span> |
|
|
509 |
totalLinks <span class="sy0">+</span> |
|
|
510 |
<span class="st0">" inbound links for this page; here are the first "</span> <span class="sy0">+</span> |
|
|
511 |
returnedLinkCount <span class="sy0">+</span> |
|
|
512 |
<span class="st0">":</h3><ol>"</span><span class="sy0">;</span> |
|
|
513 |
|
|
|
514 |
<span class="co1">//process list of inbound links:</span> |
|
|
515 |
<span class="kw1">for</span> <span class="br0">(</span><span class="kw2">var</span> i<span class="sy0">=</span><span class="nu0">0</span><span class="sy0">;</span> i <span class="sy0"><</span> aResults.<span class="me1">length</span><span class="sy0">;</span> i<span class="sy0">++</span><span class="br0">)</span> <span class="br0">{</span> |
|
|
516 |
html <span class="sy0">+=</span> <span class="st0">"<li><strong>"</span> <span class="sy0">+</span> |
|
|
517 |
aResults<span class="br0">[</span>i<span class="br0">]</span>.<span class="me1">Title</span> <span class="sy0">+</span> |
|
|
518 |
<span class="st0">":</strong> <a href='"</span> <span class="sy0">+</span> |
|
|
519 |
aResults<span class="br0">[</span>i<span class="br0">]</span>.<span class="me1">Url</span> <span class="sy0">+</span> |
|
|
520 |
<span class="st0">"'>"</span> <span class="sy0">+</span> aResults<span class="br0">[</span>i<span class="br0">]</span>.<span class="me1">Url</span> <span class="sy0">+</span> |
|
|
521 |
<span class="st0">"</a></li>"</span><span class="sy0">;</span> |
|
|
522 |
<span class="br0">}</span> |
|
|
523 |
|
|
|
524 |
<span class="co1">//close list of inbound links</span> |
|
|
525 |
html <span class="sy0">+=</span> <span class="st0">"</ol>"</span><span class="sy0">;</span> |
|
|
526 |
|
|
|
527 |
<span class="br0">}</span> <span class="kw1">else</span> <span class="br0">{</span><span class="co1">//no inbound links exist for this page:</span> |
|
|
528 |
|
|
|
529 |
<span class="kw2">var</span> html <span class="sy0">=</span> <span class="st0">"<h3>There are no inbound links for the page specified.</h3>"</span><span class="sy0">;</span> |
|
|
530 |
|
|
|
531 |
<span class="br0">}</span> |
|
|
532 |
|
|
|
533 |
<span class="co1">//insert string into DOM:</span> |
|
|
534 |
elResults.<span class="me1">set</span><span class="br0">(</span><span class="st0">'innerHTML'</span><span class="sy0">,</span> html<span class="br0">)</span><span class="sy0">;</span> |
|
|
535 |
<span class="br0">}</span><span class="sy0">;</span> |
|
|
536 |
|
|
|
537 |
<span class="co1">//suppress default form behavior</span> |
|
|
538 |
Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">"submit"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span> |
|
|
539 |
e.<span class="me1">preventDefault</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
540 |
getSiteExplorerData<span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
541 |
<span class="br0">}</span><span class="sy0">,</span> <span class="st0">"#siteExplorer"</span><span class="br0">)</span><span class="sy0">;</span> |
|
|
542 |
</pre></div><textarea id="syntax3-plain">// We are going to create a global variable to get the |
|
|
543 |
// data back from the web service |
|
|
544 |
MyNamespace = YUI.namespace('example.SiteExplorer'); |
|
|
545 |
|
|
|
546 |
var elResults = Y.one("#results"), |
|
|
547 |
tIds = {}, |
|
|
548 |
loading = false, |
|
|
549 |
current = null; |
|
|
550 |
|
|
|
551 |
// We use the Get Utility's success handler in conjunction with |
|
|
552 |
// the web service callback in order to detect bad responses |
|
|
553 |
// from the web service. |
|
|
554 |
var onSiteExplorerSuccess = function(o) { |
|
|
555 |
|
|
|
556 |
// stop blocking requests |
|
|
557 |
loading = false; |
|
|
558 |
|
|
|
559 |
// A success response means the script node is inserted. However, the |
|
|
560 |
// utility is unable to detect whether or not the content of the script |
|
|
561 |
// node is correct, or even if there was a bad response (like a 404 |
|
|
562 |
// error). To get around this, we use the web service callback to |
|
|
563 |
// verify that the script contents was correct. |
|
|
564 |
if (o.tId in tIds) { |
|
|
565 |
Y.log("The Get Utility has fired the success handler indicating that the " + |
|
|
566 |
"requested script has loaded and is ready for use.", "info", "example"); |
|
|
567 |
} else { |
|
|
568 |
Y.log("The Get utility has fired onSuccess but the webservice callback did not " + |
|
|
569 |
"fire. We could retry the transaction here, or notify the user of the " + |
|
|
570 |
"failure.", "info", "example"); |
|
|
571 |
} |
|
|
572 |
|
|
|
573 |
}; |
|
|
574 |
|
|
|
575 |
var onSiteExplorerFailure = function(o) { |
|
|
576 |
Y.log("The Get Utility failed.", "info", "example"); |
|
|
577 |
}; |
|
|
578 |
|
|
|
579 |
var onSiteExplorerTimeout = function(o) { |
|
|
580 |
Y.log("The Get Utility timed out.", "info", "example"); |
|
|
581 |
}; |
|
|
582 |
|
|
|
583 |
//function to retrieve data from Yahoo! Site Explorer web service -- |
|
|
584 |
// http://developer.yahoo.com/search/siteexplorer/V1/inlinkData.html |
|
|
585 |
var getSiteExplorerData = function() { |
|
|
586 |
Y.log("Button clicked; getSiteExplorerData firing.", "info", "example"); |
|
|
587 |
|
|
|
588 |
// block multiple requests |
|
|
589 |
if (loading) { |
|
|
590 |
return; |
|
|
591 |
} |
|
|
592 |
loading = true; |
|
|
593 |
|
|
|
594 |
//Load the transitional state of the results section: |
|
|
595 |
elResults.set("innerHTML", "<h3>Retrieving incoming links for " + |
|
|
596 |
Y.one("#searchString").get('value') + ":</h3>" + |
|
|
597 |
"<img src='http://l.yimg.com/a/i/nt/ic/ut/bsc/busybar_1.gif' " + |
|
|
598 |
"alt='Please wait...'>"); |
|
|
599 |
|
|
|
600 |
//prepare the URL for the Yahoo Site Explorer API: |
|
|
601 |
var sURL = "http://search.yahooapis.com/SiteExplorerService/V1/inlinkData?" + |
|
|
602 |
"appid=3wEDxLHV34HvAU2lMnI51S4Qra5m.baugqoSv4gcRllqqVZm3UrMDZWToMivf5BJ3Mom" + |
|
|
603 |
"&results=20&output=json&omit_inlinks=domain" + |
|
|
604 |
"&callback=MyNamespace.callback" + |
|
|
605 |
"&query=" + encodeURIComponent(Y.one("#searchString").get('value')); |
|
|
606 |
|
|
|
607 |
//This simple line is the call to the Get Utility; we pass |
|
|
608 |
//in the URL and the configuration object, which in this case |
|
|
609 |
//consists merely of our success and failure callbacks: |
|
|
610 |
var transactionObj = Y.Get.script(sURL, { |
|
|
611 |
onSuccess: onSiteExplorerSuccess, |
|
|
612 |
onFailure: onSiteExplorerFailure, |
|
|
613 |
onTimeout: onSiteExplorerTimeout, |
|
|
614 |
timeout: 20000, |
|
|
615 |
context: Y |
|
|
616 |
}); |
|
|
617 |
|
|
|
618 |
//The script method returns a single-field object containing the |
|
|
619 |
//tranaction id: |
|
|
620 |
Y.log("Get Utility transaction started; transaction object: " + Y.dump(transactionObj), "info", "example"); |
|
|
621 |
|
|
|
622 |
// keep track of the current transaction id. The transaction will be |
|
|
623 |
// considered complete only if the web service callback is executed. |
|
|
624 |
current = transactionObj.tId; |
|
|
625 |
}; |
|
|
626 |
|
|
|
627 |
MyNamespace.callback = function(results) { |
|
|
628 |
Y.log("Web service returned data to Y.example.SiteExplorer.callback; beginning to process.", "info", "example"); |
|
|
629 |
|
|
|
630 |
// Mark the transaction as complete. This will be checked by the onSuccess |
|
|
631 |
// handler to determine if the transaction really succeeded. |
|
|
632 |
tIds[current] = true; |
|
|
633 |
|
|
|
634 |
//work with the returned data to extract meaningful fields: |
|
|
635 |
var aResults = results.ResultSet.Result; |
|
|
636 |
var totalLinks = results.ResultSet.totalResultsAvailable; |
|
|
637 |
var returnedLinkCount = results.ResultSet.totalResultsReturned; |
|
|
638 |
|
|
|
639 |
if(aResults) {//there are inbound links; process and display them: |
|
|
640 |
|
|
|
641 |
//write header and open list of inbound links: |
|
|
642 |
var html = "<h3>There are " + |
|
|
643 |
totalLinks + |
|
|
644 |
" inbound links for this page; here are the first " + |
|
|
645 |
returnedLinkCount + |
|
|
646 |
":</h3><ol>"; |
|
|
647 |
|
|
|
648 |
//process list of inbound links: |
|
|
649 |
for (var i=0; i < aResults.length; i++) { |
|
|
650 |
html += "<li><strong>" + |
|
|
651 |
aResults[i].Title + |
|
|
652 |
":</strong> <a href='" + |
|
|
653 |
aResults[i].Url + |
|
|
654 |
"'>" + aResults[i].Url + |
|
|
655 |
"</a></li>"; |
|
|
656 |
} |
|
|
657 |
|
|
|
658 |
//close list of inbound links |
|
|
659 |
html += "</ol>"; |
|
|
660 |
|
|
|
661 |
} else {//no inbound links exist for this page: |
|
|
662 |
|
|
|
663 |
var html = "<h3>There are no inbound links for the page specified.</h3>"; |
|
|
664 |
|
|
|
665 |
} |
|
|
666 |
|
|
|
667 |
//insert string into DOM: |
|
|
668 |
elResults.set('innerHTML', html); |
|
|
669 |
}; |
|
|
670 |
|
|
|
671 |
//suppress default form behavior |
|
|
672 |
Y.on("submit", function(e) { |
|
|
673 |
e.preventDefault(); |
|
|
674 |
getSiteExplorerData(); |
|
|
675 |
}, "#siteExplorer"); |
|
|
676 |
</textarea></div> </div> |
|
|
677 |
<div class="yui-u sidebar"> |
|
|
678 |
|
|
|
679 |
|
|
|
680 |
<div id="examples" class="mod box4"> |
|
|
681 |
<div class="hd"> |
|
|
682 |
<h4> |
|
|
683 |
Get Examples:</h4> |
|
|
684 |
</div> |
|
|
685 |
<div class="bd"> |
|
|
686 |
<ul> |
|
|
687 |
<li class='selected'><a href='../get/get-script-basic.html'>Getting a Script Node with JSON Data</a></li> </ul> |
|
|
688 |
</div> |
|
|
689 |
</div> |
|
|
690 |
|
|
|
691 |
<div class="mod box4"> |
|
|
692 |
<div class="hd"> |
|
|
693 |
<h4>More Get Resources:</h4> |
|
|
694 |
</div> |
|
|
695 |
<div class="bd"> |
|
|
696 |
<ul> |
|
|
697 |
<!-- <li><a href="http://developer.yahoo.com/yui/get/">User's Guide</a> (external)</li> --> |
|
|
698 |
<li><a href="../../api/Get.html">API Documentation</a></li></ul> |
|
|
699 |
</div> |
|
|
700 |
</div> |
|
|
701 |
</div> |
|
|
702 |
</div> |
|
|
703 |
|
|
|
704 |
</div> |
|
|
705 |
</div> |
|
|
706 |
|
|
|
707 |
|
|
|
708 |
<div class="yui-b toc3" id="tocWrapper"> |
|
|
709 |
<!-- TABLE OF CONTENTS --> |
|
|
710 |
<div id="toc"> |
|
|
711 |
|
|
|
712 |
<ul> |
|
|
713 |
<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="selected "><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="item"><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> |
|
|
714 |
</div> |
|
|
715 |
</div> |
|
|
716 |
</div><!--closes bd--> |
|
|
717 |
|
|
|
718 |
<div id="ft"> |
|
|
719 |
<p class="first">Copyright © 2009 Yahoo! Inc. All rights reserved.</p> |
|
|
720 |
<p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - |
|
|
721 |
<a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - |
|
|
722 |
<a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - |
|
|
723 |
<a href="http://careers.yahoo.com/">Job Openings</a></p> |
|
|
724 |
</div> |
|
|
725 |
</div> |
|
|
726 |
<script language="javascript"> |
|
|
727 |
var yuiConfig = {base:"../../build/", timeout: 10000, filter:"debug", logInclude: {get:true, event:true, example:true}}; |
|
|
728 |
</script> |
|
|
729 |
<script src="../../assets/syntax.js"></script> |
|
|
730 |
<script src="../../assets/dpSyntaxHighlighter.js"></script> |
|
|
731 |
<script language="javascript"> |
|
|
732 |
dp.SyntaxHighlighter.HighlightAll('code'); |
|
|
733 |
</script> |
|
|
734 |
</body> |
|
|
735 |
</html> |