文章/答案/技术大牛

发布

社区首页 >问答首页 >从Sencha Touch 2到外部服务器的跨域更新

问从Sencha Touch 2到外部服务器的跨域更新
EN

Stack Overflow用户

提问于 2012-09-23 08:01:50

回答 1查看 4.8K关注 0票数 4

试图创建一个2应用程序同步到一个Node.js服务器；代码如下。服务器在同一个IP上使用另一个端口，因此这是跨域的。(服务器使用猫鼬与MongoDB后端对话(未显示))

如图所示，使用JSONP代理可以从服务器读取数据，但在编写时中断："JSONP代理只能用于读取数据“。我想JSONP代理编写器配置只是用来编写查询，而不是用来编写同步(保存)。
Sencha状态Ajax代理不能跨域运行，即使在Sencha论坛：http://www.sencha.com/forum/showthread.php?17691-Cross-domain-Ext.Ajax-Ext.data.Connection中讨论了跨域Ext.Ajax/Ext.data.Connection。
我已经找到了几种方法来做(跨域) JSON帖子(例如使用Sencha Touch - JSON请求的移动应用程序生成语法错误)，但不知道如何将它作为一个代理集成到同步我的商店的代理中。Sencha :用于创建/更新功能的ScriptTagProxy url似乎提供了指针，但这是ajax，显然不适合跨域。

我已经在这个论坛和其他地方读了几天了，但我似乎被困住了。任何帮助都将不胜感激。

Node.js和restify服务器

var server = restify.createServer({
  name: 'Server',
  key: fs.readFileSync(root+'/'+'privatekey.pem'),
  certificate: fs.readFileSync(root+'/'+'certificate.pem')
});

server.use(restify.bodyParser());
server.use(restify.queryParser());

function getMessages(req, res, next) {
  Model.find(function (err,data) {
    res.setHeader('Content-Type', 'text/javascript;charset=UTF-8');
    res.send(req.query["callback"] + '({"records":' +  JSON.stringify(data) + '});');
  });
}

function postMessage(req, res, next) {//not yet tested
  var obj = new Model(); 
  obj.name = req.params.name;
  obj.description = req.params.description;
  obj.date = new Date();
  obj.save(function (err) {
        if (err) throw err;
        console.log('Saved.');
        res.send('Saved.');
  });
}

server.post(/^\/atapp/, postMessage);
server.get(/^\/atapp/, getMessages);

server.listen(port, ipaddr, function() {
    console.log('%s: secure Node server started on %s:%d ...', Date(Date.now()), ipaddr, port);
});

森查触觉2

模型

