带有 Sencha Touch 的 JSONP 不起作用

Question

我正在关注 Sencha Touch 的这个教程：http://www.vimeo.com/15672696 完美的教程，完美无瑕。

但是当我尝试在我自己的项目中重用这段代码时，我没有工作。 这是我所做的：

在我的 Sencha touch 应用程序中，我编写了以下函数：

showContacts = function()
{
    Ext.util.JSONP.request({
        url: 'http://www.hotcoffee.be/check-relations/index.php/json/contactpersonen',
        callbackKey: "callback",
        params: {
            unique: Math.random()
        },
        callback: function(data)
        {
            var contacts = data.results;
            nameOfPanel.update(contacts);
        }
    });
}

首先，我用 PHP（codeigniter）编写了自己的 JSON 文件：

<?
    $row[] = array(
        "name" => $item->name,
        "first_name" => $item->first_name,
        "avatar"=>$item->avatar
    );

    // PASSING THE ARRAY $row TO A VIEW
    // ON THE VIEW I OUTPUT THE ARRAY

    $this->output->set_content_type('application/json')->set_output(json_encode($row));
?>

（结果：见 showContacts 函数的 URL）

这不起作用，所以我认为使用 PHP 文件作为 JSON 有问题，所以我创建了一个 JSON 文件：

（结果：http://www.hotcoffee.be/check-relations/json/friends.json）

现在看来这也不起作用。我在很多小时内都在为此头疼... 我还在 Chrome 的调试器中收到以下消息：

Resource interpreted as Script but transferred with MIME type application/json. (contactpersonen:-1)
Uncaught SyntaxError: Unexpected token : (contactpersonen:1)
Resource interpreted as Image but transferred with MIME type text/html. (csi:-1)

另一件事是我可以确保面板和 tpl 写得很好，因为使用硬编码的测试数据它确实有效。只有加载 JSON 文件才是问题所在。

有人知道怎么处理吗？ 非常感谢！

Answer 1

这是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);
}

当你在chrome或firefox中调试时，你会发现响应加入了Ext.util.JSONP.callback({})

这就是 jsonp 如何“从与正在运行的页面的原始域不同的域中的页面检索数据”，并将数据提供给正在运行的页面。

Answer 2

我在这里回答了类似的问题：Sencha seems to not like Rails' json。它是特定于 Rails 的，但这个概念仍然适用。

基本上詹姆斯皮尔斯是正确的。您返回的内容需要包装在标签和回调函数中。这将在您的页面上插入代码并运行脚本，该脚本具有调用您提供的功能的效果。

$response = "<script type='text/javascript'>";
$response .= $_GET['callback'] . "(" . json_encode($row) . ")";
$response .= "</script>";
$this->output->set_content_type('application/json')->set_output($response);