Содержание

1 Getting a Script Node with JSON Data from a Web Service
2 Getting a Script Node with JSON Data from a Web Service
3 JSON with Connection Manager
- 3.1 Rebuilding class instances from JSON data
4 Rebuilding class instances from JSON data

Getting a Script Node with JSON Data from a Web Service

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Getting a Script Node with JSON Data from a Web Service</title> <style type="text/css"> /*margin and padding on body element

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body {

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/button/assets/skins/sam/button.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yuiloader-dom-event/yuiloader-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/button/button-min.js"></script>

container ol {

 /*bringing lists on to the page with breathing room */
 margin-left:2em !important;

}

container ol li {

 /*giving OL"s LIs generated numbers*/
 list-style: decimal outside !important;

}

container h3 {

 margin-top: 1em;

} </style>

</head> <body class=" yui-skin-sam">

Getting a Script Node with JSON Data from a Web Service

This example employs the <a href="http://developer.yahoo.ru/yui/get/">YUI Get Utility</a> in a simple use case: retrieving JSON data from a cross-domain web service. While this is a relatively common usage, it"s important to understand the security ramifications of this technique. Scripts loaded via the Get Utility (or any other "script node" solution) execute immediately once they are loaded. If you do not fully control (or fully trust) the script"s source, this is not a safe technique and it can put the security of your users" data at risk. (For more information on the dangers of cross-site scripting [XSS] exploits, <a href="http://en.wikipedia.org/wiki/Cross-site_scripting">check out the Wikipedia entry on this subject</a>.)

