Today we will write a simple HTML client to call the custom web service we created for Sharepoint in my last post. There is a good article that you can find here which explains the details of writing jQuery/AJAX code to call a SOAP web service. The key here is to build a SOAP request before calling the web service and then extract the results from the SOAP response.
Here is how our SOAP request will look like:
POST /_layouts/myfolder/webservice1.asmx HTTP/1.1
Host: myserver
Content-Type: text/xml; charset=utf-8
Content-Length: length
SOAPAction: "http://tempuri.org/Hello"
<?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>
<Hello xmlns="http://tempuri.org/">
<name>string</name>
</Hello>
</soap:Body>
</soap:Envelope>
And here is the expected response:
HTTP/1.1 200 OK
Content-Type: text/xml; charset=utf-8
Content-Length: length
<?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>
<HelloResponse xmlns="http://tempuri.org/">
<HelloResult>string</HelloResult>
</HelloResponse>
</soap:Body>
</soap:Envelope>
In order to run the example copy and paste the code into notepad, then save it locally. You don’t need to publish it under a web server, the page can be just loaded into IE browser and executed from there. Note: newer browsers that enforce same origin policy, will require to publish the HTML file on the same domain where web service is located.
<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://myserver/anysite/_layouts/myfolder/webservice1.asmx?op=Hello";
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> \
<Hello xmlns="http://tempuri.org/"> \
<name>' + $("#txtName").val() + '</name> \
</Hello> \
</soap:Body> \
</soap:Envelope>';
$.ajax({
type: "POST",
url: wsUrl,
contentType: "text/xml",
dataType: "xml",
data: soapRequest,
success: processSuccess,
error: processError
});
});
});
function processSuccess(data, status, req) {
if (status == "success")
$("#response").text($(req.responseXML).find("HelloResult").text());
}
function processError(data, status, req) {
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" />
</body>
</html>
Leonid's space 
Hi I was wondering how can we authenticate a user as well in above example ?
Cheers
and whether if we can use it on Sharepoint 2007, SSL/https
Hi does above program runs only with IE but not with other browser? I tried with Firefox and Chrome it didn’t but works fine with IE. I am just wondering it might be because I have my web service created locally (local host). Any suggestions would be appreciated.
For non-IE browsers the HTML page should be published in the same domain where the web service is hosted.
Thank you for quick response
Now I have given a WSDL for password and username authentication and I need to make sure it works with Firefox. I spend multiple hours but could not figure out as it seems like it is cross-domain issue. All I am getting in response is null any idea would be appreciated.
when using a different domain to communicate between, do some googeling on “CORS”
Hi bika, Have you solve your problem? Please share me if any.
Hi! Can I just pass the needed parameters values instead of pass the whole soap envelope!?
For my needed to add the headers into the ajax call but Thanks 😀
Thanks for sharing the sample code.