Ext.define('ATApp.model.User', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            { name: 'name',  type: 'string' },
            { name: 'description', type: 'string' },
            { name: 'date',  type: 'date' },
            { name: '_id' }
...

商店

Ext.define('ATApp.store.Data', {
    extend: 'Ext.data.Store',
    requires: [
        'ATApp.model.User',
        'Ext.data.proxy.JsonP'
    ],
    config: {
        autoLoad: true,
        model: 'ATApp.model.User',
        storeId: 'Data',
        proxy: {
            type: 'jsonp',  
            model: 'ATApp.model.User',
            url: 'https://192.168.2.45:13017/atapp',
            reader: {
                type: 'json',
                idProperty: '_id',
                rootProperty: 'records',
                useSimpleAccessors: true
            },
            writer: {
                type: 'json',
                allowSingle: false,
                encode: true,
                idProperty: '_id',
                rootProperty: 'records'
...

控制器

onNewDataRecord: function (view) {
                        console.log('newDataRecord');
                        var now = new Date();
                        var record = Ext.create('ATApp.model.User', {
                            date: now,
                            name: '..',
                            description: '..'
                            });
                        var store = Ext.data.StoreManager.lookup('Data')
                        record.setProxy(store.getProxy());
                        store.add(record);
                        this.activateEditor(record);
                    },
...

javascript

node.js

cross-domain

jsonp

sencha-touch-2

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-09-30 10:20:46

在Sencha-Touch-2应用程序中，浏览器禁止跨域AJAX调用(这违反了相同来源的安全策略)。这涉及到不同的域，不同的IP地址，甚至同一IP地址上的不同端口。JSONP部分地通过获取/读取封装在新启动的HTTP消息中的脚本标记中的数据来规避这一点。通过这种方式，Sencha-Touch-2 JSONP代理可以从(跨域)服务器加载存储(获取/读取)。但是，JSONP代理不能写入数据。在1和2中，描述了我所适应的一种方法。

我的解决方案使用JSONP代理来获取数据，而不是存储(它无法存储)。相反，新记录和要保存或删除的记录将在新启动的HTTP消息中与服务器通信。即使只使用HTTP，服务器也接受消息get (在上面的问题中描述)、put、del和new。Get由JSONP存储/代理load()使用。

Node.js服务器

//routes
server.get(/^\/atapp\/put/, putMessage);
server.get(/^\/atapp\/get/, getMessages);
server.get(/^\/atapp\/del/, delMessage);
server.get(/^\/atapp\/new/, newMessage);

function newMessage(req, res, next) {    
    var obj = new Model();                  // Mongoose create new MongoDB object
    obj.save(function (err,data) {
        var x = err || data;
        res.setHeader('Content-Type', 'text/javascript;charset=UTF-8');
        res.send(req.query["callback"] + '({"payload":' +  JSON.stringify(x) + '});');
    });                                     // send reply to Sencha-Touch 2 callback
}

function putMessage(req, res, next) {    
    var q = JSON.parse(req.query.data);     // no reply: add error recovery separately
    var obj = Model.findByIdAndUpdate(q.key,q.val);  
}

function delMessage(req, res, next) {
    var key = JSON.parse(req.query.data);
    Model.findByIdAndRemove(key);       // no reply: add error recovery separately
}

Sencha控制器

新的

onNewDataRecord: function (view) {
    var control = this;
    Ext.Ajax.Crossdomain.request({
        url: 'https://192.168.2.45:13017/atapp/new',
        rootProperty: 'payload',
        scriptTag: true, // see [1](http://code.google.com/p/extjsdyntran/source/browse/trunk/extjsdyntran/WebContent/js/3rdparty/Ext.lib.Ajax.js?r=203)
        success: function(r) { // process synchronously after response
            var obj = r.payload;
            var store = Ext.data.StoreManager.lookup('Data');
            var key = obj._id // MongoDB document id
            store.load(function(records, operation, success) { // add new record to store
                            var ind = store.findBy(function(rec,id) {
                                                return rec.raw._id==key;
                                            }); // identify record in store
                            var record = store.getAt(ind);
                            control.onEditDataRecord(view,record);
                        }, this);
        }
    });

保存

onSaveDataRecord: function (view, record) {
    rec = {key:record.data.id, val: {}} // save template
    var i; for (i in record.modified) rec.val[i]=record.data[i];
    var delta = Ext.encode(rec); // only save modified fields
    Ext.Ajax.Crossdomain.request({
        url: 'https://192.168.2.45:13017/atapp/put',
        params: {
            data: delta,
        },
        rootProperty: 'payload',
        scriptTag: true, // Use script tag transport
    });
},

删除

onDelDataRecord: function (view, record) {
    var key = record.data.id;
    Ext.Ajax.Crossdomain.request({ // delete document in db
        url: 'https://192.168.2.45:13017/atapp/del',
        params: {
            data: Ext.encode(key),
            format: 'json'
        },
        rootProperty: 'payload',
        scriptTag: true, // Use script tag transport
    });
    record.destroy(); // delete record from store
},

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/12550696

复制

相似问题

问从Sencha Touch 2到外部服务器的跨域更新
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从Sencha Touch 2到外部服务器的跨域更新EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从Sencha Touch 2到外部服务器的跨域更新
EN