<!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.
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.
Your ajax call should be within a domain. Again look at the correction pointed out above about http://
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
. Originhttp://fiddle.jshell.net
is not allowed by Access-Control-Allow-Origin.
$.ajax
function - Quentin 2012-04-05 23:10