extjs 使用 jsonp，从远程 url 访问数据答案

【问题标题】：extjs using jsonp,Accessing data from remote urlextjs 使用 jsonp，从远程 url 访问数据
【发布时间】：2014-02-12 07:50:00
【问题描述】：

使用 extjs，我从一个系统运行服务器，在另一个系统中提供 url，我在 extjs 版本：4.02 中使用 JSONP，当我检查响应时，我以 json 格式获取数据，当我尝试在控制台中打印或存储我没有得到..这是我的 extjs 代码...

<script type="text/javascript">

            Ext.Ajax.cors = true;
            Ext.Ajax.useDefaultXhrHeader = false;   

        Ext.define('User', {
            extend: 'Ext.data.Model',
            fields: ['empid', 'name', 'email']
        });

    var myStore = Ext.create('Ext.data.Store', {
                    model: 'User',                     
                    autoLoad:true,
                    proxy: {
                        type: 'jsonp',

                      // url : 'data/tagfamily.json',
                        url:'http://192.168.7.70:8080/palamanagement/user/getAllRecords',

                                            },
                    listeners:{
                        'load':function( store, records, successful, eOpts ){                                             
                            alert(records);
                            console.log(records);

                        }
                    }
                });

【问题讨论】：

由于性质，您应该在第二个域上提供callback 函数。请仔细阅读文档。 docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.proxy.JsonP
服务器的响应是什么样的？它需要被格式化为代理可以执行的回调。在此处查看 JsonP 代理的文档（和示例响应）：docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.proxy.JsonP
@existdissolve 感谢您的回复：[{"empid":1,"age":12,"department":"sme","email":"muruga@techaffinity.com"," name":"murugan","phone":4565465441,"designation":"软件工程师"},{"empid":2,"age":23,"department":"sme","email":"jessy @techaffinity.com","name":"Jessyfhgfh","phone":4423023222,"designation":"Software Engineer"}] 这是我的输出数据作为响应，如何使用回调函数？
@OğuzÇelikdemir 感谢您的回复，你能给出任何具体的原因或例子，我为什么要使用 callBack()....

标签： extjs

【解决方案1】：

您实际上必须返回如下内容：

someCallback({
    users: [
        {
            id: 1,
            name: "Ed Spencer",
            email: "ed@sencha.com"
        }
    ]
});

所以你已经拥有了你需要的 JSON；您只需要您的服务器响应将 JSON 包装在回调中，以便 JSONP 代理可以执行并使用数据加载您的商店。

因此，在处理 JSONP 请求时，您的服务器脚本需要识别作为请求的一部分发送的“回调”参数。然后它需要使用这个参数的值来包装你的 JSON 响应。

请务必阅读我和 Oguz 发布的文档：他们很好地概述了要求。但是，如果您不使用回调进行响应，您将永远无法让标准 JSON 响应与 JSONP 代理一起使用。

【讨论】：

【解决方案2】：

当您从 DOMAIN-A 向 DOMAIN-B 请求时，您应该在代理定义中提供回调函数。回调函数将在请求完成后使用。

例如，在 Flickr REST 服务中，有一个 jsoncallback 参数，我们应该给出我们的函数名称以完成我们的请求。这样，我们的请求 url 将是：

.../?jsoncallback=ourFunction

为了能够提供我们的函数名，ExtJS 中有一个属性是callbackKey。像这样：

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: ['empid', 'name', 'email']
});

Ext.data.JsonP.request('http://api.flickr.com/services/feeds/photos_public.gne', {
    callbackKey: 'jsoncallback',
    callback: ourFunctionName
});

或

Ext.data.JsonP.request('http://api.flickr.com/services/feeds/photos_public.gne', {
    callbackKey: 'jsoncallback',
    callback: function(data) {
        ...
    }
});

PS：我知道，您不会在文档中找到 callback 属性，但只是为了确保存在。检查ext-all-debug-w-comments.js 文件，第 108486 行

Flickr Callback Function
JsonP callbackKey

【讨论】：