Embed Size (px)
DESCRIPTION
There was a time when every action taken on a website involved staring at a white screen for 5 seconds as the entire page was reloaded. If, for your clients, that time was last week, you should attend this session. We will learn the basics of using AJAX to improve the speed, performance and presentation of your website. This session will involve writing source code. A basic understanding of editing plugins, themes, hooks and filters will be helpful, but may not be required. As presented at WordCamp Toronto 2014 #WCTO
Citation preview
Using AJAX to Bring Your WordPress Sites to Life
Brian Layman
WordCamp Toronto
2014-11-15
Brian Layman
I work from home
I spend all day on the computer
All best my friends are online
I don’t hang out at parties
I spend my day in a cave like room
Yes, I am an eHermit
http://eHermitsInc.com
Asynchronous JavaScript And XML
Huh?
What is Javascript?
Runs on your computer, not the server
Changes things after the page is loaded
Has been made even simpler by things like Jquery and MooTools and other frameworks
Soooo What is AJAX again?
Runs on your computer
Changes things after the page is loaded
Talks to the server to get info back
Mind=Blown
Chatrooms
Who’s online?
Shopping Carts
Comments
Like/Rate a post
Polls
Maps
Login without refreshing the screen
Infinite Scroll
AJAX Edit Comments
Image Uploading
Category and Tag DropDown
All over the editors
Drag and Drop Themes
1. On the client’s computer a page is loaded in the browser (WordPress built it)
2. Something triggers a JavaScript event (Page load/Button click/Key press)
3. A JavaScript function builds an AJAX call, sends it to the site and prepares a place for the result
4. WordPress sees the AJAX result coming back and sends it to code in your plugin
5. JavaScript gets a response and sends it onto a JavaScript function that does something with the data.
Browser
JavaScript
code
Web Server
“Give me some data”
“Here, data”
Modify the page content,
without refreshing the page
WordPress handles it all for you.
WordPress has two build in action prefixes that allow you “hook” into any AJAX call you make from your plugin or theme.
wp_ajax_nopriv_
wp_ajax_
For example:
wp_ajax_nopriv_doit()
wp_ajax_answer()
wp_ajax_anythingyouwant()
Add some Javascript that waits for the user to do something and then tells the server that it has happened.
Add some Javascript that listens for the server’s response to that event.
Add PHP code that processes the AJAX call and sends info back.
Review all of that code after you are done making sure it is secure..
(More on that later)
This is where we do a live demo, hoping that the WiFi doesn’t die.
You can download the source code here: http://thecodecave.com/examples/ajaxexample.txt
Never trust data given to you by users (even if it is hard coded in your plugin).
Never assume that your plugin is being called as it should be. Always check the permissions.
Never dynamically embed all of you Javascript.
See http://codex.wordpress.org/AJAX_in_Plugins#Separate_Javascript_File
Only send the information than you need to send
Transients & Caching FTW! Do the work only once.
See http://codex.wordpress.org/Transients_API
DO NOT ASSUME wp_ajax_whatever means wp-admin / the back end.
It also fires on the front end, as long as the user is logged in!!!
On Ramp Read all about it here: http://codex.wordpress.org/AJAX
And here: http://codex.wordpress.org/AJAX_in_Plugins
Ben Marshall’s detailed posts on Front End and Back End AJAXhttp://www.benmarshall.me/wordpress-ajax-frontend-backend/
AJAX WordPress progressively built plugin example: http://z9.io/2008/11/01/make-your-wordpress-plugin-talk-ajax/
Fast Lane Underscores BackBone: https://github.com/tlovett1/_s_backbone
JSON API: https://github.com/WP-API/WP-API
Backbone.js App for JSON REST API: https://github.com/WP-API/client-js
BRIAN LAYMANhttp://eHermitsInc.com
http://TheCodeCave.com
http://www.slideshare.net/BrianLayman
http://twitter.com/BrianLayman
My info->your phone, Txt “ehermit” to 50500
