使用JavaScript调用跨域asmx Web服务

Question

I have written a web service. I am calling this web service using JavaScript. I am calling this from different domain. For that I have added [System.Web.Script.Services.ScriptService] property in the web service. From JavaScript I am calling the service using XMLHttpRequest . I tested it using Firefox and everything was fine when. But it was not working in IE.

After some searching I found that this is an issue related to Cross domain calling . I have gone through some of the questions posted here. And then I did the following changes in my code -

1. From javaScript I am now calling the service using XDomainRequest .

2. I have added following lines befor the return statements in the web-service - HttpContext.Current.Response.AppendHeader("Access-Control-Allow-Origin", "*"); HttpContext.Current.Response.AppendHeader("Access-Control-Allow-Credentials", "true"); return result; HttpContext.Current.Response.AppendHeader("Access-Control-Allow-Origin", "*"); HttpContext.Current.Response.AppendHeader("Access-Control-Allow-Credentials", "true"); return result;

It is still working fine in firefox. but in IE8 (as per my knowledge, XDomainRequest will not work in lower versions of IE) it is showing error ( XDomainRequest.onerror ).

Am I missing something?

Answer 1

The crux of your problem in IE is that XDomainRequest doesn't support the pre-flighting necessary to make a cross-domain request that includes a Content-Type header. I believe that's fixed in IE10, but even IE9 doesn't fully support CORS .

To reliably make cross-domain requests to ScriptServices in browsers that don't support CORS well, a server-side proxy is (unfortunately) your best bet.

Answer 2

Look into JSONP (json with padding).

Question about JSONP: jsonp with jquery

Has some more info about it: http://api.jquery.com/jQuery.ajax/

Answer 3

your web service runs over HTTP right?

I don't recommend using the native XMLHttpRequest to make ajax request, maybe you should use Jquery to do this, I always do in that way and works in all modern browsers:

ie:

function Activate(EmailId, controle) {
    $.ajax({
        type: "POST",
        url: "/Page/Method",
        data: "&EmailId=" + EmailId,
        success: function (message) {
            $(controle).text(message);
        }
    });
}

EDIT: to make cross-domain requests you can use the James Padolsey plug-In, and do something like this:

$('#container').load('http://google.com');

$.ajax({
    url: 'http://news.bbc.co.uk',
    type: 'GET',
    success: function(res) {
        var headline = $(res.responseText).find('a.tsh').text();
        alert(headline);
    }
});