How to call Web Service Through SOAP in javascript

 

Web Service can also be called with Javascript as well. I am explaining this by the use of AJAX.
But the million dollor question is
If Ajax is already there then what is the use of Web Service with Javascript?
Is Web Service is better than general Ajax Call?

The answer of all above question is Web Service is a uniform ,standered and more secure solution then Ajax. Irrespective of normal AJAX based calling where we just hit certain URL with not such a secure medium like a web service does. Because Web Service follows the standered of WSDL this WSDL can easily be shared to another person who wants to be the client irrespective of the technology SOAP client is using. Web Service is more secure, much advance and recommended from W3C.


Example of calling Web Service through SOAP in javascript

<html>
<head>
<title>Calling Web Service from jQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnCallWebService").click(function (event) {
var wsUrl = "http://abc.com/services/soap/server1.php";
var soapRequest ='<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> <getQuote xmlns:impl="http://abc.com/services/soap/server1.php"> <symbol>' + $("#txtName").val() + '</symbol> </getQuote> </soap:Body></soap:Envelope>';
alert(soapRequest)
$.ajax({
type: "POST",
url: wsUrl,
contentType: "text/xml",
dataType: "xml",
data: soapRequest,
success: processSuccess,
error: processError
});

});
});

function processSuccess(data, status, req) { alert('success');
if (status == "success")
$("#response").text($(req.responseXML).find("Result").text());

alert(req.responseXML);
}

function processError(data, status, req) {
alert('err'+data.state);
//alert(req.responseText + " " + status);
}

</script>
</head>
<body>
<h3>
Calling Web Services with jQuery/AJAX
</h3>
Enter your name:
<input id="txtName" type="text" />
<input id="btnCallWebService" value="Call web service" type="button" />
<div id="response" ></div>
</body>
</html>

Related posts:

The following two tabs change content below.

Chandra Shekhar

Consultant at Infogain
Chandra Shekhar is a LAMP Developer,Thinker,Blogger and currently working as Magento(Ecommerce) specialist.. I am always open to learn new things in LAMP as well as other newer technology. In the journey of my last 9 years of web and product development, I have decided to share my knowledge and experience to Open Source Community in 2011. In this regard I have started CuteHits.com. Since then I am actively sharing my knowledge on various LAMP technology through CuteHits.com’s technical ... Read More about Chandra Shekhar

Latest posts by Chandra Shekhar (see all)