Like the blog? Get the book »

Ajax Requested Page Return Only Content

Ajax Requested Page Return Only Content

I posted a little tip on CSS-Tricks the other day about how you can load only parts of other pages on a site via Ajax, and how to do that without needing additional HTML wrapping elements to keep it clean. A common criticism of this is that the Ajax request still loads the entire page, using all that bandwidth, it’s just that it only places onto the page the part you specify via CSS selector.

Sometimes it’s hard to have discussions like this without looking at specific use case, but I see where they are coming from. Loading content you aren’t going to use is a waste of bandwidth. It does make progressive Ajax enhancements a lot easier though. And in fact, that’s how our All AJAX theme works.

Smarter Ajax

This had me thinking though… if WordPress pages could be smart enough to know if they are being requested normally or via Ajax, they could return only the appropriate content. Turns out PHP can detect this. So here is the basic idea:


/* Page template, or single.php, or any other typical 
    theme file in charge of displaying a whole page */


/* Ajax check  */
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { ?>

  /* This is Ajax: Return ONLY content */
  <h1><?php the_title(); ?></h1>
  <?php the_content(); ?>

<?php } else { ?>

  /* Normal request: Return everything (header, sidebar, content, etc) */

  <?php get_header(); ?>

  <section id="main-content">
  	<article class="post" id="post-<?php the_ID(); ?>">
  		<h1><?php the_title(); ?></h1>
  		<?php the_content(); ?>

  <?php get_sidebar(); ?>
  <?php get_footer(); ?>

<?php } ?>

I haven’t tested this but it seems like a reasonable solution to me. Anyone have any experience trying something like this?

16 responses

  1. Yes, it seems like a reasonable solution. I prefer creating separate pages for AJAX requests and even put them in separate folders. I like to keep them organized. I’ve tested your code and indeed worked. However, the value of $_SERVER[‘HTTP_X_REQUESTED_WITH’] is ‘XMLHttpRequest’ not ‘xmlhttprequest’. Just wanted to point out this, since it doesn’t work if you put lowercase characters. At least, that’s what my PHP (5.3.0) returns ;-)

  2. I don’t think that’s an elegant solution, I’m pretty certain there’s a better one.

    You can check out what the plugin Infinite Scroll is doing. I haven’t looked into it yet, but I installed this plugin on my custom theme and it just worked like a charm! Right out of the box.

  3. I do something similar, except I pass a variable (e.g., “is_ajax”) via a jQuery ajax request. Then throughout the template I just check that $_GET variable and return the parts I need for an ajax request.

    It’s kind of messy, but creating multiple templates can be, too.

  4. A while back I had the same need and addressed it with a plugin. Should WP do it natively, sure, but for now the plugin works like a charm.

  5. I find this codex page to be most useful.

  6. Not sure why you would do this when JSON is available. Better yet someone has already built an awesome JSON API for WordPress. I believe doing is this way is not only easier but much much faster.

    • Oh yes, I’ve used JSON too instead of showing HTML code or just text as a response.

    • The problem with using JSON is that you have to format it using JavaScript, and this means you have presentation management in two places, so instead you let the php manage the presentation, as it’s already there for the non-Ajax version.

      • No no no. you can easily use same JSON file both in JavaScript and on PHP level. this is really great solution. I build websites to have them both working with JS (ajax, some animations and so on) and and with no JS and I keep all data in one format.

  7. I do this all the time. I add a function to the functions.php file in my theme like what you have above that returns a boolean value. I then use something like:

    <?php if (!is_ajax()) get_header(); ?>

    This turns out to be an elegant solution when you need fallbacks if JavaScript isn’t available.

  8. i’ve used something similar, glad to see i’m not the only one. :)

  9. This technique can cause problems with file-based cache plugins. Using a separate URL for fetching json, xml, or an html snippet will lead to less problems. And if implemented carefully, the rpc data will also be cached.

Comments are closed for this post. Contact us with any critical information.
© 2009–2024 Digging Into WordPress Powered by WordPress Monzilla Media shapeSpace