Monday, July 21, 2014

Call a web service from html using JQuery

Adding to the earlier post of mine http://learnings.joshikiran.com/2014/05/call-web-service-from-html.html I wanted to show a way to call a web service using JQuery in this post.

So the pre-requisites remains same i.e., you must know which web service you want to call (Method + Namespace) and also a gateway URL (URL to which you want to POST/GET).

The example I am trying here is executing the below SOAP request

<SOAP:Envelope xmlns:SOAP="http://schemas.xmlsoap.org/soap/envelope/">
<SOAP:Body>
<GetXMLObject xmlns="http://schemas.cordys.com/1.0/xmlstore">
<key version="">/OAuthIntegration/RedirectorContent.xml</key>
</GetXMLObject>
</SOAP:Body>
</SOAP:Envelope>

Gateway URL which I am using is : /cordys/com.eibus.web.soap.Gateway.wcp? 

(For Ppl who understand the architecture of cordys : This is a SOAP request intended to be executed under system organization context. If you want a service to be executed under any organization context you need to append the Organization dn also to the gateway)

By taking references from cordys API, I have created a wrapper on $.ajax call to call a webservice. The wrapper which i have created is something like $.joshi.ajax which is on similar lines with $.cordys.ajax

This works exactly similar way what I have explained in the similar post (request as string and posting to the gateway URL) but this using ajax calls of JQuery.

A utility js file should be as mentioned below, this utility file then be imported where ever you want to use,

<<NameOfJSFile : joshiJQuery which you can view it html page while importing>>

$.joshi = function(){
$.joshi={};
}
$.joshi.ajax = function(options){
var opts = $.extend({}, $.joshi.ajax.defaults);
opts = ajaxExtend(opts, options);
opts.url = configureGatewayUrl(opts.url, opts);
if (!opts.url) return null;
if (typeof (opts.data) === "undefined" && opts.method && opts.namespace) {
var dataStrings = [];
dataStrings.push("<SOAP:Envelope xmlns:SOAP='http://schemas.xmlsoap.org/soap/envelope/'><SOAP:Body><");
dataStrings.push(opts.method);
dataStrings.push(" xmlns='");
dataStrings.push(opts.namespace);
dataStrings.push("'>");
if (opts.parameters) {
dataStrings.push(getParameterString(opts.parameters, opts));
}
dataStrings.push("</" + opts.method + ">");
dataStrings.push("</SOAP:Body></SOAP:Envelope>");
opts.data = dataStrings.join("");
}
debugger;
return $.ajax(opts);
}
function getParameterString(parameters, settings) {
var pStrings = [];
if ($.isArray(parameters)) {
for (var i = 0, len = parameters.length; i < len; i++) {
var par = parameters[i];
pStrings.push("<" + par.name + ">");
pStrings.push((typeof (par.value) === "function" ? par.value() : par.value));
pStrings.push("</" + par.name + ">");
}
} else if (typeof (parameters) === "object") {
if ($.cordys.json) pStrings.push($.cordys.json.js2xmlstring(parameters));
else {
for (var par in parameters) {
pStrings.push("<" + par + ">");
pStrings.push((typeof (parameters[par]) === "function" ? parameters[par]() : parameters[par]));
pStrings.push("</" + par + ">");
}
}
} else if (typeof (parameters) === "function") {
if (typeof (settings.context) === "object") {
pStrings.push(parameters.call(settings.context, settings));
} else {
pStrings.push(parameters(settings));
}
} else if (typeof (parameters) === "string") {
pStrings.push(parameters);
}
return pStrings.join("");
}
function configureGatewayUrl(url, options) {
return url ? url.replace(/^http:\//, window.location.protocol + "/").replace(/\/localhost\//, "/" + window.location.host + "/") : "com.eibus.web.soap.Gateway.wcp";
}
function ajaxExtend(target, src) {
var key, deep, flatOptions = jQuery.ajaxSettings.flatOptions || {};
for (key in src) {
if (src[key] !== undefined) {
(flatOptions[key] ? target : (deep || (deep = {})))[key] = src[key];
}
}
if (deep) {
jQuery.extend(true, target, deep);
}
return target;
}
$.joshi.ajax.defaults = {
url: "",
async: true,
isMock: false,
type: "POST",
contentType: "text/xml; charset=\"utf-8\"",
dataType: "json"
} 

And finally the html which you have to write should be something similar to below

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="joshiJQuery.js"></script>
<script type="text/javascript">
function callWebService()
{
debugger;
var xmlKey="";
var xmlKey=$('#key').val();
$.joshi.ajax({
 url : "http://dhl-hyd1024/cordys/com.eibus.web.soap.Gateway.wcp",
 method :"GetXMLObject",
 namespace: "http://schemas.cordys.com/1.0/xmlstore",
 parameters : "<key version=''>"+xmlKey+"</key>",
 complete : function(data){
debugger;
$('#responseOfService').html(data.responseText.replace(/</g,"&lt;").replace(/>/g,'&gt;'));
 }
});
}
</script>
</head>
<body class='default'>
<input type="input" id="key" style="width:400px;" value="/bFOIntFrameWork/RedirectorContent.xml"/>
<input type="button" value="Fire Web Service" style="width:200px;" onclick="callWebService()"></input>
<br/><br/>
<div id="responseOfService" style="
font-family: Trebuchet ms;
font-size: 0.9em;
width: 700px;
border: 1px solid red;
">
</div>
</body>

</html>


5 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. Hello I am so delighted I located your blog, I really located you by mistake, while I was watching on google for something else, Anyways I am here now and could just like to say thank for a tremendous post and a all round entertaining website. Please do keep up the great work. freelance web designer

    ReplyDelete
  3. The article was up to the point and described the information very effectively. Thanks to blog author for wonderful and informative post.
    website development

    ReplyDelete
  4. @JohnDoe and @JamesJohn... I am glad that you liked it.

    ReplyDelete
  5. cleaning supplies should have earth friendly organic ingredients so that they do not harm the environment** web design new york

    ReplyDelete