Question

What is the best way to consume complex json objects in this day and age via XHR?

When doing data binding, in javascript, so far I have used Sencha’s Ext.Js/ Sencha touch model

Eg:

    Store = Ext.create('Ext.data.Store',{
    Constructor: function (config) {
        var config = Ext.apply({}, config, {
            model: 'BasicModel',
            proxy: {
                type: 'ajax',
                url: 'myServerUrl.json',
                reader: {
                    type: 'json'
                }
            }
        });
    }   
});    

Which allows me to consume server data quite easily, and also has convenience methods for all sorts of cool magic around the store ( REST/sorting etc invisibly).

Currently, I am experimenting with using less ExtJs, in some projects I doing, because in some respects its a bit heavy, and as such am looking for something that has similar/better functionality to Ext’s data store, is NOT ExtJS (Eg not Ext-Core)

What is the best XHR utility kit out there at the moment?

Answer 1

I would recommend Knockout.JS or Backbone.

From Knockout.js documentation:

HTML:

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>

JS:

// Here's my data model
var ViewModel = function(first, last) {
    this.firstName = ko.observable(first);
    this.lastName = ko.observable(last);

    this.fullName = ko.computed(function() {
        // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
        return this.firstName() + " " + this.lastName();
    }, this);
};

ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work

As I stated, Backbone is also a solution for you’re spesific question.
Here is a Backbone tutorial designed by a noob for noobs. Here is a more intermediate tutorial regarding cross domain handling