How To Connect To SOAP Services With JavaScript
In today’s world, developers have a wide range of solutions while building modern web applications. They can choose a variety of languages and frameworks. Also, when it comes to web services, there are different options to choose from. One of the most popular options is SOAP, which enables platform and language-independent web applications to exchange data conveniently. In this post, you will find the details of plugging SOAP services into your application using JavaScript 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. So, you can use it to interact with applications of 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 for protecting the web service
How to Get Ext.Data.Store Up and Running with SOAP Data
The configuration process of 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. Also, you 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 the data, you have to follow these steps:
1. First, you have to call the store’s load method. Then you have to add a parameter, called brand. It will create a SOAP request to GetBlenders, which is specified by the read property in the proxy’s 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'
}
});
The above code will trigger a post to this URL:
http://example.com/BlenderService/?operation=GetBlenders
2. Let’s assume that the response to the above request looks like this:
3. Now, you can pass a callback function to store’s load method. It will enable you to see what the store’s records will look 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 SOAP envelope and body, you have to 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 post body of this request. You will see a SOAP envelope like this:
3.To change the soap envelope namespace prefix to “s,” you have to use this code:
proxy: {
...
envelopeTpl: [
'',
'
'{[values.bodyTpl.apply(values)]}',
''
],
readBodyTpl: [
'
'<{operation} xmlns="{targetNamespace}">',
'
'<{$}>{.}',
'',
'',
''
]
}
4. To view the post body being generated from the new templates, simply call store.load() function with the specified prefix.
How to Create, Update and Destroy Requests
Create, update, and destroy requests work almost the same as read requests. But there is a 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 defining 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 will look like this:
http://example.com/BlenderService/?operation=CreateBlender
3. Now, it’s time for analyzing the post body of the request. You will find that the name and price of the newly created record have been encoded into the SOAP body:
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.
