Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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....
POLL TIME
wp-ajax vs rest api
Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
(wp-)AJAX
Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
● wp-admin stuff
○ plugins with option panel
○ theme customize...
JSON REST API
Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
● Gutenberg
● Many plugins (es. CF7)
● WooCommerce API
● W...
STOP HIT REFRESH
(ajax)
Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
ASYNCRONOUS
JAVASCRIPT
AND
XML
Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
ASYNCRONOUS
JAVASCRIPT
AND
XML
Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
ASYNC REQUEST EXAMPLE
jQuery.ajax({
type: "POST",
url: ajaxurl,
data: { action: ‘nome_azione’,
nome: ‘WordCamp Bari’ }
})....
ASYNC REQUEST EXAMPLE
jQuery.ajax({
type: "POST",
url: ajaxurl,
data: { action: ‘nome_azione’,
nome: ‘WordCamp Bari’ }
})....
ASYNC REQUEST EXAMPLE
jQuery.ajax({
type: "POST",
url: ajaxurl,
data: { action: ‘nome_azione’,
nome: ‘WordCamp Bari’ }
})....
var ajaxurl=
<?php echo
admin_url('admin-ajax.php’)
?>
Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
https://www.miosi...
ASYNC REQUEST EXAMPLE
jQuery.ajax({
type: "POST",
url: ajaxurl,
data: { action: ‘nome_azione’,
nome: ‘WordCamp Bari’ }
})....
ASYNC REQUEST EXAMPLE
jQuery.ajax({
type: "POST",
url: ajaxurl,
data: { action: ‘nome_azione’,
nome: ‘WordCamp Bari’ }
})....
url: ajaxurl,
data: { action: ‘nome_azione’,
parametro: ‘parametro_aggiuntivo' }
}).done(function( response ) {
alert( res...
$action=‘nome_azione’;
add_action("wp_ajax_$action",’my_callback’);
function my_callback()
{
echo ‘Hello ‘.$_POST[‘nome’]....
ASYNC REQUEST
jQuery.ajax({
type: "POST",
url: ajaxurl,
data: { action: ‘nome_azione’,
nome: ‘WordCamp Bari’ }
}).done(fun...
Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
ASYNC REQUEST WITH JSON HANDLING
jQuery.ajax({
type: "POST",
url: ajaxurl,
dataType: ‘json’
data: { action: ‘nome_azione’,...
add_action("wp_ajax_$action",’my_callback’);
function my_callback()
{
wp_send_json_success( ‘Hello ‘.$_POST[‘nome’].’!’);
...
wp_send_json_success($data,$status_code=null)
wp_send_json_error($data,$status_code=null)
wp_send_json($response,$status_c...
//authenticated user only
add_action("wp_ajax_$action",’my_callback’);
//anonymous users
add_action("wp_ajax_nopriv_$actio...
(wp-)AJAX
TAKE AWAY
1. admin_url('admin-
ajax.php’)
2. plain html or json
3. $action parameter
4. wp_ajax_{$action}
5. wp_...
WP JSON REST API
Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
JavaScript Object Notation (data representation)
Application Programming Interface (contract)
REpresentational State Trans...
Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
https://2019.bari.wordcamp.org/wp-json/wp/v2/speakers/992
Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
https://2019.bari.wordcamp.org/wp-json/wp/v2/speakers/992
Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
https://www.slideshare.net/AndreaCardinali/rivoluziona-il-tuo-sito-con-l...
JSON REST API
TAKE AWAY
● REST API
● JSON only
● default since WP 4.7
● Default endpoints
● Custom routes
Wordcamp Bari - ...
wp-ajax
vs
REST api
Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
wp-ajax
vs
REST api
● authentication
● performances
Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
AUTHENTICATION
Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
AUTHENTICATION
Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
AUTHENTICATION
admin-ajax
TAKE AWAY
1. COOKIE BASED
2. wp_ajax_$action for
authenticated user
3. wp_ajax_nopriv_$action
fo...
AUTHENTICATION
WP REST API
TAKE AWAY
1. COOKIE BASED (by
default)
2. MUST HAVE for C.U.D.
requests
3. ALTERNATIVES
(throug...
PERFORMANCES
Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
AJAX REQUEST
LIFECYCLE
Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
/wp-load.php
/wp-config.php
/wp-settings.php
//(p...
REST API
REQUEST
LIFECYCLE
Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
/index.php
/wp-blog-header.php
/wp-load.php
/...
AJAX REQUEST
LIFECYCLE
Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
/wp-admin/admin-ajax.php
/wp-load.php
/wp-config....
PAY ATTENTION
to
admin-ajax.php
usage
Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
IT DEPENDS!
Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
PLUGINS ● https://it.wordpress.org/plu
gins/heartbeat-control/
● https://wordpress.org/plugin
s/plugin-organizer/
● https:...
● WP DEV
● WOOCOMMERCE DEV
● WEB PERFORMANCE
ADDICTED
● REMOTE WORKING
Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
h...
THANK YOU!
Andrea Cardinali
Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
Nächste SlideShare
Wird geladen in …5
×

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

239 Aufrufe

Veröffentlicht am

In this speech I talk about how ajax requests work in WordPress and how to use them correctly. I compare wp-ajax and WordPress Rest API from authentication and performance point of view.
==========================================
Vuoi cambiare dinamicamente il contenuto della pagina e non sai come fare? Ti sei sempre chiesto come funziona l’infinite scroll o l’invio di un messaggio con Contact Form 7?
In questo speech ti mostrerò come funzionano le richieste ajax in WordPress, cosa sono le REST api e quando è più indicato utilizzare un metodo rispetto all’altro.

Speech tenuto durante il WordCamp Bari 2019

Veröffentlicht in: Software
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

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

  1. 1. Andrea Cardinali WP ASYNC 101 An Introduction to wp-ajax and REST API Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
  2. 2. ● Entrepreneur @ Performize ● WP Dev since 2009 ● Web Performance Lover ● Speaker ANDREA CARDINALI
  3. 3. TABLE OF CONTENTS WP-AJAX & REST API 1. QUICK INTRODUCTION 2. COMPARISON (PROS & CONS) 3. AUTHENTICATION 4. PERFORMANCE 5. QUESTION TIME Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
  4. 4. POLL TIME wp-ajax vs rest api Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
  5. 5. (wp-)AJAX Wordcamp Bari - 18 Maggio 2019 - @andreacardinali ● wp-admin stuff ○ plugins with option panel ○ theme customizer ○ heartbeat ● Page Builder  ● Infinite scroll ● WooCommerce ajax cart
  6. 6. JSON REST API Wordcamp Bari - 18 Maggio 2019 - @andreacardinali ● Gutenberg ● Many plugins (es. CF7) ● WooCommerce API ● WordPress as Backend
  7. 7. STOP HIT REFRESH (ajax) Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
  8. 8. ASYNCRONOUS JAVASCRIPT AND XML Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
  9. 9. ASYNCRONOUS JAVASCRIPT AND XML Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
  10. 10. ASYNC REQUEST EXAMPLE jQuery.ajax({ type: "POST", url: ajaxurl, data: { action: ‘nome_azione’, nome: ‘WordCamp Bari’ } }).done(function( response ) { alert( response ); }); Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
  11. 11. ASYNC REQUEST EXAMPLE jQuery.ajax({ type: "POST", url: ajaxurl, data: { action: ‘nome_azione’, nome: ‘WordCamp Bari’ } }).done(function( response ) { alert( response ); }); Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
  12. 12. ASYNC REQUEST EXAMPLE jQuery.ajax({ type: "POST", url: ajaxurl, data: { action: ‘nome_azione’, nome: ‘WordCamp Bari’ } }).done(function( response ) { alert( response ); }); Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
  13. 13. var ajaxurl= <?php echo admin_url('admin-ajax.php’) ?> Wordcamp Bari - 18 Maggio 2019 - @andreacardinali https://www.miosito.it/wp-admin/admin-ajax.php admin-ajax.php
  14. 14. ASYNC REQUEST EXAMPLE jQuery.ajax({ type: "POST", url: ajaxurl, data: { action: ‘nome_azione’, nome: ‘WordCamp Bari’ } }).done(function( response ) { alert( response ); }); Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
  15. 15. ASYNC REQUEST EXAMPLE jQuery.ajax({ type: "POST", url: ajaxurl, data: { action: ‘nome_azione’, nome: ‘WordCamp Bari’ } }).done(function( response ) { alert( response ); }); Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
  16. 16. url: ajaxurl, data: { action: ‘nome_azione’, parametro: ‘parametro_aggiuntivo' } }).done(function( response ) { alert( response ); }); add_action("wp_ajax_$action",’my_callback’); Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
  17. 17. $action=‘nome_azione’; add_action("wp_ajax_$action",’my_callback’); function my_callback() { echo ‘Hello ‘.$_POST[‘nome’].’!’; wp_die(); } Wordcamp Bari - 18 Maggio 2019 - @andreacardinali ACTION
  18. 18. ASYNC REQUEST jQuery.ajax({ type: "POST", url: ajaxurl, data: { action: ‘nome_azione’, nome: ‘WordCamp Bari’ } }).done(function( response ) { alert( response ); }); Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
  19. 19. Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
  20. 20. ASYNC REQUEST WITH JSON HANDLING jQuery.ajax({ type: "POST", url: ajaxurl, dataType: ‘json’ data: { action: ‘nome_azione’, nome: ‘WordCamp Bari’ } }).done(function( response ) { if(response.success===true) alert( response.data ); });
  21. 21. add_action("wp_ajax_$action",’my_callback’); function my_callback() { wp_send_json_success( ‘Hello ‘.$_POST[‘nome’].’!’); } Wordcamp Bari - 18 Maggio 2019 - @andreacardinali ACTION WITH JSON RESPONSE
  22. 22. wp_send_json_success($data,$status_code=null) wp_send_json_error($data,$status_code=null) wp_send_json($response,$status_code=null) Wordcamp Bari - 18 Maggio 2019 - @andreacardinali JSON RESPONSE
  23. 23. //authenticated user only add_action("wp_ajax_$action",’my_callback’); //anonymous users add_action("wp_ajax_nopriv_$action",’my_callback’); Wordcamp Bari - 18 Maggio 2019 - @andreacardinali SAME ACTION, DIFFERENT HOOK NAME
  24. 24. (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} Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
  25. 25. WP JSON REST API Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
  26. 26. JavaScript Object Notation (data representation) Application Programming Interface (contract) REpresentational State Transfer (software architecture) Wordcamp Bari - 18 Maggio 2019 - @andreacardinali JSON + REST + API
  27. 27. Wordcamp Bari - 18 Maggio 2019 - @andreacardinali https://2019.bari.wordcamp.org/wp-json/wp/v2/speakers/992
  28. 28. Wordcamp Bari - 18 Maggio 2019 - @andreacardinali https://2019.bari.wordcamp.org/wp-json/wp/v2/speakers/992
  29. 29. Wordcamp Bari - 18 Maggio 2019 - @andreacardinali 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/
  30. 30. JSON REST API TAKE AWAY ● REST API ● JSON only ● default since WP 4.7 ● Default endpoints ● Custom routes Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
  31. 31. wp-ajax vs REST api Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
  32. 32. wp-ajax vs REST api ● authentication ● performances Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
  33. 33. AUTHENTICATION Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
  34. 34. AUTHENTICATION Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
  35. 35. AUTHENTICATION admin-ajax TAKE AWAY 1. COOKIE BASED 2. wp_ajax_$action for authenticated user 3. wp_ajax_nopriv_$action for anonymous Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
  36. 36. 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 Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
  37. 37. PERFORMANCES Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
  38. 38. AJAX REQUEST LIFECYCLE Wordcamp Bari - 18 Maggio 2019 - @andreacardinali /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’)
  39. 39. REST API REQUEST LIFECYCLE Wordcamp Bari - 18 Maggio 2019 - @andreacardinali /index.php /wp-blog-header.php /wp-load.php /wp-config.php /wp-settings.php //(plugins, themes, rest API)
  40. 40. AJAX REQUEST LIFECYCLE Wordcamp Bari - 18 Maggio 2019 - @andreacardinali /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
  41. 41. PAY ATTENTION to admin-ajax.php usage Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
  42. 42. Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
  43. 43. IT DEPENDS! Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
  44. 44. PLUGINS ● https://it.wordpress.org/plu gins/heartbeat-control/ ● https://wordpress.org/plugin s/plugin-organizer/ ● https://it.wordpress.org/plug ins/rest-manager/ Wordcamp Bari - 18 Maggio 2019 - @andreacardinali
  45. 45. ● WP DEV ● WOOCOMMERCE DEV ● WEB PERFORMANCE ADDICTED ● REMOTE WORKING Wordcamp Bari - 18 Maggio 2019 - @andreacardinali https://www.performize.it/jobs/
  46. 46. THANK YOU! Andrea Cardinali Wordcamp Bari - 18 Maggio 2019 - @andreacardinali

×