I am currently utilizing crossrider to develop a plugin that works across various browsers.
Within my implementation, I have two consecutive AJAX requests (one JSON and one JSONP):
- The first request involves a JSON call for "login" which sets a browser cookie.
- The second request is a JSONP call for "save" which sends data to the server using the previously set cookie.
Here is a simplified version 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 Successful");
$.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 Successful:\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));
});
This code functions smoothly across Internet Explorer, Firefox, and Chrome when placed in an HTML file (auto-login followed by auto-save).
However, when integrated into a crossrider extension.json file (using appAPI.ready), it exhibits varied behavior across different browsers.
For Chrome:
- Login process completes successfully.
- Saving operation encounters issues with the following output:
{"readyState":4,"status":200,"statusText":"success"}
"parseerror"
{}
For Firefox:
- Login process succeeds.
- A popup prompts for credentials (even though cookies should have been set during login !!)
- Upon entering credentials (abashir & P@ssw0rd), saving fails as well.
{"readyState":4,"status":200,"statusText":"success"}
"parseerror"
{}
For IE9:
- Login attempt fails with the following error:
{"readyState":0, "setRequestHeader":{},....,"statusText":"No Transport"}
"error"
"No Transport"
In reviewing through Fiddler, I observed that despite the ajax fail function being triggered in Chrome, the server response is actually correct. Here's the request/response pair captured 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"});
It is evident that the callback function generated contains the correct JSON object, yet the execution falls back to the fail function! Consequently, accessing and extracting data from this response becomes impossible.
How can I ensure that these two consecutive requests work consistently across all three browsers (IE, FF, Chrome) when using crossrider?