Work with networking services

The NetworkRequest component has the ability to make ArcGIS REST API calls to ArcGIS Online. To do this, the component incorporates features from XMLHttpRequest class in JavaScript, and the cURL (client URL) command line tool. This allows migration of code from a JavaScript web app to a QML native app.

Migrate from XMLHttpRequest to NetworkRequest

The following code samples demonstrate the same functionality across both JavaScript and the AppStudio AppFramework. This can be useful as a guide when migrating code from JavaScript to QML.

This code sample uses XMLHttpRequest in JavaScript to perform a network request.

1
2
3
4
5
6
7
8
9
10
var req = new XMLHttpRequest();
var url = "http://www.arcgis.com/sharing/rest?f=json"
req.open("GET", url, true);
req.onreadystatechange = function() {
    console.log("readyState: ", req.readyState);
    if (req.readyState !== 4) return;
    if (req.status !== 200) return;
    console.log("responseText: ", req.responseText);
}
req.send();

This code sample uses NetworkRequest in the AppFramework to perform the same network request.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
NetworkRequest {
    id: req

    url: "http://www.arcgis.com/sharing/rest?f=json"

    onReadyStateChanged: {
        console.log("readyState: ", readyState);
        if (readyState !== 4) return;
        if (status !== 200) return;
        console.log("responseText: ", responseText);
    }
}

function test() {
    req.send();
}

ReadyState enumeration

The readyState property is populated by an enumeration, with integers representing potential property values. You can use either the integer value, JavaScript state, or NetworkRequest state in your app with no change in behavior, to allow easier migration from XMLHttpRequest.

File handling

A key difference between a web app and a native app is that web apps don't have the ability to access your file system, while native apps do. This difference is reflected in that XMLHttpRequest cannot access files, but NetworkRequest does. File access requests in a web app would need to be done using cURL, rather than JavaScript.

To upload a file using cURL, you would have to do the following:

1
2
3
4
5
6
7
curl \
    -F title="My Code Sample"
    -F type="Code Sample"
    -F tags="Code Sample"
    -F file="@CodeSample.zip"
    -F token="${ARCGIS_ONLINE_TOKEN}"
    http://http://www.arcgis.com/sharing/rest/content/users/jsmith/addItem

NetworkRequest contains an uploadPrefix property to handle characters needed before a file name. This property's default value is @, to maintain compatibility with cURL. The following code sample demonstrates the same behavior, replicated using NetworkRequest.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
property string user: "jsmith"
property string itemTitle: "My Code Sample"
property string itemType: "Code Sample"
property string itemTags: "Code, Sample"
property string itemFile: "CodeSample.zip"
property string token // ARCGIS_ONLINE_TOKEN

NetworkRequest {
    id: req
    url: "http://www.arcgis.com/sharing/rest/content/users/%1/addItem".arg(user)

	function submit() {
        send( {
            "title": itemTitle,
            "type": itemType,
            "tags": itemTags,
            "file": uploadPrefix + itemFile,
            "token": token,
            "f": "json"
        } );
    }
}

The JSON object passed to the send method is a JavaScript object containing a key-value dictionary map. The method property in NetworkRequest describes the nature of the network request. If this property is left blank or undefined, it will default to a GET request. If a file upload is required, the method property must be set to POST.

Default Content-Type

To simplify requests to the ArcGIS REST API, NetworkRequest defaults the Content-Type header to application/x-www-form-urlencoded . This is required when using the ArcGIS Online REST API. This Content-Type will also work for most other websites. However, for some specific websites, such as Amazon Web Services, you may need to clear this setting:

1
networkRequest.headers["Content-Type"] = "";