Here, we will use a trusted Yahoo! Search web service called <a href="http://developer.yahoo.ru/search/siteexplorer/V1/inlinkData.html">Site Explorer</a> to return a list of inbound links for a given URL. The principal difference between this example and similar examples using <a href="http://developer.yahoo.ru/yui/connection/">YUI Connection Manager</a> is that this technique does not require a server-side proxy. The browser connects directly to the third-party web service without bouncing through a proxy page as is required when using the XMLHttpRequest object (on which Connection Manager relies).

   <form method="GET" action="http://siteexplorer.search.yahoo.ru/advsearch" id="siteExplorer">
       <label for="searchString">Site URL:</label> <input type="text" name="p" id="searchString" value="http://developer.yahoo.ru/yui" size="40">
       
       <input type="hidden" name="bwm" value="i">
       <input type="hidden" name="bwms" value="p">
   
       <input type="submit" id="getSiteExplorerData" value="Click here to get JSON data.">
   
   </form>

   //set up some shortcuts in case our typing fingers
   //get lazy:
   var Event = YAHOO.util.Event,
       Dom = YAHOO.util.Dom,
       Button = YAHOO.widget.Button,
       Get = YAHOO.util.Get,
       elResults = Dom.get("results"),
       tIds = {},
       loading = false,
       current = null;
       
   // We use the Get Utility"s success handler in conjunction with
   // the web service callback in order to detect bad responses 
   // from the web service.
   var onSiteExplorerSuccess = function(o) {
       // stop blocking requests
       loading = false;
       // A success response means the script node is inserted.  However, the
       // utility is unable to detect whether or not the content of the script
       // node is correct, or even if there was a bad response (like a 404
       // error).  To get around this, we use the web service callback to
       // verify that the script contents was correct.
       if (o.tId in tIds) {

YAHOO.log("The Get Utility has fired the success handler indicating that the " +

         "requested script has loaded and is ready for use.", "info", "example");
       } else {

YAHOO.log("The Get utility has fired onSuccess but the webservice callback did not " +

         "fire.  We could retry the transaction here, or notify the user of the " +
         "failure.", "info", "example");
       }
   }
   var onSiteExplorerFailure = function(o) {

YAHOO.log("The Get Utility failed.", "info", "example");

   }
   
   //function to retrieve data from Yahoo! Site Explorer web service --
   // http://developer.yahoo.ru/search/siteexplorer/V1/inlinkData.html
   var getSiteExplorerData = function() {
       YAHOO.log("Button clicked; getSiteExplorerData firing.", "info", "example");
       // block multiple requests
       if (loading) {
           return;
       }
       loading = true;
       
       //Load the transitional state of the results section:

elResults.innerHTML = "

Retrieving incoming links for " + Dom.get("searchString").value + ":

" +

           "<img src="http://l.yimg.ru/us.yimg.ru/i/nt/ic/ut/bsc/busybar_1.gif" " +
           "alt="Please wait...">";
       
       //prepare the URL for the Yahoo Site Explorer API:
       var sURL = "http://search.yahooapis.ru/SiteExplorerService/V1/inlinkData?" +
           "appid=3wEDxLHV34HvAU2lMnI51S4Qra5m.baugqoSv4gcRllqqVZm3UrMDZWToMivf5BJ3Mom" +
           "&results=20&output=json&omit_inlinks=domain" +
           "&callback=YAHOO.example.SiteExplorer.callback" +
           "&query=" + encodeURIComponent(Dom.get("searchString").value);
       
       //This simple line is the call to the Get Utility; we pass
       //in the URL and the configuration object, which in this case
       //consists merely of our success and failure callbacks:
       var transactionObj = Get.script(sURL, {
           onSuccess: onSiteExplorerSuccess,
           onFailure: onSiteExplorerFailure,
           scope    : this
       });
       
       //The script method returns a single-field object containing the
       //tranaction id:
       YAHOO.log("Get Utility transaction started; transaction object: " + YAHOO.lang.dump(transactionObj), "info", "example");
       // keep track of the current transaction id.  The transaction will be
       // considered complete only if the web service callback is executed.
       current = transactionObj.tId; 
   }
   return {
       init: function() {
               
           //suppress default form behavior
           Event.on("siteExplorer", "submit", function(e) {
               Event.preventDefault(e);
               getSiteExplorerData();
           }, this, true);
       
           //instantiate Button:
           var oButton = new Button("getSiteExplorerData");
           YAHOO.log("Button instantiated.", "info", "example");
       },
       callback: function(results) {
           YAHOO.log("Web service returned data to YAHOO.example.SiteExplorer.callback; beginning to process.", "info", "example");
           // Mark the transaction as complete.  This will be checked by the onSuccess
           // handler to determine if the transaction really succeeded.
           tIds[current] = true;
           
           //work with the returned data to extract meaningful fields:
           var aResults = results.ResultSet.Result;
           var totalLinks = results.ResultSet.totalResultsAvailable;
           var returnedLinkCount = results.ResultSet.totalResultsReturned;
           
           if(aResults) {//there are inbound links; process and display them:
           
               //write header and open list of inbound links:

var html = "

There are " + totalLinks + " inbound links for this page; here are the first " + returnedLinkCount + ":

               //process list of inbound links:
               for (var i=0; i < aResults.length; i++) {

" + aResults[i].Title + ": <a href="" + aResults[i].Url + "">" + aResults[i].Url + "</a>

               }
               
               //close list of inbound links

";

           } else {//no inbound links exist for this page:

var html = "

There are no inbound links for the page specified.</h3"; } //insert string into DOM: elResults.innerHTML = html; } } }(); //Initialize the example when the DOM is completely loaded: YAHOO.util.Event.onDOMReady( YAHOO.example.SiteExplorer.init, YAHOO.example.SiteExplorer, //pass this object to init and... true); //...run init in the passed object"s //scope </script> </body> </html> </source> <A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>

JSON with Connection Manager

   <source lang="html4strict">

<head>

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>JSON with Connection Manager</title> <style type="text/css"> /*margin and padding on body element

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body {

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/json/json-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/connection/connection-min.js"></script>

</head> <body class=" yui-skin-sam">

JSON with Connection Manager

A natural fit for the JSON Utility is working with the <a href="http://developer.yahoo.ru/yui/connection/">Connection Manager</a>. In this example, we"ll request JSON data from the server using Connection Manager"s asyncRequest and parse the resulting JSON string data for processing.

Click the Get Messages button to send the request to the server.

   <input type="button" id="demo_btn" value="Get Messages">

   // Get the div element in which to report messages from the server
   var msg_section = YAHOO.util.Dom.get("demo_msg");
   msg_section.innerHTML = "";
   // Define the callbacks for the asyncRequest
   var callbacks = {
       success : function (o) {
           YAHOO.log("RAW JSON DATA: " + o.responseText);
           // Process the JSON data returned from the server
           var messages = [];
           try {
               messages = YAHOO.lang.JSON.parse(o.responseText);
           }
           catch (x) {
               alert("JSON Parse failed!");
               return;
           }
           YAHOO.log("PARSED DATA: " + YAHOO.lang.dump(messages));
           // The returned data was parsed into an array of objects.
           // Add a P element for each received message
           for (var i = 0, len = messages.length; i < len; ++i) {
               var m = messages[i];
               var p = document.createElement("p");
               var message_text = document.createTextNode(
                       m.animal + " says "" + m.message + """);
               p.appendChild(message_text);
               msg_section.appendChild(p);
           }
       },
       failure : function (o) {
           if (!YAHOO.util.Connect.isCallInProgress(o)) {
               alert("Async call failed!");
           }
       },
       timeout : 3000
   }
   // Make the call to the server for JSON data
   YAHOO.util.Connect.asyncRequest("GET","yui_2.7.0b-assets/json-assets/jsonConnect.php", callbacks);

}); </script>

</body>

 </source>

Rebuilding class instances from JSON data

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Rebuilding class instances from JSON data</title> <style type="text/css"> /*margin and padding on body element

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body {

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/json/json-min.js"></script>

demo textarea {

   background: #fff;
   border: 1px solid #ccc;
   display: block;
   margin: 1em;
   padding: 1em;
   width: 80%;
   height: 50px;

} </style>

</head> <body class=" yui-skin-sam">

Rebuilding class instances from JSON data

This example illustrates one method of serializing and recreating class instances by using the replacer and reviver parameters to JSON.stringify and JSON.parse respectively.

   <button type="button" id="demo_freeze">Freeze</button>
   <button type="button" id="demo_thaw" disabled="disabled">Thaw</button>
   <textarea id="demo_frozen">(stringify results here)</textarea>

   Dom   = YAHOO.util.Dom,
   JSON  = YAHOO.lang.JSON,
   Demo;

Demo = YAHOO.namespace("demo").FreezeThaw = {

   data       : null,
   jsonString : null,
   cryo : function (k,o) {
       return (o instanceof CaveMan) ? CaveMan.freeze(o) : o;
   },
   revive : function (k,v) {
       // Turn anything that looks like a UTC date string into a Date instance
       if (typeof v === "string") {
           return JSON.stringToDate(v);;
       }
       // Check for cavemen by the _class key
       if (v instanceof Object && v._class == "CaveMan") {
           return CaveMan.thaw(v);
       }
       // default to returning the value unaltered
       return v;
   }

}; function CaveMan(name,discovered) {

   this.name       = name;
   this.discovered = discovered;

}; CaveMan.prototype.getName = function () {

   return this.name + ", the cave man";

} // Static methods to convert to and from a basic object structure CaveMan.thaw = function (o) {

   return new CaveMan(o.n, o.d);

}; // Convert to a basic object structure including a class identifier CaveMan.freeze = function (cm) {

   return {
       _class : "CaveMan",
       n : cm.name,
       d : cm.discovered // remains a Date for standard JSON serialization
   };

}; Demo.data = {

   count : 1,
   type  : "Hominid",
   specimen : [
       new CaveMan("Ed",new Date(1946,6,6))
   ]

}; Event.on("demo_freeze","click",function (e) {

   Demo.jsonString = JSON.stringify(Demo.data, Demo.cryo);
   Dom.get("demo_frozen").value = Demo.jsonString;
   Dom.get("demo_thaw").disabled = false;

}); Event.on("demo_thaw","click",function (e) {

   var parsedData = JSON.parse(Demo.jsonString, Demo.revive);
       cm = parsedData.specimen[0];
   Dom.get("demo_thawed").innerHTML =

"

Specimen count: " + parsedData.count + "

"+ "

Specimen type: " + parsedData.type + "

"+ "

Instanceof CaveMan: " + (cm instanceof CaveMan) + "

"+ "

Name: " + cm.getName() + "

"+ "

Discovered: " + cm.discovered + "

";

}); }); </script>

</body> </html>

 </source>

JavaScript DHTML/YUI Library/JSON

Содержание