How To Connect To SOAP Services With JavaScript

Today, developers building modern web applications have a wide range of solutions to choose from.  The options include a variety of languages and frameworks. There are also many web services options they can use. One of the most popular options is SOAP. Soap lets platform and language-independent web applications easily exchange data. In this post, we look at how to plug SOAP services into your application using our JavaScript web framework quickly.

Let’s dive in.

What is SOAP?

SOAP stands for Simple Object Access Protocol. It is an XML-based protocol for accessing web services over HTTP. It is platform and language independent. This means you can use it with applications that have different programming languages without any hassle.

What are the advantages of SOAP?

• Compatible with different programming languages and platforms
• Supports built-in error handling
• Provides WS-security support to protect the web service

How to Get Ext.Data.Store Up and Running with SOAP Data

Getting Ext.data.Store up and running with SOAP data is very simple. Just follow these steps:

1. First, you have to define Blender and extend Ext.data.Store. Then define three fields: id, name, and price.

Ext.define('Blender', {

    extend: 'Ext.data.Model',

    fields: [

        { name: 'id', type: 'int' },

        { name: 'name', type: 'string' },

        { name: 'price', type: 'float' }

    ]

});

2. Next, you have to create the proxy. Then you have to define url, API, soapAction, operationParam and targetNamespace. You also have to create reader.

var store = Ext.create('Ext.data.Store', {

    model: 'Blender',

    proxy: {

        type: 'soap',

        url: 'BlenderService/',

        api: {

            create: 'CreateBlender',

            read: 'GetBlenders',

            update: 'UpdateBlender',

            destroy: 'DeleteBlender'

        },

        soapAction: {

            create: 'http://example.com/BlenderService/CreateBlender',

            read: 'http://example.com/BlenderService/GetBlenders',

            update: 'http://example.com/BlenderService/UpdateBlender',

            destroy: 'http://example.com/BlenderService/DeleteBlender'

        },

        operationParam: 'operation',

        targetNamespace: 'http://example.com/',

        reader: {

            type: 'soap',

            record: 'm|Blender',

            namespace: 'm'

        }

    }

});

How to Load Data into the Store

To load your data, follow these steps:

1. First, call the store’s load method. Then add a parameter, called brand. It will create a SOAP request to GetBlenders, which is specified by the read property in the proxy api. Let’s assume that the GetBlenders SOAP operation requires a brand parameter. You can pass it to the store’s load method.

store.load({

    params: {

        brand: 'Blendtec'

    }

});

This code triggers a post to this URL:

http://example.com/BlenderService/?operation=GetBlenders

2. Let’s assume that the response to your request looks like this:

<?xml version="1.0" encoding="UTF-8"?>

<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">

    <soap:Body>

        <m:GetBlendersResponse xmlns:m="http://example.com/">

            <m:Blender>

                <m:id>1</m:id>

                <m:name>Total Blender Classic WildSide</m:name>

                <m:price>454.95</m:price>

            </m:Blender>

            <m:Blender>

                <m:id>2</m:id>

                <m:name>The Kitchen Mill</m:name>

                <m:price>179.95</m:price>

            </m:Blender>

        </m:GetBlendersResponse>

    </soap:Body>

</soap:Envelope>

3. Now, you can pass a callback function to store’s load method. It show you what the store’s record looks like after it is loaded.

store.load({

    params: {

        brand: 'Blendtec'

    },

    callback: function() {

        console.log(store.getCount()); // 2 records were loaded.

        console.log(store.getAt(0).get('name')); // get the name field of the first record.

    }

});

How to Customize SOAP Envelope and Body

To customize your SOAP envelope and body, follow these steps:

1. Use the developer tool on your web browser to analyze the outgoing request. You will find a HTTP post to this URL:

http://example.com/BlenderService/?operation=GetBlenders

2. Analyze the request post body. The SOAP envelope looks like this:

<?xml version="1.0" encoding="utf-8" ?>

<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">

    <soap:Body>

        <GetBlenders xmlns="http://example.com/">

            <brand>Blendtec</brand>

        </GetBlenders>

    </soap:Body>

</soap:Envelope>

3. Next, use this code, to change the soap envelope namespace prefix to “s“.

proxy: {

    ...

    envelopeTpl: [

        '<?xml version="1.0" encoding="utf-8" ?>',

        '<s:Envelope xmlns:s="http://schemas.xmlsoap.org/soap/envelope/">',

            '{[values.bodyTpl.apply(values)]}',

        '</s:Envelope>'

    ],

    readBodyTpl: [

        '<s:Body>',

            '<{operation} xmlns="{targetNamespace}">',

                '<tpl foreach="params">',

                    '<{$}>{.}</{$}>',

                '</tpl>',

            '</{operation}>',

        '</s:Body>'

    ]

}

4. Now, to view the post body generated from the new templates, simply call the store.load() function with the specified prefix.

<?xml version="1.0" encoding="utf-8" ?>

<s:Envelope xmlns:s="http://schemas.xmlsoap.org/soap/envelope/">

    <s:Body>

        <GetBlenders xmlns="http://example.com/">

            <brand>Blendtec</brand>

        </GetBlenders>

    </s:Body>

</s:Envelope>

How to Create, Update and Destroy Requests

Create, update, and destroy requests work almost the same as read requests. But there is a key difference. Read requests construct the SOAP body using a set of parameters. However, create, update, and destroy requests construct the SOAP body using a set of records.

How to Create Requests

1. To create a request, you have to make a new record by using Ext.create() function and define the required fields, like name and price:

var blender = Ext.create('Blender', {

    name: 'WildSide Jar',

    price: 99

});

2. Next, you have to add the record to the store. Then, call store.sync() method.

store.add(blender);

store.sync();

The code will result in an HTTP POST, which looks like this:

http://example.com/BlenderService/?operation=CreateBlender

3. Now, it’s time to analyze the request post body. As, you can see, the name and price of the newly created record are into the SOAP body:

<?xml version="1.0" encoding="utf-8" ?>

<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">

    <soap:Body>

        <CreateBlender xmlns="http://example.com/">

            <Blender>

                <id>0</id>

                <name>WildSide Jar</name>

                <price>99</price>

            </Blender>

        </CreateBlender>

    </soap:Body>

</soap:Envelope>

How to Update Requests

1. To update a record, simply change the value of the required field. For example, if you want to set the value of price to 200, use this line:

store.getAt(0).set('price', 200);

2. Now, you can synchronize the store with this code:

store.sync();

How to Destroy Requests

1. To destroy a record, you have to remove it from the store. Simply use this line:

store.removeAt(1);

2. Now, you can synchronize the store.

store.sync();

Should I use SOAP for data exchange?

SOAP is an XML based HTTP protocol. It is platform-independent. It enables you to interchange data between applications built with a variety of languages conveniently. Also, it is lightweight. So, you should consider using SOAP for exchanging data.

Sencha Ext JS is a feature-rich JavaScript library for building data-intensive web applications. Try it now for free.