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>


29 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
  6. Fantastic goods from you, man. I’ve understand your stuff previous to and you are just too fantastic. I actually like what you have acquired here, certainly like what you are saying and the way in which you say it. You make it entertaining and you still care for to keep it wise. I can’t wait to read far more from you. This is really a terrific site. new york website design company

    ReplyDelete
  7. Very instructive and good bodily structure of subject matter, now that’s user pleasant (:. website designer nyc

    ReplyDelete
  8. Cpr KIts… very great read you know alot about this subject i see!… new york web designs

    ReplyDelete
  9. I’m writing to make you know of the fabulous encounter my wife’s child undergone going through the blog. She realized a good number of things, not to mention what it’s like to have an excellent giving spirit to make certain people just learn certain extremely tough subject areas. You undoubtedly surpassed readers’ desires. Many thanks for presenting the useful, trustworthy, revealing and as well as easy tips about this topic to Sandra. ny web design firms

    ReplyDelete
  10. This comment has been removed by the author.

    ReplyDelete
  11. This comment has been removed by the author.

    ReplyDelete
  12. An extremely interesting read, I may possibly not agree completely, but you do make some very valid points. san francisco design agency

    ReplyDelete
  13. My wife style of bogus body art were being quite unsafe. Mother worked with gun first, after which they your lover snuck free upon an tattoo ink ink. I was sure the fact just about every should not be epidermal, due to the tattoo ink could be attracted from the entire body. make an own temporary tattoo sf design agency

    ReplyDelete
  14. We are not going to charge a fortune for our services, only pay what you need with flexible add-on packages. We are known for providing cost-effective solutions for all your digital problems. website development company in usa

    ReplyDelete
  15. Good job on this article! I really like how you presented your facts and how you made it interesting and easy to understand. Thank you. web design company san francisco

    ReplyDelete
  16. We are always on hand to respond to your queries. Fulfilling your business needs is our passion. web development agency in usa

    ReplyDelete
  17. There is noticeably a bundle to know about this. I assume you made certain nice points in features also. website design firms san francisco

    ReplyDelete
  18. ther are many outdoor decors out there on the local hardware but we always use outdoor decors coming from recyclable materials* web design company san francisco

    ReplyDelete
  19. Thank you, I have just been looking for information about this subject for ages and yours is the best I’ve discovered so far. But, what about the bottom line? Are you sure about the source? web design company san francisco

    ReplyDelete
  20. Brilliant post and useful information. I think this is what I read somewhere but I dont know with your experience los angeles web design

    ReplyDelete
  21. Merely wanna admit that this is very beneficial , Thanks for taking your time to write this. facebook marketing

    ReplyDelete
  22. When I originally commented I clicked the “Notify me when new comments are added” checkbox and now each time a comment is added I get three emails with the same comment. Is there any way you can remove people from that service? Thank you! website design la

    ReplyDelete
  23. Of course, it might be that even with the quick assistance in web facilitating and with the capacity of CPanel and other programming projects to make undertakings easy to deal with, you may at present have no an ideal opportunity to do any of the work that should be done to make your sites and have them up and working in the measure of time you had sought after.web hosting near me

    ReplyDelete
  24. What¡¦s Happening i’m new to this, I stumbled upon this I’ve found It positively helpful and it has helped me out loads. I am hoping to give a contribution & aid different customers like its aided me. Good job. web design agency los angeles

    ReplyDelete
  25. Preferably,when you gain knowledge,are you able to mind updating your website with an increase of information? It is very ideal for me. web design company los angeles

    ReplyDelete
  26. I need to test with you here. Which is not one thing I usually do! I get pleasure from reading a post that will make folks think. Also, thanks for allowing me to comment! design firms los angeles

    ReplyDelete
  27. I conceive this website has very wonderful indited content material posts . website design company

    ReplyDelete
  28. Most appropriate the human race messages work to show your and present exclusive chance with special couple. Beginer appear system in advance of raucous people will most likely always be aware most of the golden value off presentation, which is a person’s truck. best man jokes web design

    ReplyDelete
  29. I was reading through some of your content on this internet site and I believe this site is really instructive! Keep putting up. top web design agencies

    ReplyDelete