Post
Ask Question

Calling WebService Using AJAX jQuery With SOAP Message Created Manually

Introduction

There are several ways to call a web service, these are some:

  1. Creating Proxy using add web reference
  2. Creating Proxy using svcutil.exe
  3. Calling web service using AJAX jQuery

Here we will learn how to call a webservice using jQuery with a SOAP message created manually. The following is the procedure.

1. Create Web service

Create Web service

We created an Add method as per the screen above.

2. Running the service

The following screen will be displayed:

Running the service

3. Click on the Add method to see the SOAP message.

Add method to See SOAP message

We need to copy the highlited part that is the SOAP message for the request.

4. Creating Client

Add a web form (any aspx form) to the solution.

5. Add jQuery file to webform

<script src="Scripts/jquery-1.8.2.js"></script>

6. Sample code
 
(You may copy the code but you need to change the serviceurl, method name and so on.)

<html>

<head>

    <title></title>

    <script src="Scripts/jquery-1.8.2.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("#BTNSERVICE").click(function (event) {

                var webserUrl = "http://localhost:62187/SampleService.asmx";

                var soapRequest =

'<?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> \

<Add xmlns="http://tempuri.org/">\

<x>4</x>\

<y>5</y> \

</Add>\

</soap:Body> \

</soap:Envelope>';

                $.ajax({

                    type: "POST",

                    url: webserUrl,

                    contentType: "text/xml",

                    dataType: "xml",

                    data: soapRequest,

                    success: SuccessOccur,

                    error: ErrorOccur

                });

            });

        });

        function SuccessOccur(data, status, req) {

            if (status == "success")

                alert(req.responseText);

        }

        function ErrorOccur(data, status, req) {

            alert(req.responseText + " " + status);

        }

    </script>

</head>

<body>

    <form runat="server">

    <asp:button id="BTNSERVICE" runat="server" text="BTNSERVICE" />

    SAMPLE Application to test service

    </form>

</body>

</html>  

7. Understanding the Code

  1. We have created a button on which we must register a button click
  2. On a Btn click we are creating a SOAP request and calling the service
  3. We are using $.ajax for calling jQuery
  4. We have defined SuccessOccur and ErrorOccur Callbacks that will be called in success response from the service and failure from the service.

    SOAP Request
     

    <?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>

        <Add xmlns="http://tempuri.org/">

          <x>int</x>

          <y>int</y>

        </Add>

      </soap:Body>
     

  5. Here we need to replace the value of X and Y from the User Interface.
  6. I hardcoded all the values for testing.
  7. We are using an alert for the success and failure messages
  8. $.ajax is used for sending a request from the client, it takes various parameters as input like

    Service URL, Content Type , Data that we will send (here in our case it is SOAP Request)

8. Running Client

Running Client
Click on the BTNSERVICE button and we wil get the following screen.

BTNSERVICE button

We are getting data after the click on the button in an Alert box.

We can see that the Add result of x and y is 9 , because in the code above I used:
 
<x>4</x>
<y>5</y>

On SOAP request

Conclusion

We created a sample application using a SOAP message as request data and we called the service. 


Similar Articles