JQuery: Connect to SAP Web Service


/ Published in: jQuery
Save to your folder(s)

There are a couple of steps involved to connect to an SAP web service. Really, its about the same as connecting to a regular ASMX web service, using the .ajax() function. Make sure you have a WSDL with the function and connection information. I recommend using SoapUI for testing and verification.


Copy this code and paste it in your HTML
  1. /*
  2. First define a function that builds the SOAP request XML that you will need to pass to the web service.
  3. */
  4.  
  5. function createSoapRequest(zipcode) {
  6. var soapRequest = '<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" ' +
  7. 'xmlns:urn="urn:sap-com:document:sap:soap:functions:mc-style">' +
  8. '<soapenv:Header/>' +
  9. '<soapenv:Body>' +
  10. '<urn:WebServiceFunction>' +
  11. '<Contact/>' +
  12. '<Zipcode>' + zipcode + '</Zipcode>' +
  13. '<Return/>' +
  14. '</urn:WebServiceFunction>' +
  15. '</soapenv:Body>' +
  16. '</soapenv:Envelope>';
  17.  
  18. return soapRequest;
  19. }
  20.  
  21. /*
  22. The next thing we want to do is make your ajax call using the jQuery.ajax() function and pass the Soap Request.
  23. Call this code within a function or event function (ex: $("#button").click(function() {}) )
  24. */
  25.  
  26. var soapMessage = createSoapRequest(zipcode);
  27.  
  28. /*
  29. This isn't a real web service URL, just an example.
  30. Sometimes the URL to SAP web services can be quite long so thats why I put it in a separate variable.
  31. */
  32. var servicePath = "http://service.url.com/sap/bc/srt/rfc/sap/zcrm_web_service/";
  33.  
  34. $.ajax({
  35. url: servicePath,
  36. type: "POST",
  37. dataType: "xml",
  38. data: soapMessage,
  39. username: "username", // Most SAP web services require credentials
  40. password: "password",
  41. success: function(results) {
  42. parseXML(results);
  43. $("div#detail").show();
  44. $("div#enterzip").hide();
  45. },
  46. contentType: "text/xml; charset=utf-8"
  47. });
  48.  
  49. /*
  50. For readability I created a function called "parseXML" which will parse the XML returned from the web service and pull out the data I am interested in displaying.
  51. */
  52.  
  53. function parseXML(xml) {
  54. $(xml).find("item").each(function () {
  55. // ... extract the pieces of information you want and update the div ...
  56. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.