连续的json& jsonp请求使用Crossrider失败?

时间:2013-03-31 15:00:37

标签: javascript ajax json jsonp crossrider

我正在使用crossrider来实现跨浏览器插件。

我有两个连续的AJAX请求(JSON和JSONP):

  1. 第一个是“login”的JSON请求,用于设置cookie 浏览器。
  2. 第二个是“保存”的JSONP请求,它使用cookie将一些数据保存到服务器。
  3. 这是代码的简化示例:

    $.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)); 
    }); 
    

    它适用于IE,FF& Chrome,如果它在HTML中(自动登录然后自动保存)。

    但是当放置在crossrider extension.json(在appAPI.ready中)时,它会在每个浏览器中提供三种不同的行为。

    对于Chrome:

    • 登录成功终止。
    • 保存失败并输出:
      

    { “readyState的”:4 “状态”:200, “状态文本”: “成功”}
      “parseerror”
      {}


    适用于Firefox:

    • 登录成功终止。
    • 弹出窗口要求提供凭据(就好像登录没有设置cookie一样!!)
    • 输入凭证(abashir& P @ ssw0rd)
    • 保存因输出失败:
      

    {“readyState”:4,“status”:200,“statusText”:“success”}
    “parseerror”
    {}


    对于IE9:

    • 登录失败,输出:
      

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

    左,使用fiddler,我注意到在chrome中,从服务器返回的响应是正确的(尽管调用了ajax失败函数),这里是来自fiddler的请求/响应对:


    请求:

    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
    


    响应:

    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"});
    

    您可能已经注意到,生成的回调函数的调用包含正确的json对象,尽管回调了失败函数!并且无法访问此响应以从中提取数据!

    如何使用crossrider在3个浏览器(IE,FF,Chrome)上使用前2个连续请求?

1 个答案:

答案 0 :(得分:3)

我怀疑该问题涉及在扩展范围内使用$ .ajax时遇到的跨域限制。

根据下面的示例代码,您可以使用我们的appAPI.request.post方法来避免此问题。代码在Chrome中进行了测试,登录和保存都成功了。

如果您需要任何进一步的帮助,请与我们联系。

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"
        }
    });
});