Power By 专否社区

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

Go To StackoverFlow.com

0

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

2012-04-05 22:54
by developer747
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 2012-04-05 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=CelsiusToFahrenhei - developer747 2012-04-05 23:04
It is probably wise to avoid w3schoolsQuentin 2012-04-05 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 2012-04-05 23:13
Have you ever used fiddler - developer747 2012-04-05 23:17
Yes. Once. I prefer other HTTP monitoring tools - Quentin 2012-04-05 23:19
Does my update help you give me some more insight - developer747 2012-04-05 23:20
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 2012-04-05 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 2012-04-05 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 2012-04-05 23:30

1

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.

2012-04-07 21:00
by Arcturus

1

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

2012-04-05 23:01
by Chibuzo
Then how would you explain a successful response detected in fiddler - developer747 2012-04-05 23:02

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.

2012-04-05 23:03
by Quentin
That url is not meant for the browser. The url for the browser is http://www.w3schools.com/webservices/tempconvert.asmx?op=CelsiusToFahrenhei - developer747 2012-04-05 23:08
@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 2012-04-05 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 2012-04-05 23:10
Ads