Introduction
There are several ways to call a web service, these are some:
- Creating Proxy using add web reference
- Creating Proxy using svcutil.exe
- 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
We created an Add method as per the screen above.
2. Running the service
The following screen will be displayed:
3. Click on the Add method to see the 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
- We have created a button on which we must register a button click
- On a Btn click we are creating a SOAP request and calling the service
- We are using $.ajax for calling jQuery
- 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>
- Here we need to replace the value of X and Y from the User Interface.
- I hardcoded all the values for testing.
- We are using an alert for the success and failure messages
- $.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
Click on the BTNSERVICE button and we wil get the following screen.
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
ConclusionWe created a sample application using a SOAP message as request data and we called the service.
sanjeev baralPosted Feb 22, 2016, 2:52 PM
Thanks! This works with IE but does not work with Mozilla. I get "Request format is unrecognized" error from the web service, captured using Fiddler.
Hci ExperimentPosted Aug 15, 2015, 7:57 PM
Hi Devesh. When i tried calling third party SOAP webservices i got cross domain origin policy error. please suggest!!
Devesh OmarPosted May 13, 2014, 3:46 AM
Thanks Sir
Lakshmanan Sethu SankaranarayanPosted May 4, 2014, 2:04 AM
Nice Article