WordPress Async 101 - An Introduction to wp-ajax and rest api - WordCamp Bari 2019 - Andrea Cardinali

Andrea Cardinali
WP ASYNC 101
An Introduction to wp-ajax and REST API
Wordcamp Bari - 18 Maggio 2019 - @andreacardinali

● Entrepreneur @ Performize
● WP Dev since 2009
● Web Performance Lover
● Speaker
ANDREA CARDINALI

TABLE OF
CONTENTS
WP-AJAX & REST API
1. QUICK INTRODUCTION
2. COMPARISON (PROS & CONS)
3. AUTHENTICATION
4. PERFORMANCE
5. QUESTION TIME

POLL TIME
wp-ajax vs rest api

(wp-)AJAX
● wp-admin stuff
○ plugins with option panel
○ theme customizer
○ heartbeat
● Page Builder 
● Infinite scroll
● WooCommerce ajax cart

JSON REST API
● Gutenberg
● Many plugins (es. CF7)
● WooCommerce API
● WordPress as Backend

STOP HIT REFRESH
(ajax)

ASYNCRONOUS
JAVASCRIPT
AND
XML

ASYNC REQUEST EXAMPLE
jQuery.ajax({
type: "POST",
url: ajaxurl,
data: { action: ‘nome_azione’,
nome: ‘WordCamp Bari’ }
}).done(function( response ) {
alert( response );
});

var ajaxurl=
<?php echo
admin_url('admin-ajax.php’)
?>
https://www.miosito.it/wp-admin/admin-ajax.php
admin-ajax.php

url: ajaxurl,
parametro: ‘parametro_aggiuntivo' }
alert( response );
});
add_action("wp_ajax_$action",’my_callback’);

$action=‘nome_azione’;
function my_callback()
{
echo ‘Hello ‘.$_POST[‘nome’].’!’;
wp_die();
}
ACTION

ASYNC REQUEST
jQuery.ajax({
type: "POST",
url: ajaxurl,
alert( response );
});

ASYNC REQUEST WITH JSON HANDLING
jQuery.ajax({
type: "POST",
url: ajaxurl,
dataType: ‘json’
if(response.success===true)
alert( response.data );
});

function my_callback()
{
wp_send_json_success( ‘Hello ‘.$_POST[‘nome’].’!’);
}
ACTION WITH JSON RESPONSE

wp_send_json_success($data,$status_code=null)
wp_send_json_error($data,$status_code=null)
wp_send_json($response,$status_code=null)
JSON RESPONSE

//authenticated user only
//anonymous users
add_action("wp_ajax_nopriv_$action",’my_callback’);
SAME ACTION, DIFFERENT HOOK NAME

(wp-)AJAX
TAKE AWAY
1. admin_url('admin-
ajax.php’)
2. plain html or json
3. $action parameter
4. wp_ajax_{$action}
5. wp_ajax_nopriv_{$action}

WP JSON REST API

JavaScript Object Notation (data representation)
Application Programming Interface (contract)
REpresentational State Transfer (software architecture)
JSON + REST + API

https://2019.bari.wordcamp.org/wp-json/wp/v2/speakers/992

https://www.slideshare.net/AndreaCardinali/rivoluziona-il-tuo-sito-con-le-wp-
rest-api-andrea-cardinali
https://wordpress.tv/2018/04/16/andrea-cardinali-rivoluziona-il-tuo-sito-con-le-
wp-rest-api/

JSON REST API
TAKE AWAY
● REST API
● JSON only
● default since WP 4.7
● Default endpoints
● Custom routes

wp-ajax
vs
REST api

wp-ajax
vs
REST api
● authentication
● performances

AUTHENTICATION

AUTHENTICATION
admin-ajax
TAKE AWAY
1. COOKIE BASED
2. wp_ajax_$action for
authenticated user
3. wp_ajax_nopriv_$action
for anonymous

AUTHENTICATION
WP REST API
TAKE AWAY
1. COOKIE BASED (by
default)
2. MUST HAVE for C.U.D.
requests
3. ALTERNATIVES
(throught plugins):
HTTP-AUTH,
JWT,
oAuth 1.0a

PERFORMANCES

AJAX REQUEST
LIFECYCLE
/wp-load.php
/wp-config.php
/wp-settings.php
//(plugin,themes, rest-api)
/wp-admin/admin.php
/wp-admin/includes/ajax-actions.php
//… verifica aggio core,plugin ecc
do_action(‘admin_init’)
do_action(‘wp_ajax_$action’)

REST API
REQUEST
LIFECYCLE
/index.php
/wp-blog-header.php
/wp-load.php
/wp-config.php
/wp-settings.php
//(plugins, themes, rest API)

AJAX REQUEST
LIFECYCLE
/wp-admin/admin-ajax.php
/wp-load.php
/wp-config.php
/wp-settings.php
/wp-admin/admin.php
/wp-admin/includes/ajax-actions.php
do_action(‘admin_init’)
do_action(‘wp_ajax_$action’)
/index.php
/wp-blog-header.php
/wp-load.php
/wp-config.php
/wp-settings.php
//(plugins, themes, rest API)
AJAX REQUEST REST API REQUEST

PAY ATTENTION
to
admin-ajax.php
usage

IT DEPENDS!

PLUGINS ● https://it.wordpress.org/plu
gins/heartbeat-control/
● https://wordpress.org/plugin
s/plugin-organizer/
● https://it.wordpress.org/plug
ins/rest-manager/

● WP DEV
● WOOCOMMERCE DEV
● WEB PERFORMANCE
ADDICTED
● REMOTE WORKING
https://www.performize.it/jobs/

THANK YOU!
Andrea Cardinali

WordPress Async 101 - An Introduction to wp-ajax and rest api - WordCamp Bari 2019 - Andrea Cardinali

More Related Content

What's hot

More from Andrea Cardinali

Recently uploaded

WordPress Async 101 - An Introduction to wp-ajax and rest api - WordCamp Bari 2019 - Andrea Cardinali