AJAX and the MVC pattern

Question

Hi all. Please redirect me if a similar question exists.. I haven't been able to find anything, though I'm sure that my problem is fairly common...

I have a page that has 5-6 divs that can be individually loaded through Ajax requests. Through a prototype ajax.request(), the server (php) echoes back the HTML code for the division before the client refreshes the divs's innerHTMLs.

Here's my question : What's the best practice for preserving the MVC pattern on the server side concerning the HTML code it throws out?

For now, my models return database data to the controller, enabling it to initiate a really long var containing the HTML code that it then echoes. My problem is that I end up with a lot of HTML code in my controller classes...

Answer 1

You could use JSON for transporting data to the client-side and constructing it there. That way you'll have an abstracted data source not bound by your markup. JSON can be directly evaluated into a javascript object.

Answer 2

If the HTML is mostly in string literals, as I understand it is, you probably should move the HTML outside the <? ?> tags altogether and insert the dynamic contents from the database with small inline PHP snippets that reference variables set by the controller.

This is effectively a template mechanism. Remember, PHP is at its heart a template engine.

Example:

<?php
include 'controller.php'; // set variables used below
?>
<div>
   <h1>Hi there, <?=$UserName?></h1>
   <p>Since you've been here, <?=$numberOfDays?> days have gone by</p>
</div>

etc. This also gives you back the syntax highlighting in your HTML and gets you rid of having to concat all the long string literals inside your PHP code which often messes up the readability of the code.

Answer 3

Do you really like to use MVC? The C can mostly be removed by Conventions / RESTful URLs.

Like Andy said, you should use JSON to transfer the data to the client side. XML is also a wide used alternative (because it acts much better if other apps have to use your services). XML can be tranformed easily to JSON! And JSON code is valid JavaScript Object code. So you can use it to stich client side templates together with it.

You should try EJS for browser/client side templating! If you do so, you have no HTML boilerplate in your controllers! Just business logic. That follows a lot of SOA best practices. The architecture pattern is called SOFEA or SOUI (which is the same).

I've written my homepage with it. The evaluation of a lot template engines has clerified that EJS is the best candidate.

Because: 1. It's fast! 2. It's free (MIT License)! 3. It works well with JQuery 4. It does realy modify the DOM, so other methods can access the used templates (JS Repeater doesn't).

Other frameworks:

1. JSmarty: Not such as easy to use but it can use Smarty templates. It isn't enteprise prooven and still under heavy development.

2. Trimpath Javascript Templates: Doesn't work well with JQuery/Prototype... Also still under development.

3. jQSmarty: Nice, but it seems that the development has stopped. The last change was in 2008.

4. seethrough_js: Invasive template layouting. Nice for Erlang people.

5. JsonML: Also an invasive template format which is based on JSON. What do you think about it? I think designers should stay at their HTML/CSS elements, so no knowledge is wasted.

6. JS Repeater: Reminds me at my own bad tries. I've checked it out and used it.. but it doesn't handle a lot of things very well. (Such es empty fields etc.)

7. Pure: Time to start a relegios war on how to develop pages? I think that Pure isn't the answer. It's bloating if you define what's really to do and it fails to scale like JSF. It has no invasive syntax, thats very good. But the price of the hard to use rules for rendering issues are a no go for me. It just feels don't right. I've met other people which think completly different! Test it out and let me know what you think.

Answer 4

This is what I do for MVC + AJAX...

Really simple implementation, if you were to ask me.

http://jarrettatwork.blogspot.com/2009/02/aspnet-mvc-ajax-brief-introduction.html

Answer 5

If think that the most important letter in MVC is V for working with AJAX. AJAX with HTML, and JS is part of presentation layer so by theory it is place for View - part.

View is responsible for what you send to end user, and MVC patter is there not only to separate Model, View and Controller but to enable us multiple views for the same data model provided.

So it is best to encapsulate code in a class and use that same controller code to render different views. In first case that could be drawing of a static page, but in other scenario it is view specially designed for AJAX calls and data may be in JSON or other standard format it doesn't matter, as long as you respect responsibilities that every layer has.