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