Subscriber only lesson.
Sign up to the Introduction to JavaScript course to view this lesson.
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.