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
![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
- 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
![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
ConclusionWe created a sample application using a SOAP message as request data and we called the service.