calling webservices from mootools, jquery or dojo
Posted by Nikolaus Gradwohl
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 = "http://www.local-guru.net/helloService" )
public interface HelloService {
@RequestWrapper( targetNamespace="http://www.local-guru.net/helloService" )
public String hello(
@WebParam( name="givenname", targetNamespace="http://www.local-guru.net/helloService" )
String givenname,
@WebParam( name="name", targetNamespace="http://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 = "http://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="http://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("http://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="http://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("http://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="http://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("http://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>
Hello! Can you reattach sources, it`s impossible to download them. Tnx.
This is the most comprehensive guide I have come across. Thanks for sharing this with us