Loading Data from the Server
This phase is the foundation for all the other MVC Tutorial phases. In this phase, we’ll create a lightweight Model, View, and Controller from scratch using JQuery. You can read more about the motivation for this tutorial from this post.
What type of functionality can you expect when you’re done? The demo below shows (1) loading in all or some of the data from the server, (2) getting data from the cache when available instead of AJAX, and (3) ability to clear the cache and/or console and start over.
Like any good MVC pattern, our goal will be to keep the Model and View logically separate. All of our application logic will reside inside the Controller. So, where does the AJAX fit in? A simple data flow diagram: View <=> Controller <=> Model <=> Cache <=AJAX=> Server The View will only communicate with the Controller, where all of our application logic resides. The Controller will tell the Model when and what data to load, and then relay that data to the View. The Model will keep a local cache of data, as well as manage the AJAX to and from the server.
The Source Code
You can take a sneak peek at the source code here, or download it and follow along on your own machine. All applicable source code will also be displayed inline as it’s explained later in the tutorial.
In the next few pages, I’ll walk you through the code for the Controller, Model, and View, and then lastly we’ll integrate it into a sample HTML page and debrief. So without further ado: