XMLHttpRequest is not working in QML Blackberry 10

Question

In the given code i have used one label and one button . i want that when i click on button a request must be sent which get the Json from the given link and print on label . but for this code i am just printing "OK" inside label upon success

The issue am facing is i am not getting into if statement. actually on Button clicked nothing happens. I know there is network manager in QT which i can use but in my situation i want to parse inside QML

// Default empty project template
import bb.cascades 1.0

// creates one page with a label

Page {
    Container {
        layout: StackLayout {}
        Label {
            id: msgLabel
            text: qsTr("Hello World")
            textStyle.base: SystemDefaults.TextStyles.BigText
            verticalAlignment: VerticalAlignment.Center
            horizontalAlignment: HorizontalAlignment.Center
        }
        Button {
            id: requestXML
            objectName: "requestXML"
            onClicked: {
                var doc = new XMLHttpRequest();
                doc.onreadystatechange = function() {
                    if (doc.readyState == 4) {
                        msgLabel.text="OK"
                        // pass “doc.responseText” to C++ for Parsing
                    }
                }
                doc.open("GET", "http://www.example.com/sample.json", true);
                doc.send();

            }
    }
    }
}

In my .pro file i have declared

CONFIG += qt warn_on cascades10
QT += network
CONFIG += debug
CONFIG += console
LIBS += -lbbdata
QT +=script
QT +=scripttools

Where i am wrong ? or i have to declare some thing else

Answer 1

I don't have access to Twitter API, so I can't test it properly for you. But this does work for other JSON files. For this example you only need LIBS += -lbbdata in your .pro file. Also, read DataSource and JsonDataAccess. If I were you I would download JSON through c++.

import bb.cascades 1.0
import bb.data 1.0

Page {
    Container {
        layout: StackLayout {
        }
        Label {
            id: msgLabel
            text: qsTr("Hello World")
            textStyle.base: SystemDefaults.TextStyles.BigText
            verticalAlignment: VerticalAlignment.Center
            horizontalAlignment: HorizontalAlignment.Center
        }
        Button {
            id: requestXML
            onClicked: {
                dataSource.load();
            }
        }
        attachedObjects: [
            DataSource {
                id: dataSource
                source: "https://api.twitter.com/1.1/statuses/user_timeline.json?include_entities=true&include_rts=true&screen_name=ladygaga"
                type: DataSourceType.Json

                onDataLoaded: {
                    console.log("loaded");
                    console.log(JSON.stringify(data)); //just for testing
                    console.log(data);          
                }
                onError: {
                    console.log(errorType);
                    console.log(errorMessage);
                }
            }
        ]
    }

Also the Twitter API you were using is no longer available so check REST API v1.1 Resources or you will get the following error:

{"errors": [{"message": "The Twitter REST API v1 is no longer active. Please migrate to API v1.1. https://dev.twitter.com/docs/api/1.1/overview.", "code": 68}]}

Answer 2

I think that the problem is in the cross-domain request which isn't allowed by default. In WebWorks you'd need to declare an <access> element in your application config.xml file for the domain(s) you wish to access.

Unfortunately, I have no idea how to do the same in a native QML project. Existing elements in bar-descriptor.xml don't allow to do the similar thing.

ADDED:

I wrote a simple HTTP stub for testing that guessing and looks like that's indeed what causes problems:

$ echo -e 'HTTP/1.1 200 OK\n\n' | nc -l 8080


GET /user_timeline.json?include_entities=true&include_rts=true&screen_name=ladygaga HTTP/1.1
CONTENT-TYPE: application/x-www-form-urlencoded
Connection: Keep-Alive
Accept-Encoding: gzip
Accept-Language: en-GB,*
User-Agent: Mozilla/5.0
Host: 192.168.1.106:8080

I get XMLHttpRequest.status == 200in this case whilst on accessing Twitter endpoint I get XMLHttpRequest.status == 0 for the same code:

import bb.cascades 1.0

Page {
    Container {
        layout: StackLayout {
        }
        Label {
            id: msgLabel
            text: qsTr("Hello World")
            textStyle.base: SystemDefaults.TextStyles.BigText
            verticalAlignment: VerticalAlignment.Center
            horizontalAlignment: HorizontalAlignment.Center
        }
        Button {
            id: requestXML
            objectName: "requestXML"
            onClicked: {
                sendRequest();
            }
        }
    }

    function sendRequest() {
        var ajax = new XMLHttpRequest();
        ajax.onreadystatechange = function() {
            if (ajax.readyState === XMLHttpRequest.DONE) {
                console.log("ajax.status: " + ajax.status);
                if (ajax.status === 200) {
                    console.log("Response = " + ajax.responseText);
                } else {
                    // This is very handy for finding out why your web service won't talk to you
                    console.log("Status: " + ajax.status + ", Status Text: " + ajax.statusText);
                }
            }
        }
//        var url = "http://192.168.1.106:8080/user_timeline.json?include_entities=true&include_rts=true&screen_name=ladygaga";
        var url = "https://api.twitter.com/1.1/statuses/user_timeline.json?include_entities=true&include_rts=true&screen_name=ladygaga";
        ajax.open("GET", url, true); // only async supported
        ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        ajax.send();
    }
}