YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: DataSource Utility: DataSource.IO

Note: This is YUI 3.x. Looking for YUI 2.x?

## 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:"assets/php/ysearch_json_madonna.php"}), myCallback = { success: function(e){ alert(e.response); }, failure: function(e){ alert("Could not retrieve data: " + e.error.message); } }; myDataSource.plug({fn: Y.Plugin.DataSourceJSONSchema, cfg: { schema: { resultListLocator: "ResultSet.Result", resultFields: ["Title"] } }}); myDataSource.sendRequest(null, 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:"assets/php/ysearch_xml_madonna.php"}), myCallback = { success: function(e){ alert(e.response); }, failure: function(e){ alert("Could not retrieve data: " + e.error.message); } }; myDataSource.plug({fn: Y.Plugin.DataSourceXMLSchema, cfg: { schema: { resultListLocator: "result", resultFields: [{key:"title", locator:"*[local-name() ='title']"}] } }}); myDataSource.sendRequest(null, myCallback); });

Copyright © 2009 Yahoo! Inc. All rights reserved.

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