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);
});

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 Library Examples: DataSource Utility: DataSource.IO

DataSource Utility: DataSource.IO

DataSource Utility Examples:

More DataSource Utility Resources: