Successive json & jsonp requests fail using Crossrider?

Question

I'm using crossrider to implement a cross-browser plugin.

I've two successive AJAX requests (JSON and JSONP):

1. The first is a JSON request for "login" which sets a cookie in browser.
   
2. The second is a JSONP request for "save" which saves some data to server using the cookie.

Here's a simplified example of the code:

$.ajax({ 
    url : "https://app.testafy.com/api/v0/user/login", 
    type : 'GET', 
    cache : false, 
    dataType : 'json', 
    data : {login_name: "abashir", password: "P@ssw0rd"} 
}).done(function(response) { 
    alert("Login Success"); 
    $.ajax({ 
        url : 'https://app.testafy.com/api/v0/test/save', 
        type : 'GET', 
        cache : false, 
        dataType : 'jsonp', 
        data : {"pbehave":"For+the+url+http%3A%2F%2Fstackoverflow.com%2F%0D%0A","title":"test","description":" "} 
    }).done(function(response) { 
        alert("Saving Success:\n\n" + JSON.stringify(response, undefined)); 
    }).fail(function(jqXHR, textStatus, errorThrown) { 
        alert("Saving Failure:\n\n" 
            + JSON.stringify(jqXHR, undefined) + "\n\n" 
            + JSON.stringify(textStatus, undefined) + "\n\n" 
            + JSON.stringify(errorThrown, undefined)); 
}); 
}).fail(function(jqXHR, textStatus, errorThrown) { 
    alert("Login Failure:\n\n" 
        + JSON.stringify(jqXHR, undefined) + "\n\n" 
        + JSON.stringify(textStatus, undefined) + "\n\n" 
        + JSON.stringify(errorThrown, undefined)); 
}); 

It works very well for IE, FF & Chrome, if it's in an HTML (auto-login then auto-save).

But when placed in a crossrider extension.json (in appAPI.ready), it gives three different behavior in each browser.

For Chrome:

• Login terminates successfully.
• Saving fails with output:
  

{"readyState":4,"status":200,"statusText":"success"}
"parseerror"
{}

For Firefox:

• Login terminates successfully.
• A popup asks for credentials (as if the cookies weren't set by login !!)
• after entering the credentials (abashir & P@ssw0rd)
• Saving fails with output:

{"readyState":4,"status":200,"statusText":"success"}
"parseerror"
{}

For IE9:

• Login fails with output:

{"readyState":0, "setRequestHeader":{},....,"statusText":"No Transport"}
"error"
"No Transport"

PS, using fiddler, i noticed that in chrome the response returned from the server is correct (despite that ajax fail function is called), here's the request/response pair from fiddler:

REQUEST:

GET https://app.testafy.com/api/v0/test/save?callback=jQuery17107044411341194063_1364461851960&pbehave=For%2Bthe%2Burl%2Bhttp%253A%252F%252Fstackoverflow.com%252F%250D%250A&title=test&description=+&_=1364461865618 HTTP/1.1 
Host: app.testafy.com 
Connection: keep-alive 
Accept: */* 
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.172 Safari/537.22 
Referer: http://stackoverflow.com/ 
Accept-Encoding: gzip,deflate,sdch 
Accept-Language: en-US,en;q=0.8 
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3 
Cookie: __utma=124963983.2014233417.1360749029.1362583015.1362996135.12; __utmc=124963983; __utmz=124963983.1362322761.9.3.utmcsr=stackoverflow.com|utmccn=(referral)|utmcmd=referral|utmcct=/; GSG_SESSIONID=ee03a02cdb6f3c0e3d812795be63c788

RESPONSE:

HTTP/1.1 200 nginx 
Access-Control-Allow-Origin: * 
Content-Type: application/json; charset=utf-8 
Date: Thu, 28 Mar 2013 09:03:48 GMT 
P3P: CP="ALL ADM DEV PSAi COM OUR OTRo STP IND ONL" 
Set-Cookie: GSG_SESSIONID=ee03a02cdb6f3c0e3d812795be63c788; domain=app.testafy.com; path=/; secure; HttpOnly 
Content-Length: 273 
Connection: keep-alive 

jQuery17107044411341194063_1364461851960({"test_id":"558","message":"Phrase check has found the following error(s), but your test was still saved:\nThere's no For rule for '+the+url+http%3A%2F%2Fstackoverflow.com%2F%0D%0A'\n\nSaved new test as id#558","project_id":"151"});

As you may noticed, the call of the generated callback function contains the right json object, despite the fail function is called back ! And this response cannot be accessed to extract the data from it !

How to make the previous 2 successive requests work on the 3 browsers (IE, FF, Chrome) using crossrider ?

Answer 1

I suspect that the issue relates to cross-domain restrictions encountered when using $.ajax from within the Extension scope.

You can avoid this issue by using our appAPI.request.post method per the example code below. The code was tested in Chrome, and both the login and save succeeded.

Let me know if you need any further assistance with this.

appAPI.ready(function ($) {
    appAPI.request.post({
        url : "https://app.testafy.com/api/v0/user/login",
        onSuccess: function (response) {
            alert("Login Success");
            appAPI.request.post({
                url : 'https://app.testafy.com/api/v0/test/save',
                onSuccess: function (response) {
                    alert("Saving Success:\n\n" + appAPI.JSON.stringify(response));
                },
                onFailure: function (httpCode) {
                    alert("Saving Failure:\n\n" + httpCode);
                },
                postData : {
                    "pbehave" : "For+the+url+http%3A%2F%2Fstackoverflow.com%2F%0D%0A",
                    "title" : "test",
                    "description" : " "
                }
            });
        },
        onFailure: function (httpCode) {
            alert("Login Failure:\n\n" + httpCode);
        },
        postData: {
            login_name : "abashir",
            password : "P@ssw0rd"
        }
    });
});