Though many of the concepts in this course are still relevant, overall this course does not reflect our current course standards.
Transcript from the "Introducing Ajax in WordPress" Lesson
[00:00:00]
>> Zac Gordon: With just this little bit of code, you could build a whole view app right here, and you could have it hooking in to all the stuff that you need. So if you ever wanted to create a WordPress plugin and power the whole thing with JavaScript, it's just these few lines that will kick everything off, and then it's all in the API to do whatever you want.
[00:00:18] Okay, so we'll show that stuff later, but we needed to get this far. Any questions about difference between working with a plug in and working with a theme in terms of enqueuing JavaScript? Now got it! See I told you it's gonna become second nature. How many people don't know what WP and script does at this point?
[00:00:45] Success, we have learned how to enqueue JavaScript. We're bored with it, we want to move on. So let's get weird and look at some AJAX in WordPress and [COUGH] I have to warn you that AJAX is a little weird in WordPress. And if you've ever worked with AJAX and PHP, the way it usually works is you have Some JavaScript that's going to make a call off a certain PHP file.
[00:01:10] The PHP file is going to run some code and then return some code back that the AJAX request will wait for. Now you can make really simple AJAX request, like hey just go to my homepage and scrape all the data and give it to me. And then I will do something with it.
[00:01:27] But when I talk about AJAX in this context, I'm really talking about AJAX that is interacting somehow. With the WordPress backend and code so like in the AJAX example we're gonna do you click a button and it likes something and adds it to the database and then gives you back the updated value and that you could update on your site.
[00:01:43] Okay, so when I say AJAX and WordPress I don't mean [COUGH] from a purely technical level, anything that's sending out an HML HTTP request. I'm talking about specifically doing something that's gonna interact with the database or the code in WordPress that we kind of want to have protected and there's a few extra steps along the way there.
[00:02:03] So the first thing we have to do is inside of our PHP remember how we could pass in stuff through our localized script? We're going to be passing in a Nonce and URL. [COUGH] A Nonce is a number used only once and it's a unique string and WordPress will generate it for us when the page is loaded and then if we make any AJAX requests it's going to look for that exact same string back to verify.
[00:02:28] So if somebody, let's say we know the URL in WordPress, if we want to ping it and make a request from some other site on to our's. If we don't have that Nonce attached to it it will refuse it so this is one of the validation methods that WordPress uses and very helpful for us.
[00:02:46] [COUGH] Also the URL, our code that we're gonna run is in our functions.php file for themes, so where even if it's in a plugin, how do you get that URL. Do you type in site.com/wp-contents/plugins/mycontmyplugins/assetsjsteams? No, we have to root every single AJAX call in WordPress goes to a single URL.
[00:03:10] And then, WordPress mechanics behind the scenes figures out what function and where should process that call. So we're passing a unique Nonce every time, and the exact same URL. Okay, so all AJAX requests are basically gonna get the same URL but a different Nonce each time. Then in our JavaScript we need to actually make that call right?
[00:03:32] So jQuery is pretty easy for this. There's native fetch, there is Axel which will look at as well. There's a lot of different way. Hey, you could even use a straight up on HTTP request. I wouldn't recommend it but it's all possible. But you have to pass this Nonce and the URL back in a very specific ways.
[00:03:50] So that's the part I wanna show you and that's where we're gonna be copying and pasting as hey, right here in our AJAX call, we won't type out the whole thing. I'm gonna assume at this point, you've probably seen a jQuery AJAX calling your life. So it won't leave you shaking in your boots, and it's really just figuring out how to pass the Nonce and the URL.
[00:04:06] So the AJAX call is made into WordPress, then we need to pass it to the right place, so there's some Hooks involved. And then we have the PHP function that actually processes, gets the code, and gives us back the data, and then JavaScript on the other end. So step one, not normal in all AJAX.
[00:04:31] Step two, maybe it's normal, maybe it's not, depending on security methods, but not always. Three, definitely not normal, right? We don't normally build a PHP app that interjects all AJAX requests and filters and redirects them on their own, but WordPress will. And step four is completely normal, right?
[00:04:50] So steps two and four and five you have to have every time. So we're just adding in this extra hook and the passing out the Nounce. Luckily this is mostly stuff that we've done already.