About this lesson
What is AJAX and what is it used for?
Exercise files
Download this lesson’s related exercise files.
What is AJAX.docx200.3 KB What is AJAX - Solution.docx
199.9 KB
Quick reference
What is AJAX
AJAX stands for Asynchronous JavaScript and XML.
When to use
Use it when filling out forms to talk with a web server behind the scenes in the background.
Instructions
AJAX allows us to fill out a form, and get a response from our web server without reloading the web page.
Here's a simple AJAX example. Be sure to add a file called text.txt with some text in it, into your development environement directory tree.
<div id="ajax">
<h2>What can AJAX do right here?</h2>
<button type="button" onclick="someAjax()">Change My Content</button>
</div>
<script>
function someAjax() {
var xhttp = new XMLHttpRequest();
//we still don't really know what this stuff does..
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("ajax").innerHTML = this.responseText;
}
};
xhttp.open("GET", "text.txt", true);
xhttp.send();
}
</script>
Hints & tips
- AJAX lets us fill out a form and get a response from the server without reloading the web page
- It speeds up form submission
- 00:05 In this video I want to start talking about AJAX.
- 00:08 And we'll be looking at AJAX for the next couple of videos.
- 00:10 AJAX is really neat and super useful, especially these days.
- 00:13 So what is it?
- 00:14 Well, AJAX stands for asynchronous JavaScript and XML.
- 00:18 A asynchronous, J JavaScript, and A XML X, AJAX.
- 00:23 So we don't really care about the XML part so
- 00:25 much, we just like the asynchronous JavaScript part.
- 00:28 So what exactly does that mean?
- 00:30 Well, web pages are basically static, right?
- 00:32 For the most part, once they've loaded they just sort of sit there.
- 00:35 If you want to do something else, you have to fill out a form,
- 00:38 click a button, click a link, do something.
- 00:40 Well, AJAX lets us do things behind the scenes without reloading that page.
- 00:45 Specifically, for the most part, you're going to use AJAX with filling out forms.
- 00:49 And it allows us to contact a web server behind the scenes with form information
- 00:54 and then bring back a result from the web server and put on the screen,
- 00:58 all without reloading the page.
- 01:00 Very awesome, allows us to speed things up tremendously.
- 01:03 It's all about speed these days on the Internet, right?
- 01:05 It's just really, really cool.
- 01:06 Let's play around a little bit and just to see sorta what's going on here.
- 01:09 First, let's create a quick button and some text.
- 01:14 And I'm just going to paste this in here.
- 01:19 And you can look at this, we just have an H2 tag and a button and
- 01:24 when you click the button it's gonna call this some AJAX function.
- 01:28 Let's go ahead and create that function real quick.
- 01:30 And this is gonna make your eyes roll back in your head a little bit,
- 01:35 but we'll explain what all this stuff is in the next video.
- 01:39 Basically if we look through to this real quick we don't
- 01:41 really need to understand this, but look at this line here "GET", "text.txt".
- 01:45 I wanna come up here and right-click on our little folder and
- 01:49 create a New File, and I'm gonna call it text.txt.
- 01:52 And if we open this, I can just print in Why hello there!
- 01:58 Whatever, just some text.
- 01:59 Save it, go ahead and close it.
- 02:00 And if we save our original file, come back to our website.
- 02:04 We click this button.
- 02:05 It says Why hello there!, which is the text that was in our text file.
- 02:09 So I know we went over this really quickly.
- 02:11 Basically, this line right here is gonna put our response that we got
- 02:16 from this text file into our AJAX ID and that's what's going on.
- 02:21 Basically, it's really kind of hard to understand what happened here, but
- 02:25 AJAX submitted the form when we clicked that button.
- 02:28 It submitted it in the background.
- 02:30 It went back, grabbed the text from that file, brought it back to our webpage,
- 02:34 and output it on the screen, all without reloading this page.
- 02:38 We can see this page, it hasn't been reloaded, it just boom,
- 02:41 immediately did it, all in the background, and that's just very, very cool.
- 02:46 In the next couple of videos, we're gonna go through here and
- 02:48 we're gonna learn what all this stuff is, and how to play around with this stuff.
- 02:52 I just wanted to give you a quick intro with this video.
- 02:54 In the next video, like I said,
- 02:55 we'll learn about AJAX requests, specifically GET and POST.
- 02:59 We see this GET right here, we'll start to learn what that's all about.
Lesson notes are only available for subscribers.