JSONP 不适用于 ExtJS 4 - 未捕获的类型错误：无法调用未定义的方法“子字符串”

Posted 2023-03-03

【中文标题】JSONP 不适用于 ExtJS 4 - 未捕获的类型错误：无法调用未定义的方法“子字符串”

【英文标题】：JSONP not working on ExtJS 4 - Uncaught TypeError: Cannot call method 'substring' of undefined

【发布时间】：2011-11-21 14:35:03

【问题描述】：

我被这段代码卡住了，我从 Youtube API 获取这个 json 格式的数据，如果我使用 type:'json' 它将失败，因为跨域的事情，但其他元素无论如何都会加载；然后，如果我将 type: 更改为 'jsonp' （这是 ExtJS API 上描述的语法），它会给我这个错误：“Uncaught TypeError: Cannot call method 'substring' of undefined” 我尝试设置 type:'anyotherstupidthing'同样的事情也会发生，那么会发生什么？

这是我当前的数据模型和我的商店：

Ext.define('Video', 
    extend: 'Ext.data.Model',
    fields: ['id', 'title']
);

myStore2 = Ext.create('Ext.data.Store', 
    model: 'Video',
    proxy: 
        type: 'ajax',
        url : 'http://gdata.youtube.com/feeds/api/videos?q=surfing&v=2&alt=jsonc',
        reader: 
            type: 'jsonp',
            root: 'items'
        
    
);

提前致谢！ 编。

【参考方案1】：

JsonP 要求服务器将返回的数据包装在一个 JS 函数调用中。常见的约定是向服务器传递一个名为“回调”的参数，以允许使用唯一名称并避免客户端上的名称冲突。

在浏览器中调用 URL http://gdata.youtube.com/feeds/api/videos?q=surfing&v=2&alt=jsonc&callback=myCallback 表明 YouTube 支持这种约定：

Ext 通过 Ext.data.proxy.JsonP 代理类支持 JsonP。阅读器是标准的 JSON 阅读器，不是特定于 JsonP 的，您只需要考虑从服务器返回的数据结构（将 root 设置为 data.items）。

工作代码如下所示：

var myStore2 = Ext.create('Ext.data.Store', 
    model: 'Video',
    proxy: 
        type: 'jsonp',
        url : 'http://gdata.youtube.com/feeds/api/videos?q=surfing&v=2&alt=jsonc',
        reader: 
            type: 'json',
            root: 'data.items'
        
    ,
    listeners: 
        load: function(store, records) 
            Ext.each(records, function(rec) 
                console.log(rec.get('title'));
            );
        
    ,
    autoLoad: true
);

【讨论】：

代码肯定不行。代理的 url 显示在浏览器 json 中，但不显示在 jsonp 中。因此，您必须添加到 url &callback=myCallback，正如您在代码之前正确提到的那样。但这还不是全部。由于您使用的是&callback=myCallback 而不是默认的&callback=callback，因此您必须将proxy.callbackKey 设置为“myCallback”。

你尝试运行代码了吗？这是经过测试的代码。我确实运行它并且它确实工作（Ext 4.0.2a）。回调参数由 Ext.data.proxy.JsonP 类添加到代理 url。该类还生成参数值以避免与并行/后续请求的名称冲突。