Sencha Touch 无法跨域加载 json(p)答案

【问题标题】：Can't load json(p) cross-domain with Sencha TouchSencha Touch 无法跨域加载 json(p)
【发布时间】：2012-01-05 05:07:51
【问题描述】：

我正在尝试将外部 json 加载到 Sencha Touch 应用程序中。我可以在应用程序中定义我的数据，或者使用外部 json 文件，一切都很好。然后我将我的 json 文件移动到删除服务器，将我的代理更改为 type: 'scripttag' 以处理 jsonp 问题，然后我遇到了问题。当我查看我的页面资源时，我看到 json 文件确实加载了，但它并没有像我的本地 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
            }
        ]           
    };

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

【问题讨论】：

标签： extjs sencha-touch jsonp

【解决方案1】：

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

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

希望对您有所帮助...

【讨论】：

非常感谢，这实际上非常有用，因为我可以在 Chrome 中开发它并在访问 PhoneGap 时将域列入白名单。
很高兴听到...

【解决方案2】：

在 store 中使用 type 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 实现此目标的建议：

Java：

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

【讨论】：

【解决方案3】：

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，试试这个

【讨论】：