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

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

adding yui javascript

Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3<head>
4<meta http-equiv="content-type" content="text/html; charset=utf-8">
5<title>Getting a Script Node with JSON Data</title>
6
7<style type="text/css">
8/*margin and padding on body element
9  can introduce errors in determining
10  element position and are not recommended;
11  we turn them off as a foundation for YUI
12  CSS treatments. */
13body {
14        margin:0;
15        padding:0;
16}
17</style>
18
19<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
20<script type="text/javascript" src="../../build/yui/yui-debug.js"></script>
21
22
23<!--begin custom header content for this example-->
24<style type="text/css">
25#container ol {
26        /*bringing lists on to the page with breathing room */
27        margin-left:2em !important;
28}
29
30#container ol li {
31        /*giving OL's LIs generated numbers*/
32        list-style: decimal outside !important; 
33}
34
35#container h3 {
36        margin-top: 1em;
37}
38</style>
39<!--end custom header content for this example-->
40
41</head>
42
43<body class=" yui-skin-sam">
44
45<h1>Getting a Script Node with JSON Data</h1>
46
47<div class="exampleIntro">
48        <p>This example employs the <a href="http://developer.yahoo.com/yui/3/get/">YUI
49Get Utility</a> in a simple use case: retrieving JSON data from a cross-domain
50web service. While this is a relatively common usage, it's important to
51understand the security ramifications of this technique. Scripts loaded via the
52Get Utility (or any other &quot;script node&quot; solution) execute immediately
53once they are loaded. If you do not fully control (or fully trust) the script's
54source, this is not a safe technique and it can put the security of your users'
55data at risk. (For more information on the dangers of cross-site scripting
56[XSS] exploits, <a
57href="http://en.wikipedia.org/wiki/Cross-site_scripting">check out the
58Wikipedia entry on this subject</a>.)</p> <p>Here, we will use a trusted Yahoo!
59Search web service called <a
60href="http://developer.yahoo.com/search/siteexplorer/V1/inlinkData.html">Site
61Explorer</a> to return a list of inbound links for a given URL. The principal
62difference between this example and similar examples using <a
63href="http://developer.yahoo.com/yui/3/io/">YUI IO Utility</a> is
64that this technique does not require a server-side proxy. The browser connects
65directly to the third-party web service without bouncing through a proxy page
66as is required when using the XMLHttpRequest object (on which IO Utility
67relies).</p>
68                       
69</div>
70
71<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
72
73<div id="container">
74
75    <!--Use a real form that works without JavaScript:-->
76    <form method="GET" action="http://siteexplorer.search.yahoo.com/advsearch" id="siteExplorer">
77
78        <label for="searchString">Site URL:</label> <input type="text" name="p" id="searchString" value="http://developer.yahoo.com/yui" size="40">
79       
80        <input type="hidden" name="bwm" value="i">
81        <input type="hidden" name="bwms" value="p">
82   
83        <input type="submit" id="siteExplorerData" value="Click here to get JSON data.">
84   
85    </form>
86
87    <div id="results">
88        <!--JSON output will be written to the DOM here-->
89       
90    </div>
91</div>
92
93<script type="text/javascript">
94
95YUI({base:"../../build/", timeout: 10000, filter:"debug", logInclude: {get:true, event:true, example:true}}).use("node", "dump",
96
97function(Y) { 
98
99    // We are going to create a global variable to get the
100    // data back from the web service
101    MyNamespace = YUI.namespace('example.SiteExplorer');
102
103    var elResults = Y.get("#results"),
104        tIds = {},
105        loading = false,
106        current = null;
107       
108    // We use the Get Utility's success handler in conjunction with
109    // the web service callback in order to detect bad responses
110    // from the web service.
111    var onSiteExplorerSuccess = function(o) {
112
113        // stop blocking requests
114        loading = false;
115
116        // A success response means the script node is inserted.  However, the
117        // utility is unable to detect whether or not the content of the script
118        // node is correct, or even if there was a bad response (like a 404
119        // error).  To get around this, we use the web service callback to
120        // verify that the script contents was correct.
121        if (o.tId in tIds) {
122Y.log("The Get Utility has fired the success handler indicating that the " +
123          "requested script has loaded and is ready for use.", "info", "example");
124        } else {
125Y.log("The Get utility has fired onSuccess but the webservice callback did not " +
126          "fire.  We could retry the transaction here, or notify the user of the " +
127          "failure.", "info", "example");
128        }
129
130    };
131
132    var onSiteExplorerFailure = function(o) {
133Y.log("The Get Utility failed.", "info", "example");
134    };
135
136    var onSiteExplorerTimeout = function(o) {
137Y.log("The Get Utility timed out.", "info", "example");
138    };
139   
140    //function to retrieve data from Yahoo! Site Explorer web service --
141    // http://developer.yahoo.com/search/siteexplorer/V1/inlinkData.html
142    var getSiteExplorerData = function() {
143        Y.log("Button clicked; getSiteExplorerData firing.", "info", "example");
144
145        // block multiple requests
146        if (loading) {
147            return;
148        }
149        loading = true;
150       
151        //Load the transitional state of the results section:
152        elResults.set("innerHTML", "<h3>Retrieving incoming links for " +
153            Y.get("#searchString").get('value') + ":</h3>" +
154            "<img src='http://l.yimg.com/us.yimg.com/i/nt/ic/ut/bsc/busybar_1.gif' " +
155            "alt='Please wait...'>");
156       
157        //prepare the URL for the Yahoo Site Explorer API:
158        var sURL = "http://search.yahooapis.com/SiteExplorerService/V1/inlinkData?" +
159            "appid=3wEDxLHV34HvAU2lMnI51S4Qra5m.baugqoSv4gcRllqqVZm3UrMDZWToMivf5BJ3Mom" +
160            "&results=20&output=json&omit_inlinks=domain" +
161            "&callback=MyNamespace.callback" +
162            "&query=" + encodeURIComponent(Y.get("#searchString").get('value'));
163       
164        //This simple line is the call to the Get Utility; we pass
165        //in the URL and the configuration object, which in this case
166        //consists merely of our success and failure callbacks:
167        var transactionObj = Y.Get.script(sURL, {
168            onSuccess: onSiteExplorerSuccess,
169            onFailure: onSiteExplorerFailure,
170            onTimeout: onSiteExplorerTimeout,
171            timeout: 20000,
172            context: Y
173        });
174       
175        //The script method returns a single-field object containing the
176        //tranaction id:
177        Y.log("Get Utility transaction started; transaction object: " + Y.dump(transactionObj), "info", "example");
178
179        // keep track of the current transaction id.  The transaction will be
180        // considered complete only if the web service callback is executed.
181        current = transactionObj.tId; 
182    };
183
184    MyNamespace.callback = function(results) {
185        Y.log("Web service returned data to Y.example.SiteExplorer.callback; beginning to process.", "info", "example");
186
187        // Mark the transaction as complete.  This will be checked by the onSuccess
188        // handler to determine if the transaction really succeeded.
189        tIds[current] = true;
190       
191        //work with the returned data to extract meaningful fields:
192        var aResults = results.ResultSet.Result;
193        var totalLinks = results.ResultSet.totalResultsAvailable;
194        var returnedLinkCount = results.ResultSet.totalResultsReturned;
195       
196        if(aResults) {//there are inbound links; process and display them:
197       
198            //write header and open list of inbound links:         
199            var html = "<h3>There are " +
200                totalLinks + 
201                " inbound links for this page; here are the first " + 
202                returnedLinkCount +
203                ":</h3><ol>";
204           
205            //process list of inbound links:
206            for (var i=0; i < aResults.length; i++) {
207                html += "<li><strong>" +
208                    aResults[i].Title +
209                    ":</strong> <a href='" +
210                    aResults[i].Url +
211                    "'>" + aResults[i].Url +
212                    "</a></li>";
213            }
214           
215            //close list of inbound links
216            html += "</ol>";
217           
218        } else {//no inbound links exist for this page:
219       
220            var html = "<h3>There are no inbound links for the page specified.</h3>";
221           
222        }
223       
224        //insert string into DOM:
225        elResults.set('innerHTML', html);
226    };
227
228    //suppress default form behavior
229    Y.on("submit", function(e) {
230        e.preventDefault();
231        getSiteExplorerData();
232    }, "#siteExplorer");
233
234});
235
236</script>
237
238<!--END SOURCE CODE FOR EXAMPLE =============================== -->
239
240</body>
241</html>
242<!-- delightfuture.corp.yahoo.com uncompressed/chunked Wed Aug 13 16:45:31 PDT 2008 -->
Note: See TracBrowser for help on using the repository browser.