Setting Up for Ajax with PHP

[bonerton]

Not sure if this is the right place to post, but I have an existing static page that I'd like to break up into chunks in order to 'ajax-ify' my site, but I'm not sure the best way to go about it. I basically have links that correspond to content in a container div. I'd like to be able to swap the content in the container div accordingly with the help of ajax.

What I'm stuck on is how exactly to separate it all. I'm thinking what I'd do is separate the content into different php pages and attach an ajax 'get' request to the links that gets the corresponding php page. If this is the correct way to go about it, how do I separate with php? Is it as simple as wrapping the DOM elements with a php tag and saving such as this:

PHP Code:

<?php
<div id="content_1" class="content">blah blah blah</div>;
?>

or do I need to use some kind of include(); function?

Then I assume I'd have to set up an index.php page that collects all the separated php pages, but I'm not sure how'd I go about writing that either.

I hope this is clear, I can mock up an example html file if it's too hard to follow?

[rnd me]

you don't actually even need any php to do this. You can store all the content in seperate files and "ajax in" those files as needed. PHP could be used to provide the same type of separation: providing different content based upon the url. The php page would basically print the info you needed, as though it were a "normal" webpage, using the queryString to select what content you need.

[bonerton]

So then I'd separate everything into different html files? Like sidebar.html, content1.html, content2.html... etc, and then compile then in my index.html? Sorry, i'm a total n00b. I feel like i've googled the **** out of this and gotten so many ajax books at the library that go into detail, but i'm still missing some simple step. thanks for your reply.

[rnd me]

Originally Posted by bonerton

So then I'd separate everything into different html files? Like sidebar.html, content1.html, content2.html... etc, and then compile then in my index.html? Sorry, i'm a total n00b. I feel like i've googled the **** out of this and gotten so many ajax books at the library that go into detail, but i'm still missing some simple step. thanks for your reply.

there are three typical approaches to this task:

1. server-side processing. This is where you use simple SSI, PHP, ASP, etc to bundle pages together into a single file right before it's delivered to the client.
pros: always updated, single file delivered to client, good client performance.
cons: server processing lowers the # of clients per hour you can serve.


2. client-side processing. This is where AJAX or JSONP is used to inject content into an HTML shell. My blog is an example.
pros: always updated, less work for server than includes, allows part caching.
cons: slower client performance, more prone to caching problems.


3. templating. this is the procedure used by editors like dreamweaver templates and library items. The separate files are combined by the editor and saved into a single HTML file which is then served to the client.
pros: lowest server resources of all methods;highest # of clients per hour. single file results in high client performance.
cons: not self-updating, editor must run a site update to update the built page with new/altered content.

[bonerton]

hmm, great info, thanks a lot rnd me! I guess i'm gonna move this into another thread since most of my questions now are concerned with the details of achieving this with prototype and scriptaculous.