Introduction

Goal of the Tutorial

This tutorial is intended to guide you through the process of using SOAP (Simple Object Access Protocol) services in hybrid apps. By the end of this tutorial, you will be able to make calls to SOAP web services and handle XML responses using JavaScript.

Learning Objectives

• Understand SOAP services and their role in hybrid apps
• Learn how to make calls to SOAP services
• Handle XML responses from SOAP services using JavaScript

Prerequisites

A basic understanding of:

• HTML/CSS
• JavaScript and AJAX
• Hybrid App Development
• Basic knowledge of XML and Web Services

Step-by-Step Guide

Concept of SOAP Services

SOAP is a messaging protocol that allows programs running on disparate operating systems such as Windows and Linux to communicate with each other. It uses XML for its message format, which is platform-independent. SOAP can be used over HTTP/HTTPS, making it accessible from anywhere.

Making Calls to SOAP Services

You make calls to SOAP services using AJAX. AJAX stands for Asynchronous JavaScript and XML. It's a set of web development techniques used to create asynchronous web applications. With AJAX, you can send and receive data from a server asynchronously without interfering with the display and behavior of the existing page.

Handling XML Responses

The response from a SOAP service is typically an XML document. You can handle this response using the DOM Parser in JavaScript.

Code Examples

Making a SOAP Request

Below is a simple SOAP request using AJAX:

var xmlhttp = new XMLHttpRequest();
xmlhttp.open('POST', 'http://www.example.com/soap-endpoint.asmx?wsdl', true);

// build SOAP request
var sr =
    '<?xml version="1.0" encoding="utf-8"?>' +
    '<soap:Envelope ' + 
        'xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ' +
        'xmlns:xsd="http://www.w3.org/2001/XMLSchema" ' +
        'xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">' +
        '<soap:Body> ' +
            '<HelloWorld xmlns="http://tempuri.org/" />' +
        '</soap:Body> ' +
    '</soap:Envelope>';

xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4) {
        if (xmlhttp.status == 200) {
            alert(xmlhttp.responseText);
        }
    }
}
xmlhttp.setRequestHeader('Content-Type', 'text/xml');
xmlhttp.send(sr);

This code initiates a SOAP request to a web service endpoint. It constructs a SOAP envelope with a HelloWorld request, and sends the request. When the response is received, it alerts the response text.

Summary

In this tutorial, we've covered how to use SOAP services in hybrid apps. We've learned how to make calls to SOAP services and handle XML responses using JavaScript.

Next Steps

To continue learning, you can:

• Explore more about SOAP services
• Learn about the different data types in SOAP
• Learn about error handling in SOAP

Additional Resources

• SOAP Tutorial
• AJAX Tutorial

Practice Exercises

1. Create a SOAP request to a different SOAP service.
2. Parse the XML response from a SOAP service and display it on your webpage.
3. Handle errors in your SOAP request and response.

Solution:

1. Parsing the XML response from a SOAP service:

if (xmlhttp.status == 200) {
    var parser = new DOMParser();
    var xmlDoc = parser.parseFromString(xmlhttp.responseText,"text/xml");
    var message = xmlDoc.getElementsByTagName("Message")[0].childNodes[0].nodeValue;
    document.getElementById("message").innerHTML = message;
}

In this code, we're using the DOMParser to parse the XML response. We then get the Message element from the XML, and set its value in an HTML element with the id message.

1. Handling errors in your SOAP request and response:

xmlhttp.onerror = function() {
    alert('An error occurred during the transaction');
};

This code adds an error handler to the AJAX request. If an error occurs during the transaction, it alerts a message.