YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: DataSource Utility: DataSource.IO

## DataSource Utility: DataSource.IO

Accessing data from a server is easy with DataSource.IO, which uses the IO Utility to retrieve data over HTTP. A DataSchema plugin is used to normalize incoming data into a known format for consistency of usage by other components.

View example in new window.

#### JSON

###### Data

    {
        "ResultSet": {
            "type":"web",
            "totalResultsAvailable":391000000,
            "totalResultsReturned":10,
            "firstResultPosition":1,
            ...
            "Result":[
                {"Title":"Madonna","Summary":"Official site of pop diva
                    Madonna, with news, music, media, and fan club.",
                    "Url":"http:\/\/www.madonna.com\/", ...,
                    "Size":"145030"}},
                {"Title":"Madonna - MySpace","Summary":"Madonna MySpace
                    page features news, blog, music downloads, desktops,
                    wallpapers, and more.",
                    "Url":"http:\/\/www.myspace.com\/madonna",
                    ..., "Size":"110365"}},
                {"Title":"YouTube - madonna's Channel",
                    "Summary":"The Official Madonna YouTube Channel.
                    Want to Subscribe? ... http:\/\/www.youtube.com\/Madonna.
                    Sharing Options There are 3 ways to share this channel.",
                    "Url":"http:\/\/youtube.com\/madonna", ...,
                    "Size":"49955"}},
                ...
            ]
        }
    }

###### Schema

    {
        resultListLocator: "ResultSet.Result",
        resultFields: ["Title"]
    }

###### Normalized data

#### XML

###### Data

    <query xmlns:yahoo="http://www.yahooapis.com/v1/base.rng"
        yahoo:count="10" ...>
        <diagnostics>
            ...
        </diagnostics>
        <results>
            <result xmlns="http://www.inktomi.com/">
                ...
                <dispurl>
                    <![CDATA[www.<b>madonna.com</b>]]>
                </dispurl>
                <size>144947</size>
                <title>
                    <![CDATA[<b>madonna</b>.com home]]>
                </title>
                <url>http://www.madonna.com/</url>
            </result>
            <result xmlns="http://www.inktomi.com/">
                ...
                <dispurl>
                    <![CDATA[<b>en.wikipedia.org</b>/wiki/<wbr>
                    <b>Madonna</b>_(entertainer)]]>
                </dispurl>
                <size>450316</size>
                <title>
                    <![CDATA[<b>Madonna</b> (Entertainer) - Wikipedia]]>
                </title>
                <url>http://en.wikipedia.org/wiki/Madonna_(entertainer)</url>
            </result>
            <result xmlns="http://www.inktomi.com/">
                ...
                <dispurl>
                    <![CDATA[www.<b>myspace.com</b>/<b>madonna</b>]]>
                </dispurl>
                <size>110851</size>
                <title>
                    <![CDATA[<b>Madonna</b> - MySpace]]>
                </title>
                <url>http://www.myspace.com/madonna</url>
            </result>
            ...
        </results>
    </query>

###### Schema

    {
        resultListLocator: "result",
        resultFields: [{key:"title", locator:"*[local-name() ='title']"}]
    }

###### Normalized data

If your server returns JSON data, use a DataSourceJSONSchema plugin to parse the data against a schema that you provide:

    YUI().use("datasource-io", "datasource-jsonschema", function(Y) {    var myDataSource = new Y.DataSource.IO({source:"ysearch_json_madonna.php"}),        myCallback = {            success: function(e){                alert(e.response);            },            failure: function(e){                alert("Could not retrieve data: " + e.error.message);            }        };     myDataSource.plug(Y.Plugin.DataSourceJSONSchema, {        schema: {            resultListLocator: "ResultSet.Result",            resultFields: ["Title"]        }    });     // This request string will get appended to the URI    myDataSource.sendRequest("?output=json", myCallback);});

    YUI().use("datasource-io", "datasource-jsonschema", function(Y) {
        var myDataSource = new Y.DataSource.IO({source:"ysearch_json_madonna.php"}),
            myCallback = {
                success: function(e){
                    alert(e.response);
                },
                failure: function(e){
                    alert("Could not retrieve data: " + e.error.message);
                }
            };

        myDataSource.plug(Y.Plugin.DataSourceJSONSchema, {
            schema: {
                resultListLocator: "ResultSet.Result",
                resultFields: ["Title"]
            }
        });

        // This request string will get appended to the URI
        myDataSource.sendRequest("?output=json", myCallback);
    });

YUI().use("datasource-io", "datasource-jsonschema", function(Y) { var myDataSource = new Y.DataSource.IO({source:"ysearch_json_madonna.php"}), myCallback = { success: function(e){ alert(e.response); }, failure: function(e){ alert("Could not retrieve data: " + e.error.message); } }; myDataSource.plug(Y.Plugin.DataSourceJSONSchema, { schema: { resultListLocator: "ResultSet.Result", resultFields: ["Title"] } }); // This request string will get appended to the URI myDataSource.sendRequest("?output=json", myCallback); });

On the other hand, a DataSourceXMLSchema plugin can be used to parse XML data coming from your server:

    YUI().use("datasource-io", "datasource-xmlschema", function(Y) {    var myDataSource = new Y.DataSource.IO({source:"ysearch_xml_madonna.php"}),        myCallback = {            success: function(e){                alert(e.response);            },            failure: function(e){                alert("Could not retrieve data: " + e.error.message);            }        };     myDataSource.plug(Y.Plugin.DataSourceXMLSchema, {        schema: {            resultListLocator: "result",            resultFields: [{key:"title", locator:"*[local-name() ='title']"}]        }    });     // This request string will be appended to the POST body    myDataSource.sendRequest("output=xml", myCallback, {method:"post"});});

    YUI().use("datasource-io", "datasource-xmlschema", function(Y) {
        var myDataSource = new Y.DataSource.IO({source:"ysearch_xml_madonna.php"}),
            myCallback = {
                success: function(e){
                    alert(e.response);
                },
                failure: function(e){
                    alert("Could not retrieve data: " + e.error.message);
                }
            };

        myDataSource.plug(Y.Plugin.DataSourceXMLSchema, {
            schema: {
                resultListLocator: "result",
                resultFields: [{key:"title", locator:"*[local-name() ='title']"}]
            }
        });

        // This request string will be appended to the POST body
        myDataSource.sendRequest("output=xml", myCallback, {method:"post"});
    });

YUI().use("datasource-io", "datasource-xmlschema", function(Y) { var myDataSource = new Y.DataSource.IO({source:"ysearch_xml_madonna.php"}), myCallback = { success: function(e){ alert(e.response); }, failure: function(e){ alert("Could not retrieve data: " + e.error.message); } }; myDataSource.plug(Y.Plugin.DataSourceXMLSchema, { schema: { resultListLocator: "result", resultFields: [{key:"title", locator:"*[local-name() ='title']"}] } }); // This request string will be appended to the POST body myDataSource.sendRequest("output=xml", myCallback, {method:"post"}); });

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings