Search code examples
javascriptjquery

How to call SOAP (XML) webservice in javascript or Jquery?


I'm trying to call asp.net webservice in javascript / Jquery, i have tried so many examples but unfortunately not succeeded,

here is the code which currently i'm trying,

    login("[email protected]", "123456");
    var productServiceUrl = 'http://localhost:50575/Service1.asmx?op=test'; // Preferably write this out from server side

    function login(Email, Password) {
        var soapMessage = '<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> \
<login xmlns="http://test.com/"> \
<Email>' + Email + '</Email> \
<Password>' + Password + '</Password> \
</login> \
</soap:Body> \
</soap:Envelope>';

        $.ajax({
            url: productServiceUrl,
            type: "GET",
            dataType: "xml",
            data: soapMessage,
            complete: endSaveProduct,
            error: function (a, b, c) {
                alert(a + "\n"  + b + "\n" + c);
            },
            contentType: "text/xml; charset=\"utf-8\""
        });

        return false;
    }

    function endSaveProduct(xmlHttpRequest, status) {
        $(xmlHttpRequest.responseXML)
    .find('loginResult')
    .each(function () {
        alert( $(this).find('Message').text());
    });
    }

please help me out, Thanks in advance.


Solution

  • There are multiple issues:

    • You are sending a request to different domain so it won't work unless that domain is sending Cross-origin resource sharing (CORS) headers Access-Control-Allow-Origin: * or specifically allowing your origin
    • You are using GET where as you should be using POST, because in SOAP over HTTP the envelope must be in the request body.
    • jQuery always thinks your data is application/x-www-form-urlencoded unless you set processData to false. Only setting contentType will just make the header lie and doesn't actually change this. Actually this is not true if the data parameter is a string.

    It appears that your target domain is not allowing CORS, so it is impossible to do it directly from client-side. You must use a server proxy to do the request.

    If they allowed CORS, you would do it like so:

    var soapMessage = '<?xml version="1.0" encoding="utf-8"?>\
                        <soap12:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap12="http://www.w3.org/2003/05/soap-envelope">\
                          <soap12:Body>\
                            <login xmlns="http://tastygo.com/">\
                              <BBMID>string</BBMID>\
                              <Email>string</Email>\
                              <Password>string</Password>\
                            </login>\
                          </soap12:Body>\
                        </soap12:Envelope>';
    
    $.ajax( "http://m.allaccesstnt.com/AATnTWebservices/Webservices/Userwebservice.asmx", {
    
        contentType: "application/soap+xml; charset=utf-8",
        type: "POST", //important
        dataType: "xml",
        data: soapMessage
    
    });
    

    But this will not work because the server does not allow OPTIONS, which the browser must use to determine whether a cross-origin request is allowed:

    OPTIONS http://m.allaccesstnt.com/AATnTWebservices/Webservices/Userwebservice.asmx 405 (Method Not Allowed)
    

    The second problem is:

    XMLHttpRequest cannot load http://m.allaccesstnt.com/AATnTWebservices/Webservices/Userwebservice.asmx. Origin http://stackoverflow.com is not allowed by Access-Control-Allow-Origin.