Reputation: 1578

How to simply make a HTML send a number and receive a number back?

There are a lot of questions that look like mine such as: This one, and This one, but they're not. Can someone give me an example of a HTML example that sends a number and shows the response. I need it to implement in my HTML app.
e.g.:
Sends: 8
Returns: 16

Thanks in advance.

HTML application that should send a Request

<html>
<head>
    <title>SOAP JavaScript Client Test</title>
    <script type="text/javascript">
        function soap() {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.open('POST', 'http://192.168.0.251:9080/wsa/wsa1/wsdl?targetURI=urn:services-progress-com:sys:server', true);

            // build SOAP request
            var sr =
                '<?xml version="1.0" encoding="utf-8"?>' +
                '<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:urn="urn:services-progress-com:sys:server:Estagio"> ' +
                '<soapenv:Header/> ' +
                  '<soapenv:Body> ' +
                    '<urn:lnestagio> ' +
                      '<urn:vvalor>5</urn:vvalor> ' +
                    '</urn:lnestagio> ' +
                  '</soapenv:Body> ' +
                '</soapenv:Envelope> ';

            xmlhttp.onreadystatechange == function () {
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4) {
                    if (xmlhttp.status == 200) {

                        alert('done use firebug to see response');
                    }
                }
            };
            // Send the POST request
            xmlhttp.setRequestHeader('Content-Type', 'text/xml');
            xmlhttp.send(sr);
            // send request
            // ...
            window.xmlhttp = xmlhttp;
        }
    </script>
</head>
<body>
    <form name="Demo" action="" method="post">
        <div>
            <input type="button" value="Soap" onclick="soap();" />
        </div>
    </form>
</body>
<html>

WSDL Request/Response
OBS.: I've got the Request/Response from SoapUI 5.0.0

<!--SOAP Request-->

<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:urn="urn:services-progress-com:sys:server:Estagio">
   <soapenv:Header/>
   <soapenv:Body>
      <urn:lnestagio>
         <urn:vvalor>8</urn:vvalor>
      </urn:lnestagio>
   </soapenv:Body>
</soapenv:Envelope>

<!--SOAP Request-->


<!--SOAP Response-->

<SOAP-ENV:Envelope xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
   <SOAP-ENV:Body>
      <lnestagioResponse xmlns="urn:services-progress-com:sys:server:*emphasized text*Estagio">
         <result xsi:nil="true"/>
         <vcalc>16</vcalc>
      </lnestagioResponse>
   </SOAP-ENV:Body>
</SOAP-ENV:Envelope>

<!--SOAP Response-->

This is another example: (but it works...)

<!--I would like to do something like this, Must I create this ".asmx"? how to do it and where must I put this-->

<form action='http://www.w3schools.com/webservices/tempconvert.asmx/FahrenheitToCelsius'
method="post" target="_blank">
<table>
  <tr>
    <td>Fahrenheit to Celsius:</td>
    <td>
    <input class="frmInput" type="text" size="4" name="Fahrenheit">
    </td>
  </tr>
  <tr>
    <td></td>
    <td align="right">
     <input type="submit" value="Submit" class="button">
     </td>
  </tr>
</table>
</form>

<form action='http://www.w3schools.com/webservices/tempconvert.asmx/CelsiusToFahrenheit'
method="post" target="_blank">
<table>
  <tr>
    <td>Celsius to Fahrenheit:</td>
    <td>
    <input class="frmInput" type="text" size="4" name="Celsius">
    </td>
  </tr>
  <tr>
    <td></td>
    <td align="right">
    <input type="submit" value="Submit" class="button">
    </td>
  </tr>
</table>
</form>

Upvotes: 0

Answers (2)

sylozof

Reputation: 86

I don't see the difference between this question and a previous one you already posted.

Once again, it's recommended to use server side language (like PHP) to handle SOAP services, as they normally have built-in libraries to deal with SOAP.

But if a JS-only solution is mandatory, then you will have to analyze the XML response provided by the SOAP server with some built-in JS functions (which will be a little bit tricky) or by using third-party JS libraries.

For example, jQuery has a parseXML() function that allows you to handle XML document.

Or, as someone told you in your previous question, there is Javascript SOAP Client that provides you with an even easier way to make SOAP calls via JS.

If you want further help, please provide the content of the response sent by the SOAP server.

Upvotes: 0

bluehexagons

Reputation: 81

Since I can't leave a comment, a few things that need to be corrected in the code you provided:

At the end of building the SOAP request (the "sr" variable), you have it concatenating. Leave off the +.

You also have it checking equality between xml.onreadystatechange and the function you provided (using ==) instead of assigning the function to that property. Just change that to a single equals sign.

I don't immediately see anything else that would cause this to fail, although if you'd like to inspect the XMLHttpRequest object from a console, set it to a global variable instead of a local (function-scoped) one. I'm guessing your plan was to look at the response via a network inspector in Firebug, but it's been a long time since I used it so I don't remember if that's possible or not, but I thought I'd include code to look at the object manually in the console at the end.

Lines marked with a minus at the start are removed/changed, lines marked with a plus are added.

<html>
<head>
    <title>SOAP JavaScript Client Test</title>
    <script type="text/javascript">
        function soap() {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.open('POST', 'http://192.168.0.251:9080/wsa/wsa1/wsdl?targetURI=urn:services-progress-com:Agrosys:Agroserver', true);

            // build SOAP request
            var sr =
                '<?xml version="1.0" encoding="utf-8"?>' +
                '<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:urn="urn:services-progress-com:Agrosys:Agroserver:AgroEstagio"> ' +
                '<soapenv:Header/> ' +
                  '<soapenv:Body> ' +
                    '<urn:lnestagio> ' +
                      '<urn:vvalor>5</urn:vvalor> ' +
                    '</urn:lnestagio> ' +
                  '</soapenv:Body> ' +
-                 '</soapenv:Envelope> ' +
+                 '</soapenv:Envelope> ';

-           xmlhttp.onreadystatechange == function () {
+           xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4) {
                    if (xmlhttp.status == 200) {

                        alert('done use firebug to see response');
                    }
                }
            };
            // Send the POST request
            xmlhttp.setRequestHeader('Content-Type', 'text/xml');
            xmlhttp.send(sr);
            // send request
            // ...
+           window.xmlhttp = xmlhttp;
        }
    </script>
</head>
<body>
    <form name="Demo" action="" method="post">
        <div>
            <input type="button" value="Soap" onclick="soap();" />
        </div>
    </form>
</body>
<html>

Upvotes: 1

How to simply make a HTML send a number and receive a number back?

Answers (2)

Related Questions