Trouble calling web service using JQuery

Question

I'm having trouble calling a web service from JQuery.

The url I'm accessing is: http://www.deeptraining.com/webservices/weather.asmx?WSDL which have an operation called GetWeather. I'm using Firefox and I get the following message:

Firefox console: [19:43:29.849] OPTIONS http://www.deeptraining.com/webservices/weather.asmx?op=GetWeather [HTTP/1.1 200 OK 371ms]

Alert: undefined parsererror

If get code 200, it means the request was successfully sent? What am I doing wrong? What would be the correct way to make the request? Thanks!!

Here is my code:

<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://www.deeptraining.com/webservices/weather.asmx?op=GetWeather";

            var soapRequest ='<?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> \
                                    <GetWeather xmlns="http://litwinconsulting.com/webservices/"> \
                                      <City>new york</City> \
                                    </GetWeather> \
                                  </soap:Body> \
                                </soap:Envelope>';

            $.ajax({
                type: "POST",
                url: wsUrl,
                contentType: "text/xml",
                dataType: "xml",
                data: soapRequest,
                success: processSuccess,
                error: processError
            });

        });
    });
    function processSuccess(data, status, req) {
        if (status == "success")
            alert('SUCCESS');
    }

    function processError(data, status, req) {
        alert(req.responseText + " " + status);
    }
    </script>
    </head>
    <body>
        <h3>
            Calling Web Services with jQuery/AJAX
        </h3>
        <input id="btnCallWebService" value="Call web service" type="button" />
        <div id="response" />
    </body>
</html>

This HTML of yours, are you deploying in a server in `http://www.deeptraining.com/` while testing? — acdcjunior, Apr 15 '13 at 03:13

score 1 · Accepted Answer · edited May 23 '17 at 11:43

(Answer below assumes, as it seems, you are not deploying this HTML file in the http://www.deeptraining.com/.)

Your code is actually attempting to make a CORS request, not an ordinary POST.

Modern browsers will only allow Ajax calls to pages in the same domain as the source HTML page.

In other words, whenever the HTML page that tries to make an Ajax request is not on the same domain as the target URL (in your case, www.deeptraining.com), the browser won't make the call (as you'd expect). Instead, it will try to make a CORS request.

CORS request? !@#$¨& is that?

Wikipedia says: Cross-origin resource sharing (CORS) is a mechanism that allows a web page to make XMLHttpRequests to another domain. Such "cross-domain" requests would otherwise be forbidden by web browsers, due to the same origin security policy.

To put it shortly, to perform a CORS request, your browser:

Will first send an OPTION request to the target URL
- Your Firefox told you that:
  - Firefox console: [19:43:29.849] OPTIONS http://www.deeptraining.com/webservices/weather.asmx?op=GetWeather [HTTP/1.1 200 OK 371ms]
  - The response code is 200 because it is for the OPTIONS call, not the POST.
And then only if the server response to that OPTION contains the adequate headers to allow the CORS request, the browse will perform the call (almost exactly the way it would if the HTML page was at the same domain).
- If the expected headers don't come, the browser simply gives up (like it did to you).

How to solve it?

Unfortunately, there is nothing you can do about it other than deploying that HTML file in a server located at http://www.deeptraining.com/.

How about JSONP?

To use JSONP in this scenario, you'd have to change the service to return information via GET, as you can't POST using JSONP. (This answer points to some hacks, but that's going too far, I think.)

Oh man, no workarounds, then?

There is no clean workaround, really. You could set up an application (at the same domain of your HTML file) that forwards every TCP/IP request to http://www.deeptraining.com/, an then fool your browser. Or you could set up a mirror of that web service in you domain. You see, it all becomes too dirty from this point on, so good luck.

Thanks for your answer. I'm new with ajax issue but if I understood right the easier way it would be to put in the same server I have my web services deployed the html which do the ajax call. So, I could make a form from the client side to invoke the hmtl which would be placed at the server and then the ajax call would be at the same domain as my web services, right?? — aartor, Apr 17 '13 at 18:59
Yes, correct! Or... you could change the web service code to allow CORS (it involves just setting up some http headers - but is way easier setting it up in REST web services than SOAP-based ones). — acdcjunior, Apr 18 '13 at 04:21
Finally, I placed both resources in the same server to avoid the cors trouble and it worked fine. — aartor, Jun 08 '13 at 07:00

Trouble calling web service using JQuery

1 Answers1

Linked