Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

Assumptions: We don't care about IE6, and Noscript users.

Lets pretend we have the following design concept: All your pages are HTML/CSS that create the ascetics, layout, colours, general design related things. Lets pretend this basic code below is that:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <link href="/example.css" rel="stylesheet" type="text/css"/>
        <script src="example.js" type="text/javascript"></script>
    <head>
    <body>
        <div class="left">

        </div>
        <div class="mid">

        </div>
        <div class="right">

        </div>
    </body>
</html>

Which in theory should produce, with the right CSS, three vertical columns on the web page.

Now, here's the root of the question, what are the serious advantages and/or disadvantages of loading the content of these columns (lets assume they are all indeed dynamic content, not static) via AJAX requests, or have the content pre-set with a scripting language?

So for instance, we would have, in the AJAX example, lets asume jquery is used on-load:

//Multiple http requests
$("body > div.left").load("./script.php?content=news");
$("body > div.right").load("./script.php?content=blogs");
$("body > div.mid").load("./script.php?content=links");

OR---

//Single http request
$.ajax({
    url: './script.php?content=news|blogs|links',
    method: 'json',
    type: 'text',
    success: function (data) {
        $("body > div.left").html(data.news);
        $("body > div.right").html(data.blogs);
        $("body > div.mid").html(data.links);
    }
})

Verses doing this:

    <body>
        <div class="left">
            <?php
                echo function_returning_news();
            ?>
        </div>
        <div class="mid">
            <?php
                echo function_returning_blogs();
            ?>
        </div>
        <div class="right">
            <?php
                echo function_returning_links();
            ?>
        </div>
    </body>

I'm personally thinking right now that doing static HTML pages is a better method, my reasoning is: I've separated my data, logic, and presentation (ie, "MVC") code. I can make changes to one without others. Browser caches mean I'm just getting server load mostly for the content, not the presentation wrapped around it. I could turn my "script.php" into a more robust API for the website.

But I'm not certain or clear that these are legitimately good reasons, and I'm not confidently aware of other issues that could happen, so I would like to know the pros-and-cons, so to speak.

share|improve this question
add comment

1 Answer 1

up vote 5 down vote accepted

Make it so anyone can reach your content. This means anyone without JavaScript turned on (search engines bots, noscript users, screenreaders, etc). It's called Progressive Enhancement and should be a basic web development principle for every developer. Doing so rarely requires a lot of work as reusing the server side code to handle the Ajax requests usually takes only a few minor modifications. Just because things are "modern" doesn't mean everyone can use a website just like you can.

To summarize: Use Ajax for all of the benefits it offers but always make sure the same content can be reached without it.*

  • This does not apply to intranets and other controlled environments
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.