0

XMLHTTPREQUEST Login

Hello everyone

I'm just a beginners of Yahoo TV Widget,

Can anyone give me a simple example of Kontx.dialog.Login using XMLHttpRequest to get data from localhost

By the way, does it supports to fetch a file.php on localhost

Thanks!

by
4 Replies
  • QUOTE (zhuyinan1988 @ Oct 11 2010, 12:47 AM) <{POST_SNAPBACK}>
    Hello everyone

    I'm just a beginners of Yahoo TV Widget,

    Can anyone give me a simple example of Kontx.dialog.Login using XMLHttpRequest to get data from localhost

    By the way, does it supports to fetch a file.php on localhost

    Thanks!

    Hi,
    This is a bare-bones script, so keep this in mind, but it gives you an outline as to how this is accomplished. The language of your web service is up to you.

    CODE
    //best practice says to put all API calls in a separate file;
    var API = (function () {
    return {
    //other methods here;

    fetch: function (o) {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "http://www.example.com/check.php", true);

    var params = "username=" + encodeURIComponent(o.username) + "&password=" + encodeURIComponent(o.password);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.setRequestHeader("Content-length", params.length);

    xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
    if (xhr.status === 200) {
    var json = JSON.parse(xhr.responseText);

    //note the composition of your object is up to you, mine had a status property;
    if (json.status) {
    //login successful, do something here;
    } else {
    new KONtx.dialogs.Alert({
    title: "Login unsuccessful",
    message: "You are not allowed access!",
    buttons: [
    { label: "OK" }
    ]
    }).show();
    }
    }
    }
    };
    xhr.send(params);
    }
    };
    }());

    var Home = new KONtx.Class({
    ClassName: "Home",

    Extends: KONtx.system.SidebarView,

    createView: function() {
    },

    focusView: function() {
    },

    updateView: function() {

    new KONtx.dialogs.Login({
    title: "Login",
    message: "Please enter your credentials",
    callback: function (event) {
    API.fetch(event);
    },
    cancelCallback: function () {
    log("+++++++++++++++++++++++++++++++++++++++++++");
    log("login canceled!");
    log("+++++++++++++++++++++++++++++++++++++++++++");
    }
    }).show();

    }

    });


    - Ben
    0
  • You might want to look at the URL() object. It has built in support for Post values without needing to supply the header values.

    Something like:
    CODE
    var req = new URL();
    req.location = "http://www.url.com";
    req.postData = "&value1="+escape(mydata1)+"&valuename="+escape(mydata2)
    req.fetchAsync(dddone_function);


    Hope this helps.
    0
  • OK so in reading one more time through the documentation, the best thing to make it completely event driven is to listen in on when the message center variable I set (i.e - "channels") gets updated, and when it does to update the view.

    Anybody got any good examples on how to make that happen?
    0
  • QUOTE (krmacode @ Feb 22 2011, 07:33 PM) <{POST_SNAPBACK}>
    OK so in reading one more time through the documentation, the best thing to make it completely event driven is to listen in on when the message center variable I set (i.e - "channels") gets updated, and when it does to update the view.

    Anybody got any good examples on how to make that happen?

    This really should be its own topic. Please create a new topic next time.

    This contains a small code snippet that shows how a view can register a listener on the view that will listen for a message center broadcast. It's basically just a method bound to the view that takes a callback as its only parameter. This callback (_dispatcher in the example) inspects the payload key, making sure it's the same key that was used to store the information. Then, you can update a grid, as in that example.

    Any time data is stored or removed in the message center an event is broadcast that any subscribers will receive. For example:

    CODE
    KONtx.messages.store("vids", json.videos);


    Any function or method can subscribe to the message center:

    CODE
    myFunction.subscribeTo(KONtx.messages, KONtx.messages.eventType, myFunction);

    or

    (function (event) {
    if (event.payload.key === "vids") {
    //this is the expected payload, so do something;
    }
    }).subscribeTo(KONtx.messages, KONtx.messages.eventType, this);


    Note that while knowing when something is stored in the message center is cool, you can just use it for storage and then fetch it later when needed:

    CODE
    //pseudo-code;
    onApplicationStartup: function () {
    KONtx.messages.store("vids", json.videos);
    };

    //in a view;
    updateView: function () {
    var myVids = KONtx.messages.fetch("vids");
    };


    Hope that helps.
    0

Recent Posts

in Getting Started / Beginners - Yahoo! TV Widgets