Wednesday, September 20th, 2006

AJAX MVC (so to speak)

Category: JavaScript, PHP, Programming

Ever feel like, when you’re coing up that next great Ajax application, that you’re doing the same things over and over again? Like there has to be something better out there to help you make development of common functionality a lighter and easier task? MVC (Model/View/Controller) just might be what you’re looking for, and in this new posting on, they show you the basics of creating your own Ajax MVC framework.

This is sort of a framework thing to create AJAX applications, based on the MVC design pattern. Yep, I have a lot of buzzwords here, I admit, but this shouldn’t be taken too seriously. I was doing a bunch of small projects lately and I found myself using something like this little framework, without even thinking about it. Then I thought about it and I found that the scripts and the organization of them may resamble MVC a bit. So how does MVC fit when you mix things like thin and fatter client, HTML, JavaScript, XMLHttpRequest, PHP and CSS?

They answer the question by comparing the “usual flow” of an Ajax application to the structure that MVC provides. They use PHP for some of the backend work, but they use Javascript (including some Yahoo UI libraries) to handle the interaction with the user (in the View). They also use an Ajax connection to grab data from the backend server and a little extra Javascript to push that content out to the page.

It’s a pretty simple example of what can be done, but it gives you a good idea of how Ajax/advanced Javascript can be integrated very easily with the Model/View/Controller style of development. To check out a demo of this mini-app, click here, and to just grab the source files click here.

Posted by Chris Cornutt at 7:20 am

3.2 rating from 47 votes


Comments feed TrackBack URI

Given enough time, eventually a million Javascript Ajax coders will reproduce Java Swing in Javascript.

Comment by Ivan — September 20, 2006

So the solution to feeling that you’re “doing the same things over and over again?” is “creating your own AJAX MVC framework”?

Comment by Gonzalo — September 20, 2006

That’s where TIBCO GI started back in 2000 — a MVC approach to deliver web apps that look and feel like desktop GUIs. There were lots of comparisons to JavaSwing and this architectural approach to the challenges that arise once you go beyond basic DHTML manipulation cases back then too.

Comment by Kevin Hakman — September 20, 2006

So the solution to feeling that you’re “doing the same things over and over again?” is “creating your own AJAX MVC framework”?

It’s not re-inventing the wheel. It’s called searching for the most convenient way of designing, developing, and deploying web applications.

Comment by MezZzeR — September 20, 2006


Comment by Marko — September 20, 2006

MVC is news? A fundamental approach to OOP is just now occuring to Javascript developers? I can only assume this is a link to help out the newbies.

Comment by Tim — September 21, 2006

On, I am using some in-house developed code that allows DWR integration with WebWork, so we have AJAX-MVC. The benefits are qutie obvious and I am very happy with this decission. And by the way: I have contributed back this code to DWR (it still needs polishing and small fixes, but for now it prooved good enough).


:Architect of
.w( the_mindstorm )p.
Co-founder of

Comment by Alex Popescu — September 22, 2006

Update: jMVC is now integrated with ASP.NET, making a simple yet powerful way to put MVC-clean UIs in your existing ASP.NET application. The tricky client/server plumbing is dealt with automatically, so your strongly-typed .NET objects can be read and written in your client-side view.

Comment by Codeville — November 5, 2007

Check out JavaScriptMVC for a complete MVC framework. It’s got everything you would need.

Include – makes it easy to compress any JavaScript application, no matter how complex its dependencies. It leaves you to focus on organization with logically separated JavaScript files.

Model – Easily connect to any data source using REST APIs. Based on the Jester library, Model uses a simple, ActiveRecord-like syntax and supports cross-domain communication.

View – Views cleans the HTML out of your JavaScript with client side templates. Instead of messy HTML string concatenation, organize your code with templates that let you see the structure of your markup.

Controller – Keep your application logic separate from your HTML with simple, DRY event handlers. Controllers use event delegation, meaning you never have to reattach your event handlers even when edit your page’s HTML.

Also, everything is a plugin, so you only have to load the components you want. Even better, we are making library INTERdependent. This means that if you include a library like prototype, JavaScriptMVC will know to only load functionality that prototype doesn’t provide.

Comment by JustinMeyer — February 26, 2008

Leave a comment

You must be logged in to post a comment.