/* 
First define a function that builds the SOAP request XML that you will need to pass to the web service.
*/

function createSoapRequest(zipcode) {
	var soapRequest = '<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" ' +
		'xmlns:urn="urn:sap-com:document:sap:soap:functions:mc-style">' +
			'<soapenv:Header/>' +
   				'<soapenv:Body>' +
	   				'<urn:WebServiceFunction>' +
	   					'<Contact/>' +
	   					'<Zipcode>' + zipcode + '</Zipcode>' +
	   					'<Return/>' +
	   				'</urn:WebServiceFunction>' +
   				'</soapenv:Body>' +
			'</soapenv:Envelope>';
						
	return soapRequest;
}

/*
The next thing we want to do is make your ajax call using the jQuery.ajax() function and pass the Soap Request. 
Call this code within a function or event function (ex: $("#button").click(function() {}) )
*/

var soapMessage = createSoapRequest(zipcode);

/*
This isn't a real web service URL, just an example. 
Sometimes the URL to SAP web services can be quite long so thats why I put it in a separate variable.
*/
var servicePath = "http://service.url.com/sap/bc/srt/rfc/sap/zcrm_web_service/";
		
$.ajax({
	url: servicePath,
	type: "POST",
	dataType: "xml",
	data: soapMessage,
	username: "username",  // Most SAP web services require credentials
	password: "password",
	success: function(results) {
		parseXML(results);
		$("div#detail").show();
		$("div#enterzip").hide();
	},
	contentType: "text/xml; charset=utf-8"
});

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

function parseXML(xml) {
    $(xml).find("item").each(function () {
      // ... extract the pieces of information you want and update the div ...
}

/* 
First define a function that builds the SOAP request XML that you will need to pass to the web service.
*/

function createSoapRequest(zipcode) {
	var soapRequest = '<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" ' +
		'xmlns:urn="urn:sap-com:document:sap:soap:functions:mc-style">' +
			'<soapenv:Header/>' +
   				'<soapenv:Body>' +
	   				'<urn:WebServiceFunction>' +
	   					'<Contact/>' +
	   					'<Zipcode>' + zipcode + '</Zipcode>' +
	   					'<Return/>' +
	   				'</urn:WebServiceFunction>' +
   				'</soapenv:Body>' +
			'</soapenv:Envelope>';
						
	return soapRequest;
}

// The next thing we want to do is make your ajax call using the jQuery.ajax() function and pass the Soap Request. Call this code within a function or event function (ex: $("#button").click(function() {}) )

var soapMessage = createSoapRequest(zipcode);

// This isn't a real web service URL, just an example. Sometimes the URL to SAP web services can be quite long so thats why I put it in a separate variable.
var servicePath = "http://service.url.com/sap/bc/srt/rfc/sap/zcrm_web_service/";
		
$.ajax({
	url: servicePath,
	type: "POST",
	dataType: "xml",
	data: soapMessage,
	username: "username",  // Most SAP web services require credentials
	password: "password",
	success: function(results) {
		parseXML(results);
		$("div#detail").show();
		$("div#enterzip").hide();
	},
	contentType: "text/xml; charset=utf-8"
});

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

function parseXML(xml) {
    $(xml).find("item").each(function () {
      // ... extract the pieces of information you want and update the div ...
}

/* 
First define a function that builds the SOAP request XML that you will need to pass to the web service.
*/

function createSoapRequest(zipcode) {
	var soapRequest = '<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" ' +
		'xmlns:urn="urn:sap-com:document:sap:soap:functions:mc-style">' +
			'<soapenv:Header/>' +
   				'<soapenv:Body>' +
	   				'<urn:WebServiceFunction>' +
	   					'<Contact/>' +
	   					'<Zipcode>' + zipcode + '</Zipcode>' +
	   					'<Return/>' +
	   				'</urn:WebServiceFunction>' +
   				'</soapenv:Body>' +
			'</soapenv:Envelope>';
						
	return soapRequest;
}

// The next thing we want to do is make your ajax call using the jQuery.ajax() function and pass the Soap Request

var soapMessage = createSoapRequest(zipcode);

// This isn't a real web service URL, just an example. Sometimes the URL to SAP web services can be quite long so thats why I put it in a separate variable.
var servicePath = "http://service.url.com/sap/bc/srt/rfc/sap/zcrm_web_service/"
		
$.ajax({
	url: servicePath,
	type: "POST",
	dataType: "xml",
	data: soapMessage,
	username: "username",  // Most SAP web services require credentials
	password: "password",
	success: function(results) {
		parseXML(results);
		$("div#detail").show();
		$("div#enterzip").hide();
	},
	contentType: "text/xml; charset=utf-8"
});

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

function parseXML(xml) {
    $(xml).find("item").each(function () {
      // ... extract the pieces of information you want and update the div ...
}

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.

JQuery: Connect to SAP Web Service

jquery, web, service

jQuery