无法使用Sencha Touch加载json(p)跨域

时间:2011-11-23 22:46:26

标签: extjs sencha-touch jsonp

我正忙着尝试将外部json加载到Sencha Touch应用程序中。我可以在应用程序中定义我的数据,或者使用外部json文件来定义我的数据。然后我将我的json文件移动到删除服务器,更改我的代理以键入:'scripttag'来处理jsonp问题,然后我遇到了问题。当我查看我的页面资源时,我看到json文件加载了DID,但它没有像我的本地json文件一样填充我的列表。

使用本地json文件(可行)

    var jsonStore = new Ext.data.Store({
        model: "Person",
        proxy: {
            type: 'ajax',
            url: 'http://dev.liftstudios.ca/data.json',
            reader: {
                type: 'json'
            }               
        },
        autoLoad: true
    });

    var jsonPanel = {
        title: "json",
        items: [
            {
                xtype: 'list',
                store: jsonStore,
                itemTpl:itemTemplate,
                singleSelect: true
            }
        ]           
    };

使用从远程主机加载的相同json文件。

这会加载文件,但不会填充列表。

    var jsonStore = new Ext.data.Store({
        model: "Person",
        proxy: {
            type: 'scripttag',
            url: 'http://www.server.com/data.json',
            reader: {
                type: 'json'
            }               
        },
        autoLoad: true
    });

    var jsonPanel = {
        title: "json",
        items: [
            {
                xtype: 'list',
                store: jsonStore,
                itemTpl:itemTemplate,
                singleSelect: true
            }
        ]           
    };

我可能在这里缺少一些令人尴尬的简单,但我不确定那是什么东西。任何帮助将不胜感激。

3 个答案:

答案 0 :(得分:3)

将代理类型更改为scripttag没有任何意义。如果要加载 scripttag 存储,则还必须实现回调函数。如果你想用现有的json代理进行跨平台的ajax调用,你可以通过在chrome上禁用web安全性来在浏览器上测试它。

可以通过此命令从终端启动Google Chrome来解决跨域问题 google-chrome --args --disable-web-security

查看此链接以获取更多信息

http://www.senchatouchbits.com/7/cross-domain-ajax-requests.html

希望它会有所帮助...

答案 1 :(得分:1)

在商店中使用jsonp类型作为代理类型

var jsonStore = new Ext.data.Store({
    model: "Person",
    proxy: {
        type: 'jsonp',
        url: 'http://www.server.com/data.json',
        reader: {
            type: 'json'
        }               
    },
    autoLoad: true
});

在服务器端实施:

远程服务器端需要配置为以此格式返回数据。以下是如何使用Java,PHP和ASP.net实现此目的的建议:

爪哇:

boolean jsonP = false;
String cb = request.getParameter("callback");
if (cb != null) {
    jsonP = true;
    response.setContentType("text/javascript");
} else {
    response.setContentType("application/x-json");
}
Writer out = response.getWriter();
if (jsonP) {
    out.write(cb + "(");
}
out.print(dataBlock.toJsonString());
if (jsonP) {
    out.write(");");
}

PHP:

$callback = $_REQUEST['callback'];

// Create the output object.
$output = array('a' => 'Apple', 'b' => 'Banana');

//start output
if ($callback) {
    header('Content-Type: text/javascript');
    echo $callback . '(' . json_encode($output) . ');';
} else {
    header('Content-Type: application/x-json');
    echo json_encode($output);
}

ASP.net:

String jsonString = "{success: true}";
String cb = Request.Params.Get("callback");
String responseString = "";
if (!String.IsNullOrEmpty(cb)) {
    responseString = cb + "(" + jsonString + ")";
} else {
    responseString = jsonString;
}
Response.Write(responseString);

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.proxy.JsonP

答案 2 :(得分:0)

var jsonStore = new Ext.data.Store({
    model: "Person",
    proxy: {
        type: 'jsonp',
        url: 'http://www.server.com/data.json',
        reader: {
            type: 'json'
        }               
    },
    autoLoad: true,
   crossDomain: true,
});

crossDomain:true,试试这个