SOAP Explained: With Javascript

What is SOAP?

SOAP is like a set of rules that helps different computer programs talk to each other. Imagine you have two friends who speak different languages. SOAP is like a universal translator that helps them understand each other.

Now, when these programs talk, they use a special type of text called XML. It's like a format that's easy for both programs to read, like having a conversation in a language that both friends understand.

So, SOAP is kind of like a language translator for computers, and XML is the language they use to communicate. This way, even if two programs are running on completely different systems, they can still understand each other and share information.

SOAP Request

A SOAP request consists of a SOAP envelope that contains the SOAP header and the SOAP body. Here's a basic example of what a simple XML request in SOAP might look.

<?xml version="1.0" encoding="UTF-8"?>
<soapenv:Envelope
    xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/"
    xmlns:web="http://www.example.com/webservice">
    <soapenv:Header/>
    <soapenv:Body>
        <web:HelloRequest>
            <web:Name>Sudip</web:Name>
        </web:HelloRequest>
    </soapenv:Body>
</soapenv:Envelope>

Explanation:

• soapenv:Envelope: The outermost element that holds the entire SOAP message and defines the SOAP namespace.
• soapenv:Header: An optional element for additional information like authentication details; it's empty in this example.
• soapenv:Body: Contains the main content of the SOAP request, including data or parameters, like a HelloRequest with a Name set to “Sudip."
• web:HelloRequest and web:Name: Elements specific to the web service; the "web" prefix corresponds to the namespace in the SOAP envelope.

SOAP Response

The SOAP response is like a reply to the SOAP request, and it also follows a specific structure outlined in the SOAP envelope.

<?xml version="1.0" encoding="UTF-8"?>
<soapenv:Envelope
    xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/"
    xmlns:web="http://www.example.com/webservice">
    <soapenv:Header/>
    <soapenv:Body>
        <web:HelloResponse>
            <web:Greeting>Hello, Sudip!</web:Greeting>
        </web:HelloResponse>
    </soapenv:Body>
</soapenv:Envelope>

Explanation:

• soapenv:Envelope: The outer cover of the SOAP response, stating it's a SOAP message.
• soapenv:Header: The top part of the response; it's empty in this case.
• soapenv:Body: The main content of the response. Here, it contains a HelloResponse from the web service.
• web:HelloResponse and web:Greeting: Elements specific to the web service, indicating that it's responding to the "HelloRequest." The Greeting element contains the message "Hello, Sudip!"

How to make SOAP request with JS

To make a SOAP request in JavaScript, you can use the XMLHttpRequest object or a library like axios to send the request. However, note that due to the same-origin policy, making a SOAP request directly to a different domain might be restricted by the browser. In such cases, you might need to use a server-side proxy.

<script>
    var soapEndpoint = 'https://www.example.com/webservice';

    var soapRequest = `
        <soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/"
            xmlns:web="http://www.example.com/webservice">
            <soapenv:Header/>
            <soapenv:Body>
                <web:HelloRequest>
                    <web:Name>Sudip</web:Name>
                </web:HelloRequest>
            </soapenv:Body>
        </soapenv:Envelope>
    `;

    var xhr = new XMLHttpRequest();
    xhr.open('POST', soapEndpoint, true);
    xhr.setRequestHeader('Content-Type', 'text/xml');
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            // Process the SOAP response here
            var soapResponse = xhr.responseText;
            console.log('SOAP Response:', soapResponse);
        }
    };

    // Send the SOAP request
    xhr.send(soapRequest);
</script>

Using a library like axios can simplify the code and provide additional features for handling asynchronous requests. If you choose to use axios, make sure to include it in your project and adapt the code accordingly.

If you'd like me to demonstrate how to use Axios for making SOAP callouts, please comment 'SOAP with Axios'. Thank you for exploring the SOAP requests and responses with me!