Why is the success message not working in this jquery ajax?

Question

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function () {

        var Celcius = 0;
        $.ajax({
            type: "POST",
            url: "http:\//www.w3schools.com/webservices/tempconvert.asmx/CelsiusToFahrenheit",
            contentType: "application/x-www-form-urlencoded",
            data: 'Celsius=0',
            dataType: "text/html",
            success: function (msg) {
                alert(msg);
            },
            error: function (xhr, msg) {
                alert('fail');
            }
        });

    });

</script>
</head>
<body>

</body>
</html>

Save the page above as a .htm on your desktop. If you open the page in a browser, it shows the 'fail' message. But if you check in fiddler, the call actually succeeded. In fiddler you can also see that the response correctly gives 32 as the answer (The webservice converted 0 degree Celsius to 32 Farenheit). This worked on my desktop for a while then it abruptly stopped working!

For those of you who have used fiddler. This is the response as monitored from fiddler

HTTP/1.1 200 OK
Date: Thu, 05 Apr 2012 23:18:10 GMT
Server: Microsoft-IIS/6.0
MicrosoftOfficeWebServer: 5.0_Pub
X-Powered-By: ASP.NET
X-AspNet-Version: 4.0.30319
Cache-Control: private, max-age=0
Content-Type: text/xml; charset=utf-8
Content-Length: 87

<?xml version="1.0" encoding="utf-8"?>
<string xmlns="http://tempuri.org/">32</string>

Any ideas?

Update: Guys, the url http://www.w3schools.com/webservices/tempconvert.asmx/CelsiusToFahrenheit is a web method. You cannot access it directly thru a browser. If you want to make a request thru the browser you would use http://www.w3schools.com/webservices/tempconvert.asmx?op=CelsiusToFahrenheit

Please reply only if you have experience in calling a webservice using jquery ajax.

If you just open the URL normally you get an error. Maybe they took the script down or is that because I'm trying to access it directly? — Armatus, Apr 05 '12 at 23:00
The url works for ajax webservice call. If you want to access the url thru the browser it is http://www.w3schools.com/webservices/tempconvert.asmx?op=CelsiusToFahrenheit — developer747, Apr 05 '12 at 23:04
It is [probably wise to avoid w3schools](http://w3fools.com/) — Quentin, Apr 05 '12 at 23:06
"Please reply only if you have ever called a webservice using jquery ajax" — It's a URL. You're a POST request. We can see that the service doesn't grant cross-origin permissions. You don't need any special knowledge of webservices or jQuery to see what is wrong. It is basic HTTP and basic XHR. — Quentin, Apr 05 '12 at 23:13
No. I already knew there was no Access-Control-Allow-Origin header in it … which is why I answered the question in the first place. — Quentin, Apr 05 '12 at 23:22
Why is it that " no Access-Control-Allow-Origin header" doesn't apply to fiddler? Why am I able to see the correct answer in fiddler? — developer747, Apr 05 '12 at 23:28
Because fiddler is software that the browser has been configured to pass HTTP requests though … and not code that is being run because you visited Joe Random Website. — Quentin, Apr 05 '12 at 23:30

score 1 · Answer 1 · answered Apr 05 '12 at 23:01

1

Your ajax call should be within a domain. Again look at the correction pointed out above about http://

answered Apr 05 '12 at 23:01

Chibuzo

6,112
3
29
51

Then how would you explain a successful response detected in fiddler? – developer747 Apr 05 '12 at 23:02

score 1 · Answer 2 · answered Apr 05 '12 at 23:03

1

It is failing because you are violating the Same Origin Policy

The browser makes the request successfully, but since the request doesn't come with permissions for your site to view the data, it doesn't allow your JavaScript access to it.

This is revealed in the JavaScript console for your browser. e.g.

XMLHttpRequest cannot load http://www.w3schools.com/webservices/tempconvert.asmx/CelsiusToFahrenheit. Origin http://fiddle.jshell.net is not allowed by Access-Control-Allow-Origin.

answered Apr 05 '12 at 23:03

Quentin

914,110
126
1,211
1,335

That url is not meant for the browser. The url for the browser is http://www.w3schools.com/webservices/tempconvert.asmx?op=CelsiusToFahrenheit – developer747 Apr 05 '12 at 23:08
1

@developer747 — If the URL isn't meant for the browser, why are you putting it in JavaScript and using it as an input to jQuery's `$.ajax` function? – Quentin Apr 05 '12 at 23:10
@developer747 — Your code is making a POST request to the URL, so the data in it appears in the message body, not the query string. – Quentin Apr 05 '12 at 23:10

score 1 · Accepted Answer · edited May 23 '17 at 12:04

Host the jquery within a folder where the html file is hosted. Your reference to jquery would be something like this (instead of a web reference). That is enough to get over ie implementation of same origin policy.

 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

Your example would work only in Internet Explorer. The reason why it won't work in firefox and chrome, as correctly pointed out by the other users, is due to the same origin policy. You successfully get a response from the web service but the browser rejects it. Fiddler just shows you the traffic to the browser (and not what the browser does with it). That would explain why it seems to work in fiddler.

You can find out on ways, to get around the same origin policy here.

Why is the success message not working in this jquery ajax?

3 Answers3