Trouble calling web service using JQuery

问题

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>

回答1:

(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.

来源：https://stackoverflow.com/questions/16002332/trouble-calling-web-service-using-jquery

标签

jquery

web-services

cors