Nate Reist WCGR WP AJAX presentation

NATE REIST

AJAX: USING JAVASCRIPT IN WORDPRESS

FOLLOW ME ON TWITTER @NATEREIST

NATE REIST AJAX: USING JAVASCRIPT IN WORDPRESS

WHAT WE’LL BE TALKING ABOUT

• What is AJAX and why should we use it?

• How can we use AJAX in plugins and themes?

• Code examples

• Issues, tips and tricks


SOME ASSUMPTIONS

• You know some PHP

• You know some JavaScript

• You know something about WordPress hooks and filters

• Even if you don’t I hope this makes you aware of what you can

do with WP_AJAX

INTRODUCTION

WHAT IS AJAX?


Stronger than dirt!


WHAT IS AJAX?

AJAX stands for Asynchronous JavaScript and XMLHttpRequests

To break that down…

• Asynchronous means to not be synchronous, or not happening at the same time. The data retrieved is not loaded at the time of page load.

• JavaScript will request data from somewhere ( our WordPress in this case )

• The data is returned in XML format


HOLD UP!

I don’t want XML, I want JSON! JavaScript Object Notation is easier, in my opinion, to work with. Sometimes this is called AJAJ (Asynchronous JavaScript and JSON), but that is one in the same.


WHY USE AJAX?

Pros:

• It is fast: load lighter pages quicker. You can request only what you need.

• It allows for more interactivity.

• Takes the load off your web server if you can defer some processing to the client side

!

Cons:

• It is client side, so there are a lot of other areas for things to go wrong. Every different browser comes back into the ring as a contender.

• Another language or library or two to really learn.


COMMON USES OF AJAX

• Contact Forms

• Infinite Scroll

• WP Post edits in the admin

• WP Menu editor

PLUGINS / THEMES

HOW TO USE AJAX



GETTING HOOKED

To get started, you need to have WordPress listening for AJAX calls. This can be done by adding an action to the wp_ajax_ or wp_ajax_nopriv_ hook. Do this by adding your action name to the hook as part of the string.!

For example:

!

!

!

Your JavaScript can then on that hook. Something like: when clicked request AJAX response.!

Your function should return a valid response that JavaScript can interpret.


STEPS IN AN AJAX TRANSITION

1. WordPress / PHP renders your page to the browser

2. JavaScript starts running in the user’s web browser

3. JavaScript makes AJAX call back into WordPress application

4. WordPress and PHP runs the appropriate hook and functions returns a response to the browser

5. JavaScript parses the response properly and updates the DOM


1. WORDPRESS / PHP RENDERS YOUR PAGE TO THE BROWSERThe normal load of your page to the browser, theme and plugins loaded, content gets pulled from the database, scripts get enqueued, AJAX hooks are populated, page gets built.


2. JAVASCRIPT STARTS RUNNING IN THE USER’S WEB BROWSERThis is when all of your JavaScript starts to take hold with event listeners, etc.


3. JAVASCRIPT MAKES AJAX CALL BACK INTO WORDPRESSOn click, AJAX request


4. WORDPRESS RUNS APPROPRIATE HOOKS AND FUNCTIONS…then returns a response to the browser.


5. JAVASCRIPT PARSES THE RESPONSE + UPDATES THE DOM


DEMO

Download and code along: https://github.com/natereist/wcgr-ajax-likes/

https://github.com/natereist/wcgr-ajax-likes/

USING AJAX

ISSUES, TIPS + TRICKS



SOME TIPS• Use wp_nonces to determine user intent and keep the proper response

returned, as well as a light security layer

• Things you can return

• JSON

• XML

• HTML

• strings

• integers

• Enqueue your scripts properly and localize data to your scripts to keep it clean

• wp_ajax_ hook is great for protected interactions, where as wp_ajax_nopriv_ is for anyone to access


POTENTIAL ISSUES• If you get a 0 it usually means there is an error in how you have hooked

your functions or spelling. You could also be trying to access a private hook while not logged in, or you didn’t pass some other security check.

• If you get an internal server error, something in your code is wrong. Usually a parse error.

• JavaScript cannot handle the response, or a JavaScript error is usually bad formatting of data. Headers already sent can be due to a PHP notice or warning from PHP.


TRICKS• You can update WP AJAX callbacks in development and see results

without refreshing your page.

• Use Chrome developer tools and Firebug, etc. to quickly view JSON responses using the console.log function in development. Don’t put this into production unless necessary.

• It is not supported by all browsers, but you shouldn’t be logging debugging data to consumers anyway!

• You can return full HTML, if you were just going to replace a section of the site with new content and don’t want to parse JSON or XML.

• There is a core class for passing back really clean and good XML data if you prefer that: http://codex.wordpress.org/Class_Reference/WP_Ajax_Response

• wp_send_json is great because it will JSON encode things for you and then exit the PHP WordPress application.


COOL USES

Some things that you could do to make more interactive WordPress applications:

• Auto saving things like meta fields

• Full JavaScript framework based on applications like Ember, Angular or Backbone

• Cool web components with things like Polymer or react.js

• Live updating of content, score/stock tickers

• Simple or complex interactive features like chat clients or JavaScript games


IN CONCLUSION…

WP_AJAX is a great way to extend the functionality of your WordPress plugins, themes, sites or applications.

With a focus more lately on JavaScript-based web applications and speed and bandwidth being an issue, it is a great way to begin to optimize performance and increase interactivity.


CONNECT WITH MEMY COMPANY mindutopia.com !ON WORDPRESS profiles.wordpress.org/natereist !TWITTER @natereist

Software

Nate Reist WCGR WP AJAX presentation