calling webservices from mootools, jquery or dojo

Nikolaus Gradwohl2010-01-24T16:44:00+00:00

I wrote a small webservie using java6 and jax-ws. Then i wrote clients for the webservice using some some popular javascript frameworks. I used mootools, jquery and dojo for writing the clients.

I tried to use the same simple form for all the three clients to make them comparable. I also used no libraries besides the core framework classes.

click here to download the sourcecode of the clients and the java-service

The Java WebService

the HelloService interface

package guru.service;

import javax.jws.WebService;
import javax.jws.WebParam;
import javax.xml.ws.RequestWrapper;

@WebService( targetNamespace = "https://www.local-guru.net/helloService" )
public interface HelloService {
    @RequestWrapper( targetNamespace="https://www.local-guru.net/helloService" )
    public String hello(
        @WebParam( name="givenname", targetNamespace="https://www.local-guru.net/helloService"  ) 
        String givenname, 
        @WebParam( name="name", targetNamespace="https://www.local-guru.net/helloService" ) 
        String name );
}

The implementation of the service

package guru.service;

import javax.jws.WebService;

@WebService( endpointInterface="guru.service.HelloService", serviceName="HelloService", 
    targetNamespace = "https://www.local-guru.net/helloService" )
public class HelloServiceImpl implements HelloService{
    public String hello( String givenname, String name ) {
        return "Hello " + givenname + " " + name + "!";
    }
}

the main class that exports the service

package guru;

import guru.service.*;
import javax.xml.ws.Endpoint;

public class HelloServer {
    public static void main( String[] args ) {
        HelloServiceImpl hello = new HelloServiceImpl();
        String address = "http://localhost:9000/helloService";
        Endpoint.publish(address, hello);
    }
}

The mootools client

The mootools client looks like this

<html>
<head>
    <script src="mootools.js"></script>
    <script>
function callservice() {

    var givenname = $("givenName").value;
    var name = $("name").value;

    var q = '<?xml version="1.0"?><soap:Envelope '
        q+= 'xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" '
        q+= 'xmlns:g="https://www.local-guru.net/helloService">'
        q+='<soap:Body><g:hello><g:givenname>'+givenname+'</g:givenname>'
        q+= '<g:name>'+name+'</g:name></g:hello></soap:Body>'
        q+='</soap:Envelope>'

    var req = new Request({
        url: 'http://localhost/helloService',
        method: 'post',
        urlEncoded: false,
        headers: { 'Content-Type': 'text/xml; charset="utf-8"', 
            'SOAPAction': '"http://www.local-guru/helloService"' },
        onComplete: function( res ) {
            var parser = new DOMParser();
            var xml = parser.parseFromString( res, 'text/xml' );
            $("result").innerHTML = 
                xml.getElementsByTagNameNS("https://www.local-guru.net/helloService",
                "helloResponse")[0].childNodes[0].childNodes[0].nodeValue
        },
        data : q,
    }).send();


}
    </script>
</head>
<body>
    <form>
        <input type="text" id="givenName"/>
        <input type="text" id="name"/>
        <input type="button" onClick="callservice()"/>
    </form>
    <div id="result">result</div>
</body>
</html>

The jQuery Client

The jQuery client looks like this

<html>
<head>
    <script src="jquery.js"></script>
    <script>
function callservice() {
    var givenname = $("#givenName").val();
    var name = $("#name").val();

    var q = '<?xml version="1.0"?><soap:Envelope '
        q+= 'xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" ' 
        q+= 'xmlns:g="https://www.local-guru.net/helloService">'
        q+= '<soap:Body><g:hello><g:givenname>'+givenname+'</g:givenname>'
        q+= '<g:name>'+name+'</g:name></g:hello></soap:Body>'
        q+= '</soap:Envelope>'

    $.ajax({
        url: 'http://localhost/helloService',
        data: q,
        type: 'post',
        contentType: 'text/xml; charset="utf-8"',
        success: function(res) {
            $('#result').html(
                res.getElementsByTagNameNS("https://www.local-guru.net/helloService",
                "helloResponse")[0].childNodes[0].childNodes[0].nodeValue);
        },

    });
}
    </script>
</head>
<body>
    <form>
        <input type="text" id="givenName"/>
        <input type="text" id="name"/>
        <input type="button" onClick="callservice()"/>
    </form>
    <div id="result">result</div>
</body>
</html>

The Dojo Client

The dojo clinet looks like this

<html>
<head>
    <script src="dojo.js" djConfig="parseOnLoad:true"></script>
    <script>
function callservice() {
    var f = dojo.formToObject( "wsform" )
    var givenname = f["givenName"]
    var name = f["name"]

    var q = '<?xml version="1.0"?><soap:Envelope '
        q+= 'xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" '
        q+= 'xmlns:g="https://www.local-guru.net/helloService">'
        q+= '<soap:Body><g:hello><g:givenname>'+givenname+'</g:givenname>'
        q+= '<g:name>'+name+'</g:name></g:hello></soap:Body>'
        q+= '</soap:Envelope>'


    dojo.xhrPost({
        url: 'http://localhost/helloService',
        headers: { 'Content-Type': 'text/xml; charset="utf-8"', 
            'SOAPAction': '"http://www.local-guru/helloService"' },
        handleAs: "text",
        postData: q,
        load: function( res, io ) {

            var parser = new DOMParser();
            var xml = parser.parseFromString( res, 'text/xml' );
            dojo.byId('result').innerHTML = 
            xml.getElementsByTagNameNS("https://www.local-guru.net/helloService",
                "helloResponse")[0].childNodes[0].childNodes[0].nodeValue;
        }

    });
}
    </script>
</head>
<body>
    <form id="wsform">
        <input type="text" name="givenName"/>
        <input type="text" name="name"/>
        <input type="button" onClick="callservice()"/>
    </form>
    <div id="result">result</div>
</body>
</html>

Trackbacks

Comments

Leave a response

Andrebrov 2010-02-08T07:04:36+00:00

Hello! Can you reattach sources, it`s impossible to download them. Tnx.
fabulous 2010-06-01T11:10:59+00:00

This is the most comprehensive guide I have come across. Thanks for sharing this with us
Brenda 2011-03-04T13:28:08+00:00

I'm trying to use your jquery example. First there's an extra comma in the $.ajax call, so I wondered if something was missing. In both IE and FireFox I get an error that getElementsByTagNameNS is undefined. I'm new to jquery and xml so I don't know what I'm missing. Any ideas? Thanks
yankosolutions 2011-06-14T20:34:10+00:00

The only thing you should add in your post is that the both the webservice client and webservice(server) must be on the same server machine. So that they would use the localpaths to the WSDL!! Thank you so mutch !!
Maya 2012-03-06T16:08:02+00:00

Hi Nikolaus Gradwohl, Please look at this issue and give me solution http://stackoverflow.com/questions/9586709/how-to-cal-soap-web-service-from-jquery
Maya 2012-03-06T17:37:10+00:00

http://stackoverflow.com/questions/9586709/how-to-call-a-soap-web-service-from-jquery
rohit 2012-07-23T13:06:11+00:00

can u please give a option to download ur project , because when I am trying to use ur code I am getting OBJECT ERROR.

It will be very helpful .... thanks

GuruBlog

local-guru.net