src/cm/media/js/lib/yui/yui_3.0.0b1/examples/get/get-script-basic.html
changeset 0 40c8f766c9b8
equal deleted inserted replaced
-1:000000000000 0:40c8f766c9b8
       
     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 &amp; 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 	<div id="bar-note"><p><strong>Note:</strong> This is YUI 3.x. Looking for <a href="http://developer.yahoo.com/yui/">YUI 2.x</a>?</p></div>
       
    60 
       
    61 	<div id="yui-main">
       
    62 		<div class="yui-b">
       
    63 		  <div class="yui-ge">
       
    64 			  <div class="yui-u first example" id="main">
       
    65 
       
    66 	<h2>Get: Getting a Script Node with JSON Data</h2>
       
    67 
       
    68 	<div id="example" class="promo">
       
    69 	<p>
       
    70 	<p>This example employs the <a href="http://developer.yahoo.com/yui/3/get/">YUI
       
    71 Get Utility</a> in a simple use case: retrieving JSON data from a cross-domain
       
    72 web service. While this is a relatively common usage, it's important to
       
    73 understand the security ramifications of this technique. Scripts loaded via the
       
    74 Get Utility (or any other &quot;script node&quot; solution) execute immediately
       
    75 once they are loaded. If you do not fully control (or fully trust) the script's
       
    76 source, this is not a safe technique and it can put the security of your users'
       
    77 data at risk. (For more information on the dangers of cross-site scripting
       
    78 [XSS] exploits, <a
       
    79 href="http://en.wikipedia.org/wiki/Cross-site_scripting">check out the
       
    80 Wikipedia entry on this subject</a>.)</p> <p>Here, we will use a trusted Yahoo!
       
    81 Search web service called <a
       
    82 href="http://developer.yahoo.com/search/siteexplorer/V1/inlinkData.html">Site
       
    83 Explorer</a> to return a list of inbound links for a given URL. The principal
       
    84 difference between this example and similar examples using <a
       
    85 href="http://developer.yahoo.com/yui/3/io/">YUI IO Utility</a> is
       
    86 that this technique does not require a server-side proxy. The browser connects
       
    87 directly to the third-party web service without bouncing through a proxy page
       
    88 as is required when using the XMLHttpRequest object (on which IO Utility
       
    89 relies).</p>
       
    90 	</p>	
       
    91 
       
    92 	<div class="module example-container ">
       
    93 			<div class="hd exampleHd">
       
    94 			<p class="newWindowButton yui-skin-sam">
       
    95                 <a href="get-script-basic_clean.html" target="_blank">View example in new window.</a>
       
    96             </p>
       
    97 		</div>		<div id="example-canvas" class="bd">
       
    98 
       
    99 		
       
   100 	<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
       
   101 	
       
   102 	<div id="container">
       
   103 
       
   104     <!--Use a real form that works without JavaScript:-->
       
   105     <form method="GET" action="http://siteexplorer.search.yahoo.com/advsearch" id="siteExplorer">
       
   106 
       
   107         <label for="searchString">Site URL:</label> <input type="text" name="p" id="searchString" value="http://developer.yahoo.com/yui" size="40">
       
   108         
       
   109         <input type="hidden" name="bwm" value="i">
       
   110         <input type="hidden" name="bwms" value="p">
       
   111     
       
   112         <input type="submit" id="siteExplorerData" value="Click here to get JSON data.">
       
   113     
       
   114     </form>
       
   115 
       
   116     <div id="results">
       
   117         <!--JSON output will be written to the DOM here-->
       
   118         
       
   119     </div>
       
   120 </div>
       
   121 
       
   122 <script type="text/javascript">
       
   123 
       
   124 YUI({base:"../../build/", timeout: 10000, filter:"debug", logInclude: {get:true, event:true, example:true}}).use("node", "dump",
       
   125 
       
   126 function(Y) { 
       
   127 
       
   128     // We are going to create a global variable to get the 
       
   129     // data back from the web service
       
   130     MyNamespace = YUI.namespace('example.SiteExplorer');
       
   131 
       
   132     var elResults = Y.get("#results"),
       
   133         tIds = {},
       
   134         loading = false,
       
   135         current = null;
       
   136         
       
   137     // We use the Get Utility's success handler in conjunction with
       
   138     // the web service callback in order to detect bad responses 
       
   139     // from the web service.
       
   140     var onSiteExplorerSuccess = function(o) {
       
   141 
       
   142         // stop blocking requests
       
   143         loading = false;
       
   144 
       
   145         // A success response means the script node is inserted.  However, the
       
   146         // utility is unable to detect whether or not the content of the script
       
   147         // node is correct, or even if there was a bad response (like a 404
       
   148         // error).  To get around this, we use the web service callback to
       
   149         // verify that the script contents was correct.
       
   150         if (o.tId in tIds) {
       
   151 Y.log("The Get Utility has fired the success handler indicating that the " +
       
   152           "requested script has loaded and is ready for use.", "info", "example");
       
   153         } else {
       
   154 Y.log("The Get utility has fired onSuccess but the webservice callback did not " +
       
   155           "fire.  We could retry the transaction here, or notify the user of the " +
       
   156           "failure.", "info", "example");
       
   157         }
       
   158 
       
   159     };
       
   160 
       
   161     var onSiteExplorerFailure = function(o) {
       
   162 Y.log("The Get Utility failed.", "info", "example");
       
   163     };
       
   164 
       
   165     var onSiteExplorerTimeout = function(o) {
       
   166 Y.log("The Get Utility timed out.", "info", "example");
       
   167     };
       
   168     
       
   169     //function to retrieve data from Yahoo! Site Explorer web service --
       
   170     // http://developer.yahoo.com/search/siteexplorer/V1/inlinkData.html
       
   171     var getSiteExplorerData = function() {
       
   172         Y.log("Button clicked; getSiteExplorerData firing.", "info", "example");
       
   173 
       
   174         // block multiple requests
       
   175         if (loading) {
       
   176             return;
       
   177         }
       
   178         loading = true;
       
   179         
       
   180         //Load the transitional state of the results section:
       
   181         elResults.set("innerHTML", "<h3>Retrieving incoming links for " +
       
   182             Y.get("#searchString").get('value') + ":</h3>" +
       
   183             "<img src='http://l.yimg.com/a/i/nt/ic/ut/bsc/busybar_1.gif' " +
       
   184             "alt='Please wait...'>");
       
   185         
       
   186         //prepare the URL for the Yahoo Site Explorer API:
       
   187         var sURL = "http://search.yahooapis.com/SiteExplorerService/V1/inlinkData?" +
       
   188             "appid=3wEDxLHV34HvAU2lMnI51S4Qra5m.baugqoSv4gcRllqqVZm3UrMDZWToMivf5BJ3Mom" +
       
   189             "&results=20&output=json&omit_inlinks=domain" +
       
   190             "&callback=MyNamespace.callback" +
       
   191             "&query=" + encodeURIComponent(Y.get("#searchString").get('value'));
       
   192         
       
   193         //This simple line is the call to the Get Utility; we pass
       
   194         //in the URL and the configuration object, which in this case
       
   195         //consists merely of our success and failure callbacks:
       
   196         var transactionObj = Y.Get.script(sURL, {
       
   197             onSuccess: onSiteExplorerSuccess,
       
   198             onFailure: onSiteExplorerFailure,
       
   199             onTimeout: onSiteExplorerTimeout,
       
   200             timeout: 20000,
       
   201             context: Y
       
   202         });
       
   203         
       
   204         //The script method returns a single-field object containing the
       
   205         //tranaction id:
       
   206         Y.log("Get Utility transaction started; transaction object: " + Y.dump(transactionObj), "info", "example");
       
   207 
       
   208         // keep track of the current transaction id.  The transaction will be
       
   209         // considered complete only if the web service callback is executed.
       
   210         current = transactionObj.tId; 
       
   211     };
       
   212 
       
   213     MyNamespace.callback = function(results) {
       
   214         Y.log("Web service returned data to Y.example.SiteExplorer.callback; beginning to process.", "info", "example");
       
   215 
       
   216         // Mark the transaction as complete.  This will be checked by the onSuccess
       
   217         // handler to determine if the transaction really succeeded.
       
   218         tIds[current] = true;
       
   219         
       
   220         //work with the returned data to extract meaningful fields:
       
   221         var aResults = results.ResultSet.Result;
       
   222         var totalLinks = results.ResultSet.totalResultsAvailable;
       
   223         var returnedLinkCount = results.ResultSet.totalResultsReturned;
       
   224         
       
   225         if(aResults) {//there are inbound links; process and display them:
       
   226         
       
   227             //write header and open list of inbound links:          
       
   228             var html = "<h3>There are " +
       
   229                 totalLinks + 
       
   230                 " inbound links for this page; here are the first " + 
       
   231                 returnedLinkCount +
       
   232                 ":</h3><ol>";
       
   233             
       
   234             //process list of inbound links:
       
   235             for (var i=0; i < aResults.length; i++) {
       
   236                 html += "<li><strong>" +
       
   237                     aResults[i].Title +
       
   238                     ":</strong> <a href='" +
       
   239                     aResults[i].Url +
       
   240                     "'>" + aResults[i].Url +
       
   241                     "</a></li>";
       
   242             }
       
   243             
       
   244             //close list of inbound links
       
   245             html += "</ol>";
       
   246             
       
   247         } else {//no inbound links exist for this page:
       
   248         
       
   249             var html = "<h3>There are no inbound links for the page specified.</h3>";
       
   250             
       
   251         }
       
   252         
       
   253         //insert string into DOM:
       
   254         elResults.set('innerHTML', html);
       
   255     };
       
   256 
       
   257     //suppress default form behavior
       
   258     Y.on("submit", function(e) {
       
   259         e.preventDefault();
       
   260         getSiteExplorerData();
       
   261     }, "#siteExplorer");
       
   262 
       
   263 });
       
   264 
       
   265 </script>
       
   266 	
       
   267 	<!--END SOURCE CODE FOR EXAMPLE =============================== -->
       
   268 	
       
   269 		
       
   270 		</div>
       
   271 	</div>			
       
   272 	</div>
       
   273 		
       
   274 	<h2 class="first">Using the Get Utility to Get a Script File with JSON-formatted Contents</h2>
       
   275 
       
   276 <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>
       
   277 
       
   278 <p>This example has the following dependencies:</p>
       
   279 
       
   280 <textarea name="code" class="HTML" cols="60" rows="1"><script type="text/javascript" src="http://yui.yahooapis.com/3.0.0b1/build/yui/yui-min.js"></script>
       
   281 
       
   282 <p>First, we create a plain HTML form that will work for users who do not have JavaScript enabled:</p>
       
   283 
       
   284 <textarea name="code" class="HTML" cols="60" rows="1"><div id="container">
       
   285 
       
   286 	<!--Use a real form that works without JavaScript:-->
       
   287 	<form method="GET" action="http://siteexplorer.search.yahoo.com/advsearch" id="siteExplorer">
       
   288 
       
   289         <label for="searchString">Site URL:</label> <input type="text" name="searchString" id="p" value="http://developer.yahoo.com/yui" size="40">
       
   290         
       
   291         <input type="hidden" name="bwm" value="i">
       
   292         <input type="hidden" name="bwms" value="p">
       
   293     
       
   294         <input type="submit" id="siteExplorerButton" value="Click here to get JSON data.">
       
   295     
       
   296     </form>
       
   297 
       
   298 	<div id="results">
       
   299     	<!--JSON output will be written to the DOM here-->
       
   300         
       
   301     </div>
       
   302 </div></textarea>
       
   303 
       
   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   <textarea name="code" class="JScript" cols="60" rows="1">//function to retrieve data from Yahoo!
       
   319   Site Explorer web service --
       
   320 // http://developer.yahoo.com/search/siteexplorer/V1/inlinkData.html
       
   321 
       
   322 var getSiteExplorerData = function() {
       
   323     Y.log("Button clicked; getSiteExplorerData firing.", "info", "example");
       
   324 
       
   325     // block multiple requests
       
   326     if (loading) {
       
   327         return;
       
   328     }
       
   329     loading = true;
       
   330     
       
   331     //Load the transitional state of the results section:
       
   332     elResults.set("innerHTML", "<h3>Retrieving incoming links for " +
       
   333         Y.get("#searchString").get('value') + ":</h3>" +
       
   334         "<img src='http://l.yimg.com/a/i/nt/ic/ut/bsc/busybar_1.gif' " +
       
   335         "alt='Please wait...'>");
       
   336     
       
   337     //prepare the URL for the Yahoo Site Explorer API:
       
   338     var sURL = "http://search.yahooapis.com/SiteExplorerService/V1/inlinkData?" +
       
   339         "appid=3wEDxLHV34HvAU2lMnI51S4Qra5m.baugqoSv4gcRllqqVZm3UrMDZWToMivf5BJ3Mom" +
       
   340         "&results=20&output=json&omit_inlinks=domain" +
       
   341         "&callback=MyNamespace.callback" +
       
   342         "&query=" + encodeURIComponent(Y.get("#searchString").get('value'));
       
   343     
       
   344     //This simple line is the call to the Get Utility; we pass
       
   345     //in the URL and the configuration object, which in this case
       
   346     //consists merely of our success and failure callbacks:
       
   347     var transactionObj = Y.Get.script(sURL, {
       
   348         onSuccess: onSiteExplorerSuccess,
       
   349         onFailure: onSiteExplorerFailure,
       
   350         onTimeout: onSiteExplorerTimeout,
       
   351         timeout: 20000,
       
   352         context: Y
       
   353     });
       
   354     
       
   355     //The script method returns a single-field object containing the
       
   356     //tranaction id:
       
   357     Y.log("Get Utility transaction started; transaction object: " + Y.dump(transactionObj), "info", "example");
       
   358 
       
   359     // keep track of the current transaction id.  The transaction will be
       
   360     // considered complete only if the web service callback is executed.
       
   361     current = transactionObj.tId; 
       
   362 };
       
   363 </textarea>
       
   364 </p>
       
   365 <p>The full JavaScript codeblock for this example reads as follows:</p>
       
   366 <textarea name="code" class="JScript" cols="60" rows="1">// We are going to create a global variable to get the 
       
   367 // data back from the web service
       
   368 MyNamespace = YUI.namespace('example.SiteExplorer');
       
   369 
       
   370 var elResults = Y.get("#results"),
       
   371     tIds = {},
       
   372     loading = false,
       
   373     current = null;
       
   374     
       
   375 // We use the Get Utility's success handler in conjunction with
       
   376 // the web service callback in order to detect bad responses 
       
   377 // from the web service.
       
   378 var onSiteExplorerSuccess = function(o) {
       
   379 
       
   380     // stop blocking requests
       
   381     loading = false;
       
   382 
       
   383     // A success response means the script node is inserted.  However, the
       
   384     // utility is unable to detect whether or not the content of the script
       
   385     // node is correct, or even if there was a bad response (like a 404
       
   386     // error).  To get around this, we use the web service callback to
       
   387     // verify that the script contents was correct.
       
   388     if (o.tId in tIds) {
       
   389 Y.log("The Get Utility has fired the success handler indicating that the " +
       
   390       "requested script has loaded and is ready for use.", "info", "example");
       
   391     } else {
       
   392 Y.log("The Get utility has fired onSuccess but the webservice callback did not " +
       
   393       "fire.  We could retry the transaction here, or notify the user of the " +
       
   394       "failure.", "info", "example");
       
   395     }
       
   396 
       
   397 };
       
   398 
       
   399 var onSiteExplorerFailure = function(o) {
       
   400 Y.log("The Get Utility failed.", "info", "example");
       
   401 };
       
   402 
       
   403 var onSiteExplorerTimeout = function(o) {
       
   404 Y.log("The Get Utility timed out.", "info", "example");
       
   405 };
       
   406 
       
   407 //function to retrieve data from Yahoo! Site Explorer web service --
       
   408 // http://developer.yahoo.com/search/siteexplorer/V1/inlinkData.html
       
   409 var getSiteExplorerData = function() {
       
   410     Y.log("Button clicked; getSiteExplorerData firing.", "info", "example");
       
   411 
       
   412     // block multiple requests
       
   413     if (loading) {
       
   414         return;
       
   415     }
       
   416     loading = true;
       
   417     
       
   418     //Load the transitional state of the results section:
       
   419     elResults.set("innerHTML", "<h3>Retrieving incoming links for " +
       
   420         Y.get("#searchString").get('value') + ":</h3>" +
       
   421         "<img src='http://l.yimg.com/a/i/nt/ic/ut/bsc/busybar_1.gif' " +
       
   422         "alt='Please wait...'>");
       
   423     
       
   424     //prepare the URL for the Yahoo Site Explorer API:
       
   425     var sURL = "http://search.yahooapis.com/SiteExplorerService/V1/inlinkData?" +
       
   426         "appid=3wEDxLHV34HvAU2lMnI51S4Qra5m.baugqoSv4gcRllqqVZm3UrMDZWToMivf5BJ3Mom" +
       
   427         "&results=20&output=json&omit_inlinks=domain" +
       
   428         "&callback=MyNamespace.callback" +
       
   429         "&query=" + encodeURIComponent(Y.get("#searchString").get('value'));
       
   430     
       
   431     //This simple line is the call to the Get Utility; we pass
       
   432     //in the URL and the configuration object, which in this case
       
   433     //consists merely of our success and failure callbacks:
       
   434     var transactionObj = Y.Get.script(sURL, {
       
   435         onSuccess: onSiteExplorerSuccess,
       
   436         onFailure: onSiteExplorerFailure,
       
   437         onTimeout: onSiteExplorerTimeout,
       
   438         timeout: 20000,
       
   439         context: Y
       
   440     });
       
   441     
       
   442     //The script method returns a single-field object containing the
       
   443     //tranaction id:
       
   444     Y.log("Get Utility transaction started; transaction object: " + Y.dump(transactionObj), "info", "example");
       
   445 
       
   446     // keep track of the current transaction id.  The transaction will be
       
   447     // considered complete only if the web service callback is executed.
       
   448     current = transactionObj.tId; 
       
   449 };
       
   450 
       
   451 MyNamespace.callback = function(results) {
       
   452     Y.log("Web service returned data to Y.example.SiteExplorer.callback; beginning to process.", "info", "example");
       
   453 
       
   454     // Mark the transaction as complete.  This will be checked by the onSuccess
       
   455     // handler to determine if the transaction really succeeded.
       
   456     tIds[current] = true;
       
   457     
       
   458     //work with the returned data to extract meaningful fields:
       
   459     var aResults = results.ResultSet.Result;
       
   460     var totalLinks = results.ResultSet.totalResultsAvailable;
       
   461     var returnedLinkCount = results.ResultSet.totalResultsReturned;
       
   462     
       
   463     if(aResults) {//there are inbound links; process and display them:
       
   464     
       
   465         //write header and open list of inbound links:          
       
   466         var html = "<h3>There are " +
       
   467             totalLinks + 
       
   468             " inbound links for this page; here are the first " + 
       
   469             returnedLinkCount +
       
   470             ":</h3><ol>";
       
   471         
       
   472         //process list of inbound links:
       
   473         for (var i=0; i < aResults.length; i++) {
       
   474             html += "<li><strong>" +
       
   475                 aResults[i].Title +
       
   476                 ":</strong> <a href='" +
       
   477                 aResults[i].Url +
       
   478                 "'>" + aResults[i].Url +
       
   479                 "</a></li>";
       
   480         }
       
   481         
       
   482         //close list of inbound links
       
   483         html += "</ol>";
       
   484         
       
   485     } else {//no inbound links exist for this page:
       
   486     
       
   487         var html = "<h3>There are no inbound links for the page specified.</h3>";
       
   488         
       
   489     }
       
   490     
       
   491     //insert string into DOM:
       
   492     elResults.set('innerHTML', html);
       
   493 };
       
   494 
       
   495 //suppress default form behavior
       
   496 Y.on("submit", function(e) {
       
   497     e.preventDefault();
       
   498     getSiteExplorerData();
       
   499 }, "#siteExplorer");
       
   500 </textarea>
       
   501 				</div>
       
   502 				<div class="yui-u sidebar">
       
   503 					
       
   504 				
       
   505 					<div id="examples" class="mod box4">
       
   506                         <div class="hd">
       
   507 						<h4>
       
   508     Get Examples:</h4>
       
   509                         </div>
       
   510 						<div class="bd">
       
   511 							<ul>
       
   512 								<li class='selected'><a href='../get/get-script-basic.html'>Getting a Script Node with JSON Data</a></li>							</ul>
       
   513 						</div>
       
   514 					</div>
       
   515 					
       
   516 					<div class="mod box4">
       
   517                         <div class="hd">
       
   518 						<h4>More Get Resources:</h4>
       
   519                         </div>
       
   520                         <div class="bd">
       
   521 						<ul>
       
   522 							<!-- <li><a href="http://developer.yahoo.com/yui/get/">User's Guide</a> (external)</li> -->
       
   523 						<li><a href="../../api/module_get.html">API Documentation</a></li>
       
   524                             
       
   525                             
       
   526 							<li><a href="http://yuiblog.com/assets/pdf/cheatsheets/get.pdf">Cheat Sheet PDF</a> (external)</li></ul>
       
   527                         </div>
       
   528 					</div>
       
   529 			  </div>
       
   530 		</div>
       
   531 		
       
   532 		</div>
       
   533 	</div>
       
   534 
       
   535 
       
   536 <div class="yui-b toc3" id="tocWrapper">
       
   537 <!-- TABLE OF CONTENTS -->
       
   538 <div id="toc">
       
   539 	
       
   540 <ul>
       
   541 <li class="sect first">YUI 3.x Project</li><li class="item"><a title="The Yahoo! User Interface (YUI) Library, 3.x Branch, " href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site (external)</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="The YUI Library can be downloaded from SourceForge" href="http://sourceforge.net/projects/yui/">YUI 3 on Sourceforge (external)</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/3/license.html">YUI License (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI (Global Prerequisite) - Functional Examples" href="../../examples/yui/index.html">YUI (Global Prerequisite)</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin</a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget</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="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</a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource</a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType</a></li><li class="item"><a title="Drag &amp; Drop - Functional Examples" href="../../examples/dd/index.html">Drag &amp; Drop</a></li><li class="selected "><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="History - Functional Examples" href="../../examples/history/index.html">History</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="Queue - Functional Examples" href="../../examples/queue/index.html">Queue</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</a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider</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</a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin</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</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">The YUI Community</li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="item"><a title="The Yahoo! Group YDN-JavaScript hosts the YUI community forum" href="http://tech.groups.yahoo.com/group/ydn-javascript/">YUI Forum (external)</a></li><li class="item"><a title="The Yahoo! Group yui3 is dedicated to the 3.x branch of the Yahoo! User Interface (YUI) Library." href="http://tech.groups.yahoo.com/group/yui3/">YUI 3 Forum (external)</a></li><li class="item"><a title="YUI is used by Yahoo! and by hundreds of other sites, including many you know and love." href="/yui/poweredby/">YUI Sightings (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li><li class="sect">YUI Articles on the YUI Website</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Reporting Bugs and Making Feature Requests for YUI Components" href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests (external)</a></li><li class="item"><a title="Serve YUI source files from Yahoo! -- free, fast, and simple" href="http://developer.yahoo.com/yui/3/articles/hosting/">Serving YUI Files from Yahoo! (external)</a></li></ul>
       
   542 </div>
       
   543 </div>
       
   544 	</div><!--closes bd-->
       
   545 
       
   546 	<div id="ft">
       
   547         <p class="first">Copyright &copy; 2009 Yahoo! Inc. All rights reserved.</p>
       
   548         <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
       
   549             <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
       
   550             <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
       
   551             <a href="http://careers.yahoo.com/">Job Openings</a></p>
       
   552 	</div>
       
   553 </div>
       
   554 <script src="../../assets/dpSyntaxHighlighter.js"></script>
       
   555 <script language="javascript"> 
       
   556 dp.SyntaxHighlighter.HighlightAll('code'); 
       
   557 </script>
       
   558 </body>
       
   559 </html>