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>


41 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
  30. Nice post! This is a very nice blog that I will definitively come back to more times this year! Thanks for informative post. wordpress developers

    ReplyDelete
  31. Thanks, foг ones marvelous posting! I genuinely enjoyed reading it, you miggһt Ƅe a great author. I wiⅼl made certain to booҝmark your blog and ѡill often come back sometime soon. I want to encoᥙrage yourself to continue your great job, have a nice evening!
    Web Development Course
    best web development courses
    web development classes
    web development course near me
    Web Development Training
    training on web development
    web development training program
    web development training course
    web development summer training

    ReplyDelete
  32. That is really nice to hear. thank you for the update and good luck. gestion de projet suisse romande

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

    ReplyDelete
  34. This is such a great resource that you are providing and you give it away for free. I love seeing blog that understand the value of providing a quality resource for free. digital marketing agency

    ReplyDelete
  35. https://kucsitjobs.blogspot.com/2019/12/web-development-internship-opportunity.html?showComment=1599723542878#c2325753512351493509

    ReplyDelete
  36. Icreativez.pk helps you climb the SERPs and hold on top of your user preferences. Seo Services In Karachi

    ReplyDelete
  37. Designers won't settle for not exactly the base they get for nothing, and from our viewpoint, independent programming engineers won't settle for whatever else. for more info

    ReplyDelete
  38. Rapidly this kind of internet site can easily definitely recognition among virtually all blogging and site-building and also site-building individuals, because careful content or simply opinions. website design denver

    ReplyDelete
  39. Great job for publishing such a beneficial web site. Your web log isn’t only useful but it is additionally really creative too. There tend to be not many people who can certainly write not so simple posts that artistically. Continue the nice writing container hosting

    ReplyDelete
  40. I havent any word to appreciate this post.....Really i am impressed from this post....the person who create this post it was a great human..thanks for shared this with us. HOSTING CHOICES FOR WIDE SCOPE OF WEBSITES

    ReplyDelete
  41. I admire what you have done here. I love the part where you say you are doing this to give back but I would assume by all the comments that is working for you as well. Do you have any more info on this? Software Development Company

    ReplyDelete