How to integrate AJAX into a MVC-style web application?

I'm developing a web application using a very simple (maybe not really MVC-compliant) MVC framework, coded by myself while developing the application to keep the code clean. My application, though, has many AJAX components and now I'm stuck trying to integrate them within the general MVC structure. How should they be integrated?

I have something like this in my Javascript files:

$('#pageList').load(BASE_SITE_URL + 'ajax/pageList.php');

and pageList.php used to have a structure like the following one:

<?php

require '../includes/config.inc.php';
require BASE_PATH . 开发者_如何学C'includes/init.inc.php';

// a whole load of Controller logic here and then...
echo "<table>";
//display some user data
echo "</table>";

I'm really confused about this, any advice is appreciated

Few pointers - your website should be functional without javascript. For example, if you have pagination with page urls like /list/?page=1 ... /list/?page=n then you should make sure all of your pages are clickable without actually needing javascript.

Javascript should really be an extension to your website. In the above example, you can come back and use js to replace the functionality of all the pagination with a simple ajax behavior. What you would probably want to do is use jquery.load to do something like:

$("div.content").load("/list/?page=2 div.content > *");

Note the selector after the load. This is very important because I haven't actually created any new HTML pages to make my website AJAX enabled. Instead I use what already is available to the browser as a simple URL and load it using ajax.

Of course, there are times that you need AJAX only content where won't really exist on a URL. In a situation like this I recommend creating a controller for all your ajax stuff and then rendered each path with a view.

I hope this helps.

Here's what I do in my apps:

check for a $_SERVER variable called XMLHttpRequest. If it's set, it's an ajax request and then you can do some logic so that your code doesn't load the views (templates and what not) and outputs a different header() (if any)..

I usually have a js script related to each view called update.js. It's role is to define how the user interacts with the view and create the HTTPREQUEST. Then I have a file called controller.js that receives it, decides what to do with this request and asks the model for the response. Finally the update.js which belongs to the view updates the view with the new information received from the model.

My app directory structure is like this:

model/

• model.class.php
• business.php

controller/

• controller.php
• controller.js

view/

• view.php
• update.js

index.php

I organize the files by it's role rather than the type. I think this is the best approach to the MVC pattern with AJAX. Remember that the aim of this pattern is to keep encapsulation and scalability and this is the best way to do it for me.