3

I want to make Ajax requests without JQuery, and without including wp_load.php. I want to use a vanilla XmlHttpRequest object that I write myself.

Any links, hints, done-it-befores, etc?

  • Without including wp-load.php is absolutely fine but why you want to go without jQuery? – Chittaranjan Jun 3 '14 at 19:35
  • @Chittaranjan- it doesn't matter, but since you asked, I'm one of the crowd that doesn't use JQuery at the drop of a hat: youmightnotneedjquery.com, news.ycombinator.com/item?id=7152068, stackoverflow.com/questions/5099949/…, sitepoint.com/do-you-really-need-jquery, etc. – Ben Jun 3 '14 at 20:20
  • Do you mean without using WordPress to respond to request as well? Then what's WordPress left about the process at all? :) – Rarst Jun 3 '14 at 20:25
  • @Rarst - because I need to access the wordpress posts :) I suppose I could PDO straight into wp_posts but it feels like there's a more wordpress-y way to do it...I'm trying to run a getRecentPosts() query so I'd like the native WP functionality to be intact. – Ben Jun 3 '14 at 20:38
  • if you use admin-ajax.php as ajax url,you will not need include wp-load.php file. – ahmetlutfu Jun 4 '14 at 9:37
1

If all you need to do is grab data about a post/ posts, I'll seriously recommend using the JSON API plugin (http://wordpress.org/plugins/json-api/).

I use it to make vanilla xmlhttp requests to a wp url and get back json

1

Coming back to this on a new application. I just solved this using Angular, and a similar approach could be used with vanilla JS.

First, give Javascript access to the admin-ajax.php URL, something like:

echo "<script type='text/javascript'>var ajaxurl = '".admin_url('admin-ajax.php')."'</script>";

Next, in functions.php, register the action you want the Ajax to perform:

add_action("wp_ajax_infiniteScroll", "infiniteScroll");
add_action("wp_ajax_nopriv_infiniteScroll", "infiniteScroll");

...and add an action handler which corresponds to the second parameter of the above actions:

function infiniteScroll() { 
    // This is what's returned to the client.
    echo "foo"; 
    die(); 
}

Now, all your ducks are in a row. Call ajaxurl with the action parameter set to the action you made above, and everything should work (below example with Angular):

$http({ url: ajaxurl + "?action=infiniteScroll" })
    .success(thenPopulate)
    .error(thenError);

Most solutions "require" JQuery (don't need it) and wp_enqueue_scripts() and a few other "convenience" functions (also not necessary). The main thing is, make the URL available to your JS, register an action, and send that action in your request.

For those concerned about the globally visible ajaxurl, all of the other solutions I've read about use wp_localize_script() which makes a global variable anyway. With the above method, you can at least have a little control over its scope.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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