Advanced Search

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.

Expand | Embed | Plain Text

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.