Page tree
Skip to end of metadata
Go to start of metadata

This guide explains how to use the XMLHttpRequest object in the SOAP Services.

Create XHR Object

The XMLHttoRequest component allows you to bind a remote data source that feeds the SOAP Services.

var getRemoteData = new XMLHttpRequest();
    getRemoteData.onload = onSyndicationSuccess;
    getRemoteData.onError = onServerError;
    getRemoteData.open("POST", "http://www.webservicex.net/ConvertSpeed.asmx?WSDL");

Parse XML

When the onSyndicationSuccess event is fired, it starts to parse XML data objects which is returned by the XHR. If the data is get successfully, it can be parsed the XML data by using DOMParser.

Let’s parse some XML Data in the onSyndicationSuccess event:

    function onSyndicationSuccess() {
   		var parser = new DOMParser();
		var xmlDoc = parser.parseFromString(this.responseText);
		var ConversionRateResponse = xmlDoc.getElementsByTagName("ConvertSpeedResult");
		alert(ConversionRateResponse[0].childNodes[0].childNodes[0].nodeValue);
    }

    function onServerError(e) {
        alert(JSON.stringify(e));
    }

Use SOAP Client Demo

Before you handle XHR response text , it is always helpful to use a SOAP client. As you can see below, the correct request string is sent and got a valid response text.

Bind Data to UI Object

Any UI object can be used to bind parsed JSON data. In this example, let’s show the conversion result which is  fetched from XML data.

Code

(function() {

    var page1 = Pages.page1 = new SMF.UI.Page({
        //use ctrl + space to show autocomplete within curly brackets in constructors
        name: "page1",
        fillColor: "#EEEEEE",
        onKeyPress: page1_onKeyPress,
        onShow: page1_onShow
    });

    var btnChangeUnit = new SMF.UI.TextButton({
        name: "btn",
        text: "Show as KPH",
        onPressed: btnChangeUnit_onPressed,
        left: "15%",
        top: "70%",
        width: "70%",
        height: "10%"
    });

    page1.add(btnChangeUnit);

    var txtSpeed = new SMF.UI.TextBox({
        name: "edt",
        text: "",
        placeHolder: "Speed as MPH",
        left: "15%",
        top: "50%",
        width: "70%",
        height: "10%",
        keyboardType: SMF.UI.TextBox.KeyboardType.NUMBERPAD
    });

    page1.add(txtSpeed);

    var getRemoteData = new XMLHttpRequest();
    getRemoteData.onload = onSyndicationSuccess;
    getRemoteData.onError = onServerError;
    getRemoteData.open("POST", "http://www.webservicex.net/ConvertSpeed.asmx?WSDL");

    function onSyndicationSuccess() {
        alert(this.response);
    }

    function onServerError(e) {
        alert(JSON.stringify(e));
    }

    /**
     * Creates action(s) that are run when the user press the key of the devices.
     * @param {KeyCodeEventArguments} e Uses to for key code argument. It returns e.keyCode parameter.
     * @this Pages.Page1
     */
    function page1_onKeyPress(e) {
        if (e.keyCode === 4) {
            Application.exit();
        }
    }

    /**
     * Creates action(s) that are run when the page is appeared
     * @param {EventArguments} e Returns some attributes about the specified functions
     * @this Pages.Page1
     */
    function page1_onShow() {}

    /**
     * Creates action(s) that are run when the object is pressed from device's screen.
     * @param {EventArguments} e Returns some attributes about the specified functions
     * @this Page1.TextButton1
     */
    function btnChangeUnit_onPressed(e) {
        var sendData = '<soap:Envelope xmlns:soap="http://www.w3.org/2003/05/soap-envelope" xmlns:web="http://www.webserviceX.NET/"> <soap:Header/> <soap:Body> <web:ConvertSpeed> <web:speed>' + txtSpeed.text;
        sendData += '</web:speed> <web:FromUnit>milesPerhour</web:FromUnit> <web:ToUnit>kilometersPerhour</web:ToUnit> </web:ConvertSpeed> </soap:Body> </soap:Envelope>';
        getRemoteData.send(sendData);
    }

})();

Screenshots