- Short Overview of SOAP and Web Services
- Using SOAP in PHP
- Writing a Web Service Server
- Writing a Web Service Client
- Write a JavaScript Web Service Client
- Testing the Java Script/AJAX client
- Conclusion
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Write a JavaScript Web Service Client
This section describes how to create a browser web service client in JavaScript that uses AJAX technologies for the RectangleArea method.
You start by writing a simple HTML interface that lets a user specify values for the width and height arguments of the RectangleArea method. You pass the entered values to a JavaScript function named areaAjax, which will reside in a separate JavaScript module named ajaxSOAP.js.
This HTML will contain an empty <div> tag that AJAX will fill with the response received from the web service server. Here's a minimal interface (save it in the SOAP_MESSAGES folder).
The index.html listing is as follows:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Web Service SOAP and AJAX</title>
</head>
<script type="text/javascript" src="./ajaxSOAP.js"></script>
<body>
<div style="position:relative;left:0px; top:-12px;background
color:#CC0033;margin:0px;">
<h2 align="center"><font color="#ffffff">
Working with SOAP messages in PHP </font></h2></div>
<table align="center" cellpading="0px" cellspacing="3px"
bordercolor="#000000" border="0"
style="position:relative;width:300px;height:200px;">
<tr>
<td colspan="2" align="center"><h1><font color="#CC0033">
Rectangle Area </font></h1></td>
</tr>
<tr>
<td valign="center"><font color="#cc0000" size="3">
Insert value for l:</font></td>
<td><input id="l_id" type="text"></td>
</tr>
<tr>
<td><font color="#cc0000" size="3">Insert value for L:</font></td>
<td><input id="L_id" type="text"></td>
</tr>
<tr>
<td><input type="button" value="Calculate Area" onclick="areaAjax();"></td>
</tr>
<tr>
<td colspan="2">
<div id="resultDiv"></div>
</td>
</tr>
</table>
</body>
</html>
The preceding code doesn't offer an implementation for the areaAJAX function; we will do that next. The JavaScript module is named ajaxSOAP.js and will be saved in the same SOAP_MESSAGES folder as the preceding HTML code.
The areaAjax function begins by extracting the arguments that must be passed to the web service server. Remember that users provide the argument's values through the HTML interface, so you have to access the two text fields identified by the IDs l_id and L_id:
var l_var = document.getElementById("l_id").value;
var L_var = document.getElementById("L_id").value;
After obtaining the argument's values, you need to write the SOAP message. This simple SOAP message calls the RectangleArea method, passing it the two values that the service needs to calculate the area. For now, you'll store the SOAP message into a JavaScript variable, as you can see in the following code line fragment:
soapMessage = "<?xml version='1.0' encoding='UTF-8'?>";
soapMessage = soapMessage + "<SOAP-ENV:Envelope SOAP-ENV:encodingStyle='http://
schemas.xmlsoap.org/soap/encoding/' ";
soapMessage = soapMessage + "xmlns:SOAP-ENV='http://schemas.xmlsoap.org/soap/envelope/' ";
soapMessage = soapMessage + "xmlns:xsd='http://www.w3.org/2001/XMLSchema' ";
soapMessage = soapMessage + "xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' ";
soapMessage = soapMessage + "xmlns:SOAP-ENC='http://schemas.xmlsoap.org/soap/encoding/' ";
soapMessage = soapMessage + "xmlns:tns='urn:mathwsdl'>";
soapMessage = soapMessage + "<SOAP-ENV:Body><tns:RectangleArea xmlns:tns='urn:mathwsdl'>
<L xsi:type='xsd:int'>" +L_var+"</L>";
soapMessage = soapMessage + "<l xsi:type='xsd:int'>" +l_var+"</l>";
soapMessage = soapMessage + "</tns:RectangleArea></SOAP-ENV:Body></SOAP-ENV:Envelope>";
Next, implement the AJAX mechanism. Following a typical approach, you start by obtaining an XMLHttpRequest object and continue by opening a POST channel on the server's URL (http://localhost/php/SOAP_MESSAGES/server.php), indicating the AJAX callback function named callbackAjax:
if(window.XMLHttpRequest) {
httpRequest=new XMLHttpRequest();
} else if (window.ActiveXObject) {
httpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}
httpRequest.open("POST",url,true);
if (httpRequest.overrideMimeType) {
httpRequest.overrideMimeType("text/xml");
}
httpRequest.onreadystatechange=callbackAjax;
The next three lines of code are not commonly used in AJAX implementations; they represent three HTML headers that will make an important contribution to the success of calling the web service. You should particularly remember to provide the MessageType header, which indicates that the message contains a call: a SOAP request.
httpRequest.setRequestHeader("Man", "POST
http://localhost/php/webservice/nusoap_server.php HTTP/1.1")
httpRequest.setRequestHeader("MessageType", "CALL");
httpRequest.setRequestHeader("Content-Type", "text/xml");
Finally, you send the SOAP request and wait for the response:
httpRequest.send(soapMessage);
The complete ajaxSOAP.js javascript code looks like this:
var httpRequest = null;
var xhrTimeout = null;
var url = "http://localhost/php/SOAP_MESSAGES/server.php";
var soapMessage = null;
function areaAjax()
{
var l_var = document.getElementById("l_id").value;
var L_var = document.getElementById("L_id").value;
soapMessage = "<?xml version='1.0' encoding='UTF-8'?>";
soapMessage = soapMessage + "<SOAP-ENV:Envelope SOAP-ENV:encodingStyle='http://schemas.xmlsoap.org/soap/encoding/' ";
soapMessage = soapMessage + "xmlns:SOAP-ENV='http://schemas.xmlsoap.org/soap/envelope/' ";
soapMessage = soapMessage + "xmlns:xsd='http://www.w3.org/2001/XMLSchema' ";
soapMessage = soapMessage + "xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' ";
soapMessage = soapMessage + "xmlns:SOAP-ENC='http://schemas.xmlsoap.org/soap/encoding/' ";
soapMessage = soapMessage + "xmlns:tns='urn:mathwsdl'>";
soapMessage = soapMessage + "<SOAP-ENV:Body><tns:RectangleArea xmlns:tns='urn:mathwsdl'><L xsi:type='xsd:int'>" +L_var+"</L>";
soapMessage = soapMessage + "<l xsi:type='xsd:int'>" +l_var+"</l>";
soapMessage = soapMessage + "</tns:RectangleArea></SOAP-ENV:Body></SOAP-ENV:Envelope>";
if(window.XMLHttpRequest) {
httpRequest=new XMLHttpRequest();
} else if (window.ActiveXObject) {
httpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}
httpRequest.open("POST",url,true);
if (httpRequest.overrideMimeType) {
httpRequest.overrideMimeType("text/xml");
}
httpRequest.onreadystatechange=callbackAjax;
httpRequest.setRequestHeader("Man",
"POST http://localhost/php/webservice/server.php HTTP/1.1")
httpRequest.setRequestHeader("MessageType", "CALL");
httpRequest.setRequestHeader("Content-Type", "text/xml");
httpRequest.send(soapMessage);
xhrTimeout=setTimeout("ajaxTimeout(httpRequest);",120000);
}
function callbackAjax(){
try {
if(httpRequest.readyState==4) {
if(httpRequest.status==200) {
clearTimeout(xhrTimeout);
resultDiv=document.getElementById("resultDiv");
resultDiv.style.display='inline';
resultDiv.innerHTML='<font color="#cc0000" size="4"><b>' +
httpRequest.responseText+'</b></font>';
}
}
}catch(e) {
alert("Error!"+e); }
}
function ajaxTimeout(ajaxOBJ) {
ajaxOBJ.abort();
}