4

I have been trying to call a .NET method (both as asmx file and as a normal aspx file) from another domain through JQuery and I just can't get the job done in every browser. At the moment it works fine in Firefox but not in IE.

function save() {
    if (jQuery.browser.msie && window.XDomainRequest) {
        // Use XDR
        var params = "{'height':" + 10 + ",'width':" + 10 + ",'pos':'" + 10 + "'}";
        var xdr = new XDomainRequest();
        xdr.onerror = alert_error;
        xdr.ontimeout = alert_timeout;
        xdr.onprogress = alert_progress;
        xdr.onload = alert_loaded;
        xdr.timeout = 10000;
        xdr.open("post", 'http://domain/reciever.asmx/setdata');
        //Tried as webservice and as a normal aspx page
        //xdr.open("post", 'http://domain/default.aspx');
        xdr.send(params);
    }
    else {
        var params = "pos=" + positions + "&width=" + screenWidth + "&height=" + screenHeight;
        var myAjax = new jQuery.ajax(
        "http://domain/default.aspx",
        {
            type: 'post',
            cache: false,

            crossDomain: true,
            data: params
        });
    }
}

On the server end the web.config has:

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
  </customHeaders>
</httpProtocol>

And the webservice 

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string setdata(int width, int height, string pos)

The aspx page returns:

Response.Clear();
Response.ContentType = "text/plain";
Response.AddHeader("Access-Control-Allow-Origin", "*");
Response.End();

Fiddler says: Fiddler has detected a protocol violation in session #2565. Content-Length mismatch: Request Header indicated 38 bytes, but client sent 0 bytes. So i would believe it to be the "Access-Control-Allow-Origin" but this I have set (to my knowledge at least).

Can someone help me understand what I am doing wrong.

Dennis
  • 61
  • 1
  • 4
  • Have you tried the request without running through Fiddler? This KB article suggests that proxies may cause issues: http://support.microsoft.com/kb/287705 – monsur Jul 05 '11 at 15:09

1 Answers1

1

Some browsers do not allow cross-domain Ajax calls (a call using the XmlHttpRequest object) for some security reasons.

But the solution is instead of ajax calls use JSONP calls. The JSONP avoids this by making a request suitable for a script file. By using JSONP the following things happen to make cross-domain request possible,

1.Instead of accessing the XHR object, the browser first creates a new script tag to inject into the HTML DOM.

2.The script tag's URL is set to the URL you're looking to get/post(using HTTP GET) data to.

3.The script tag is injected into the page, causing...

4.The request is sent to the server, even if it's cross-domain

5.The server returns the data in the form of a JavaScript function call

6.The browser receives the data and executes the function call

See the urls below to get the implementation details,

http://www.codeproject.com/Articles/78757/Making-Cross-Domain-jQuery-AJAX-Calls.aspx

http://usejquery.com/posts/9/the-jquery-cross-domain-ajax-guide

Hope this definitely helps you...

Harun
  • 5,109
  • 4
  • 38
  • 60
  • I have been looking at this method earlier today, but didn't quite get how I would be able to make a post instead of a get. Can this be done by this method? – Dennis Jul 03 '11 at 18:10
  • I think it is not possible to make a JSONP POST request. JSONP works by creating a – Harun Jul 03 '11 at 18:45
  • The following link might help you to pass parameters through a url and get them from a webservice, http://stackoverflow.com/questions/2022878/posting-cross-domain-json-to-asp-net-with-jquery – Harun Jul 03 '11 at 18:54
  • Hi Harun. As far as i have seen JSONP does not allow post as you say, but I need to send between 1 and 10 kb of data and that can not be done throught get (browsers have a max url length between 512 characters and 2000). Really need the help, if you have any other ideas please post :) thanks – Dennis Jul 03 '11 at 19:46
  • @Dennis, In JQuery 1.5 and above there is a attribute named crossDomain (so download latest Jquery). Set this to true and try. See the url for implementation details - http://stackoverflow.com/questions/6316915/ajax-cross-domain-request. I'm not sure about this but do give a try.. – Harun Jul 04 '11 at 10:24