hi,
well, JavaScript isn't the easiest target technology for consuming webservices to begin with.
but you asked for it:
first of all you need a suitable runtime environment to run your javascript. Depending on the runtime environment chosen several restrictions may apply.
If your runtime environment is your browser's engine, you can't easily use cUrl, so you have to use some AJAX like strategy which itself is restricted by cross browser scripting restrictions(meaning, you can only call a webservice which is within the same domain as your webservice's server).
If your runtime environment is the JavaScript runtime of the Yahoo Widget engine, you have no cross browser troubles and you can use the AJAX approach. Then remains a further limitation, which is the non-existence of suitable SOAP libraries. So you have to create the SOAP message manually.
An example for this is the basis for my blog on a speedometer widget to be found <a href="/people/anton.wenzelhuemer/blog/2007/03/04/kpi-speedometer-widget">here</a>. If you decompile this widget, you will find a working example of a javascript program consuming a webservice.
Following I will paste the coding of the main routines to this thread.
Function <i>getHTTPObject</i> creates an XMLHttpRequest object.
<i>callService</i> sets the service URL (found in the WSDL), builds an appropriate XML message according to the WSDL, and calls the service.
Function <i>handleHttpResponse</i> parses the webservice's response.
Without further ado here's the coding for you to dissect:
// KPISpeedo main library
// (c) 2007 by ACW (tony@kwent.com)
//********************************************************************************
// * Disclaimer/License:
// * Did this for my personal fun. Don't blame me for anything.
// * Licensed under MLL (My Little License):
// * MLL: Use it for free if you like it.
// * Modify it, get rich with it if you've got a chance to.
// * Acknowledge me visual if you think it's worth it.
// * Keep this disclaimer in the source.
// * Feedback:
// * - welcome at tony@kwent.com
// ********************************************************************************
var username = null;
var password = null;
var baseURL = null;
var dparameter = null;
var interval = null;
var serviceName = "ZTW_SPEEDO";
var clientID = "200";
var operationName = "ZtwSpeedo";
var speedoCaption = null;
var myText = new Text(mainWindow);
var captionText = new Text(mainWindow);
function getHTTPObject() {
var xmlhttp;
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}
<!-- ************************************************* -->
function callService()
{
http = getHTTPObject(); // this is our HTTP Object
try {
http.open("POST", baseURL + "/sap/bc/srt/rfc/sap/" + serviceName + "?sap-client=200&wsdl=1.1&style=rpc&sap-user=" + username + "&sap-password=" + password, true);
} catch (exc) {
print(exc);
}
http.onreadystatechange = handleHttpResponse;
http.setRequestHeader("Man","POST /sap/bc/srt/rfc/sap/" + serviceName + "?sap-client=200 HTTP/1.0");
http.setRequestHeader("Host", baseURL);
http.setRequestHeader("Content-Type", "text/xml; charset=ISO-8859-1");
// http.setRequestHeader("SoapAction", "");
xmlstring = "<?xml version="1.0" encoding="ISO-8859-1"?>" +
"<SOAP-ENV:Envelope xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/"" +
" xmlns:xsd='http://www.w3.org/2001/XMLSchema'" +
" xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance'" +
" xmlns:SOAP-ENC='http://schemas.xmlsoap.org/soap/encoding/'" +
" xmlns:si='http://soapinterop.org/xsd'" +
" xmlns:tns='urn:sap-com:document:sap:soap:functions:mc-style'>" +
"<SOAP-ENV:Body>" +
"<tns:" + operationName + " xmlns:tns='urn:sap-com:document:sap:soap:functions:mc-style'>" +
"<ParameterName>" + dparameter + "</ParameterName>" +
"</tns:" + operationName + ">" +
"</SOAP-ENV:Body>" +
"</SOAP-ENV:Envelope>";
http.send(xmlstring);
}
<!-- ************************************************* -->
function handleHttpResponse() {
if (http.readyState == 4) {
if (http.status == 200 ) {
var parser = new DOMImplementation();
//load the XML into the parser and get the DOMDocument
var domDoc = parser.loadXML(http.responseText);
// print(http.responseText);
//get the root node
var docRoot = domDoc.getDocumentElement();
var resParameterValue = parseInt(docRoot.getElementsByTagName("ParameterValue").item(0).getFirstChild().nodeValue);
var resMinGauge = parseInt(docRoot.getElementsByTagName("MinGauge").item(0).getFirstChild().nodeValue);
var resMaxGauge = parseInt(docRoot.getElementsByTagName("MaxGauge").item(0).getFirstChild().nodeValue);
var resParameterUnits = docRoot.getElementsByTagName("ParameterUnits").item(0).getFirstChild().nodeValue;
var corrParameterValue = resParameterValue;
if (resParameterValue <= resMinGauge) {
corrParameterValue = resMinGauge;
}
if (resParameterValue >= resMaxGauge) {
corrParameterValue = resMaxGauge;
}
var minGaugeText = new Text(mainWindow);
minGaugeText.visible = false;
minGaugeText.hAlign = "left";
minGaugeText.data = resMinGauge;
minGaugeText.bgColor = "#000000";
minGaugeText.size = 8;
minGaugeText.font = "Tahoma, Arial";
minGaugeText.style = "bold";
minGaugeText.bgOpacity = 1;
minGaugeText.color = "#000000";
minGaugeText.vOffset = 110;
minGaugeText.hOffset = 30;
minGaugeText.zOrder = 90;
minGaugeText.visible = true;
var maxGaugeText = new Text(mainWindow);
maxGaugeText.visible = false;
maxGaugeText.hAlign = "right";
maxGaugeText.data = resMaxGauge;
maxGaugeText.bgColor = "#000000";
maxGaugeText.size = 8;
maxGaugeText.font = "Tahoma, Arial";
maxGaugeText.style = "bold";
maxGaugeText.bgOpacity = 1;
maxGaugeText.color = "#000000";
maxGaugeText.vOffset = 110;
maxGaugeText.hOffset = 185;
maxGaugeText.zOrder = 90;
maxGaugeText.visible = true;
var rotation = 180 * (corrParameterValue - resMinGauge) / (resMaxGauge - resMinGauge) + 270 ;
needle.rotation = rotation;
//print("Rotation: " + rotation);
var tempString = resParameterValue + " " + resParameterUnits;
placeText(tempString, 107, 140);
}
else {
var errStr = "HTTP Response " + http.status;
placeText(errStr, 107, 140);
}
}
return;
}
function checkMandatoryFields()
{
if (preferences.sapUsername.value == null ||
preferences.sapPassword.value == null ||
preferences.parameterName.value == null ||
preferences.refreshTimeInMinutes.value == null ||
preferences.KPIURLLocation.value == null ||
preferences.sapUsername.value == "" ||
preferences.sapPassword.value == "" ||
preferences.parameterName.value == "" ||
preferences.refreshTimeInMinutes.value == "" ||
preferences.KPIURLLocation.value == "")
{
return false;
}
return true;
}
function initializeFields()
{
username = preferences.sapUsername.value;
password = preferences.sapPassword.value;
dparameter = preferences.parameterName.value;
baseURL = preferences.KPIURLLocation.value;
interval = preferences.refreshTimeInMinutes.value;
if (preferences.speedometerCaption.value != null &&
preferences.speedometerCaption.value != "") {
caption = preferences.speedometerCaption.value;
}
else {
caption = preferences.parameterName.value;
}
placeCaption(caption);
}
function placeText(aString, hOff, vOff)
{
myText.visible = false;
myText.hAlign = "center";
myText.width = 181;
myText.data = aString;
myText.bgColor = "#000000";
myText.size = 12;
myText.font = "Tahoma, Arial";
myText.style = "bold";
myText.bgOpacity = 1;
myText.color = "#FF0000";
myText.vOffset = vOff;
myText.hOffset = hOff;
myText.zOrder = 100;
myText.visible = true;
}
function placeCaption(theCaption) {
captionText.visible = false;
captionText.hAlign = "center";
captionText.data = caption;
captionText.size = 10;
captionText.font = "Tahoma, Arial";
captionText.style = "bold";
captionText.bgOpacity = 0;
captionText.color = "#000000";
captionText.vOffset = 155;
captionText.hOffset = 107;
captionText.zOrder = 100;
captionText.visible = true;
}
regards,
anton
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.