Simplest SOAP example using Javascript

There are many quirks in the way browsers handle XMLHttpRequest, this JS code will work across all browsers:
http://code.google.com/p/xmlhttprequest/

This JS code converts XML into easy to use JavaScript objects:
http://www.terracoder.com/index.php/xml-objectifier

The JS code above can be included in the page to meet your no external library requirement.

var symbol = "MSFT"; 
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", "http://www.webservicex.net/stockquote.asmx?op=GetQuote",true);
xmlhttp.onreadystatechange=function() {
 if (xmlhttp.readyState == 4) {
  alert(xmlhttp.responseText);
  // http://www.terracoder.com convert XML to JSON 
  var json = XMLObjectifier.xmlToJSON(xmlhttp.responseXML);
  var result = json.Body[0].GetQuoteResponse[0].GetQuoteResult[0].Text;
  // Result text is escaped XML string, convert string to XML object then convert to JSON object
  json = XMLObjectifier.xmlToJSON(XMLObjectifier.textToXML(result));
  alert(symbol + ' Stock Quote: $' + json.Stock[0].Last[0].Text); 
 }
}
xmlhttp.setRequestHeader("SOAPAction", "http://www.webserviceX.NET/GetQuote");
xmlhttp.setRequestHeader("Content-Type", "text/xml");
var xml = '<?xml version="1.0" encoding="utf-8"?>' +
 '<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ' +
                'xmlns:xsd="http://www.w3.org/2001/XMLSchema" ' +
                'xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">' + 
   '<soap:Body> ' +
     '<GetQuote xmlns="http://www.webserviceX.NET/"> ' +
       '<symbol>' + symbol + '</symbol> ' +
     '</GetQuote> ' +
   '</soap:Body> ' +
 '</soap:Envelope>';
xmlhttp.send(xml);
// ...Include Google and Terracoder JS code here...

Two other options:

• JavaScript SOAP client:
  http://www.guru4.net/articoli/javascript-soap-client/en/

• Generate JavaScript from a WSDL:
  http://cwiki.apache.org/CXF20DOC/javascript-clients.html

This cannot be done with straight JavaScript unless the web service is on the same domain as your page.

If the web service is on another domain then you will have to use a proxy page on your own domain that will retrieve the results and return them to you. If you are going to do that then you should use something like the lib that timyates suggested because you do not want to have to parse the results yourself.

If the web service is on your own domain then don't use SOAP. There is no good reason to do so. If the web service is on your own domain then modify it so that it can return JSON and save yourself the trouble of dealing with all the hassles that come with SOAP.

Short answer is: Don't make SOAP requests from JavaScript. Only use a web service to request data from another domain, and if you do that then parse the results on the server-side and return them in a js friendly form.

Thomas:

JSON is preferred for front end use because it is javascript. Therefore you have no XML to deal with. SOAP is a pain without using a library because of this. Somebody mentioned SOAPClient, which is a good library, we started with it for our project. However it had some limitations and we had to rewrite large chunks of it. It's been released as SOAPjs and supports passing complex objects to the server, and includes some sample proxy code to consume services from other domains.

Simplest example would consist of:

1. Getting user input.

2. Composing XML SOAP message similar to this

   <soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                  xmlns:xsd="http://www.w3.org/2001/XMLSchema"
                  xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
     <soap:Body>
       <GetInfoByZIP xmlns="http://www.webserviceX.NET">
         <USZip>string</USZip>
       </GetInfoByZIP>
     </soap:Body>
   </soap:Envelope>
   

3. POSTing message to webservice url using XHR

4. Parsing webservice's XML SOAP response similar to this

   <soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"
                  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                  xmlns:xsd="http://www.w3.org/2001/XMLSchema">
    <soap:Body>
     <GetInfoByZIPResponse xmlns="http://www.webserviceX.NET">
      <GetInfoByZIPResult>
       <NewDataSet xmlns="">
        <Table>
         <CITY>...</CITY>
         <STATE>...</STATE>
         <ZIP>...</ZIP>
         <AREA_CODE>...</AREA_CODE>
         <TIME_ZONE>...</TIME_ZONE>
        </Table>
       </NewDataSet>
      </GetInfoByZIPResult>
     </GetInfoByZIPResponse>
    </soap:Body>
   </soap:Envelope>
   

5. Presenting results to user.

But it's a lot of hassle without external JavaScript libraries.

Easily consume SOAP Web services with JavaScript -> Listing B

This may not meet all your requirements but it is a start at actually answering your question. (Switch XMLHttpRequest() for ActiveXObject("MSXML2.XMLHTTP")).

<html>
 <head>
    <title>Calling Web Service from jQuery</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnCallWebService").click(function (event) {
                var wsUrl = "http://abc.com/services/soap/server1.php";
                var soapRequest ='<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">   <soap:Body> <getQuote xmlns:impl="http://abc.com/services/soap/server1.php">  <symbol>' + $("#txtName").val() + '</symbol>   </getQuote> </soap:Body></soap:Envelope>';
                               alert(soapRequest)
                $.ajax({
                    type: "POST",
                    url: wsUrl,
                    contentType: "text/xml",
                    dataType: "xml",
                    data: soapRequest,
                    success: processSuccess,
                    error: processError
                });

            });
        });

        function processSuccess(data, status, req) { alert('success');
            if (status == "success")
                $("#response").text($(req.responseXML).find("Result").text());

                alert(req.responseXML);
        }

        function processError(data, status, req) {
        alert('err'+data.state);
            //alert(req.responseText + " " + status);
        } 

    </script>
</head>
<body>
    <h3>
        Calling Web Services with jQuery/AJAX
    </h3>
    Enter your name:
    <input id="txtName" type="text" />
    <input id="btnCallWebService" value="Call web service" type="button" />
    <div id="response" ></div>
</body>
</html>

Hear is best JavaScript with SOAP tutorial with example.

http://www.codeproject.com/Articles/12816/JavaScript-SOAP-Client