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

Question

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>

^ The last line of `var sr = ` has this: `' ' +` which should be `'';` Just remove the `+` and add a semicolon :) — Scott, Feb 18 '15 at 19:01

bluehexagons · Accepted Answer · 2015-02-18T19:17:41.147

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>

There's no error now, but I've got a warning: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at 192.168.0.251:9080/wsa/wsa1/…. This can be fixed by moving the resource to the same domain or enabling CORS. — Kyle, Feb 19 '15 at 11:36
Are you running the script as a file that you're opening in a web browser, or are you running it from a web server? If you're on a file:// resource and try to load from a website (even if it's a locally-running web server) then the request will be denied if that server doesn't tell your browser that it's OK to send it cross-origin (different website) requests. If it's a subject you want to read more on, check out the [CORS article on MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS). — bluehexagons, Feb 19 '15 at 19:57
Looking at your revised question, you've moved past your original question into something else entirely a few times. Cross-origin requests is a different problem than sending a request via JavaScript since it relies on the server. The .asmx file you saw in the w3schools example isn't a specific thing that matters; you send a request to the server, the server looks up that file, and runs code to return the data for your request. You can substitute that for PHP, Python, or a service that listens for HTTP connections. — bluehexagons, Feb 19 '15 at 23:43

score 0 · Answer 2 · edited May 23 '17 at 12:30

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.

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

2 Answers2