JavaScript

Introduction to Backbone.js Part 5: AJAX – Video Tutorial

Everyone loves AJAX. A few years back it was probably the biggest buzz word in all of web development. Now HTML5 and CSS3 have stolen the show, but AJAX has now taken its place as a first-class citizen among web development - and specifically JavaScript - tools. And to make things even better, Backbone.js has built in support for AJAX and makes it dead simple for you to use it to synchronize your models with a database, as I show in this video tutorial.

Backbone.js Video Tutorial Series

Final JavaScript Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
Backbone.emulateHTTP = true; // Use _method parameter rather than using DELETE and PUT methods
Backbone.emulateJSON = true; // Send data to server via parameter rather than via request content

var Person = Backbone.Model.extend({
    initialize: function() {
        this.on('all', function(e) { console.log(this.get('name') + " event: " + e); });
    },
    defaults: {
        name: 'undefined',
        age: 'undefined'
    },
    urlRoot: "/backbone.php",
    url: function() {
        var base = this.urlRoot || (this.collection && this.collection.url) || "/";
        if (this.isNew()) return base;

        return base + "?id=" + encodeURIComponent(this.id);
    }
});

var person = new Person({id:1});
person.fetch(); // fetch model from DB with id = 1

person = new Person({name:"Joe Zim", age:23});
person.save(); // create and save a new model on the server, also get id back and set it

person = new Person({id:1, name:"Joe Zim", age:23});
person.save(); // update the model on the server (it has an id set, therefore it is on the server already)
person.destroy(): // delete the model from the server

var People = Backbone.Collection.extend({
    initialize: function() {
        this.on('all', function(e) { console.log("People event: " + e); });
    },
    model: Person,
    url: "/backbone.php"
});

var people = new People();
people.fetch(); // Get all models for this collection
people.create({name:"Joe Zim", age:23}); // Create model, add to Collection and add to DB
people.create({id:6, name:"Chuck Norris", age:72}); // Update model: add to Collection, update DB

Database and PHP Script

I’ve gotten a request for the PHP Script that was used in the demo for the video, so I’ve included it - along with a SQL export of the MySQL Database - right here so you guys can do some experimentation of your own. Enjoy! Download PHP and SQL

Concluding Backbone.js AJAX and the Whole Backbone.js Tutorial Series

That’s all there is to this Backbone.js tutorial series, but make sure to check back in a couple weeks or so when I start a series showing step by step how to use Backbone.js to create a full application. Happy Coding!

Backbone.js Video Tutorial Series

Author: Joe Zimmerman

Author: Joe Zimmerman Joe Zimmerman has been doing web development ever since he found an HTML book on his dad's shelf when he was 12. Since then, JavaScript has grown in popularity and he has become passionate about it. He also loves to teach others though his blog and other popular blogs. When he's not writing code, he's spending time with his wife and children and leading them in God's Word.