Consuming SAP soap web service using jQueryAjax in html5 webpages iPad - web-services

Question

I have made application for SAP on iPad in xcode framework. Using web view method I am able to open my application webpages in iPad. html5 pages are store on my pc.
My question is how to consume SAP SOAP web-service through html5 webpages. What steps should I make first? I have access of SAP ES workplace. I dont have any idea about this as this is my first project. Can some one provide me the proper Video tutorial or specific links to read.
Most of link are for REST ful web services. Thanks in Advance.
And my web service url is
"http://erp.esworkplace.sap.com/sap/bc/srt/wsdl/bndg_DF5300E043F279F18F0400145E5ADE89/wsdl11/allinone/ws_policy/document?sap-client=800" which opens in wsdl format.
And "MaterialBasicDataByIDQueryResponse_In" this is my function name

Answer 1

I highly recommend REST! It's a lot more light weight
I user jQuery in this example
In your html page
<script id="soap-template" type="application/soap-template"> <?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><ns0:getSOAP xmlns:ns0="http://localhost:8080/soap"> <search>${id}</search></ns0:getSOAP ></soap:Body></soap:Envelope></script>
JS:
var soapBody = $("#soap-template").html().replace(
new RegExp( "\\$\\{[^}]+\\}", "i" ),
search
);
soapBody = $.trim( soapBody );
$.ajax({
type: "post",
url: "http://localhost:8080/soap",
contentType: "text/xml",
data: soapBody,
dataType: "xml",
processData: false,
beforeSend: function( xhr ){
// Pass the target URL onto the proxy.
xhr.setRequestHeader(
"SOAPTarget",
"http://localhost:8080/soap"
);
// Pass the action onto the proxy.
xhr.setRequestHeader(
"SOAPAction",
"http://localhost:8080/soap/getSOAP"
);
},
success: function( response ){
// Get a jQuery-ized version of the response.
var xml = $( response );
//handle your result
},
error: function(){
alert("error");
console.log( "ERROR", arguments );
}
});