Locked lesson.
About this lesson
What's the difference between GET and POST and when should you use them?
Exercise files
Download this lesson’s related exercise files.
AJAX Requests - GET or POST?.docx60.1 KB AJAX Requests - GET or POST? - Solution.docx
60.1 KB
Quick reference
AJAX Requests - GET or POST?
Choosing whether to use GET or POST for your form request method is important.
When to use
Every time you create a web form with AJAX, you'll need to choose GET or POST.
Instructions
GET and POST are very different.
GET is used to send small amounts of data. It's not particulary secure.
Post is used to send large amounts of data. It's much more secure.
Please note: AJAX requires a web server to run. If you want to try this AJAX code on your own, it won't work locally, but it will work on a real website with an active server.
To send data using GET with our AJAX code:
<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?firstName=John&lastName=Elder", true);
xhttp.send();
}
</script>
To send data using POST with our Ajax code:
<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("POST", fileName.txt, true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("firstName=John&lastName=Elder");
}
</script>
Hints & tips
- Choosing GET or POST can be important
- Use GET for small bits of data
- Use POST for large bits of data
- 00:04 In this video I wanna dig into this a little bit deeper and
- 00:09 look at the XMLHttpRequest and GET and POST.
- 00:12 To exchange information with a server behind the scenes, we use something
- 00:17 called the XMLHttpRequest, so the syntax for that looks like just this.
- 00:21 It's just this line right here.
- 00:23 We're creating a variable, we're calling it new XMLHttpRequest.
- 00:28 It's a function we can see, because it has the parenthesis.
- 00:30 And then we call this thing by just, here we're defining it,
- 00:33 here we actually call it right here.
- 00:35 Xhttp dot blah, blah, blah, function.
- 00:38 And inside this function we have these two lines right here, open and send, right?
- 00:43 And those are the ones I sort of want to focus on right now.
- 00:45 And you notice, look at this open one first, and
- 00:49 you see inside of here we have three parameters GET, text.txt, and true.
- 00:54 And the first one is the type of request, and we've got it listed as GET,
- 00:58 it could also be POST.
- 01:00 And I'll talk about, in a little bit, the difference between those two.
- 01:03 The second part is the name of the file that we're gonna be requesting
- 01:06 from the web server.
- 01:07 And the third part is something to do with synchronous versus asynchronous.
- 01:12 And this could be true or false.
- 01:14 And think of it like in the background, or do we want to do this in the background?
- 01:18 True or false?
- 01:19 So you're almost always gonna want true.
- 01:20 We always want it to be asynchronous.
- 01:22 We want it to be done independently in the background, so that will always be true.
- 01:26 So that GET and the POST, let's talk about that for a minute.
- 01:29 Those are the two HTML form methods.
- 01:32 So anytime that you fill out a form with HTML,
- 01:34 you need to choose whether to send it by GET or send it by POST.
- 01:38 And GET is easier and faster than POST, so you'll usually use GET.
- 01:42 But you use POST when you're sending lots of information, and
- 01:45 also POST is a little bit more secure.
- 01:47 So you'll use POST from time to time too,
- 01:49 just depending on what type of form you have.
- 01:51 If it's sending sensitive data, you're gonna wanna send it by POST,
- 01:54 things like that.
- 01:55 We've used GET here.
- 01:56 If we want to actually send data, we're not actually sending any data,
- 02:00 we're just clicking a button.
- 02:01 But if we wanted to, we could append data to this by coming up here to our text,
- 02:06 putting a question mark and then appending our data.
- 02:10 So if we had a fill-out form and the first input field was first name,
- 02:13 and the second input field was last name, and as a user I typed in John and Elder,
- 02:17 it would look something like this.
- 02:19 Actually we would put variables instead of John and Elder, but you get the idea.
- 02:22 Now to do the same thing with POST.
- 02:24 Just to give you an example, we have to actually change this around a little bit.
- 02:28 And so I'm just gonna paste this in here and get rid of that.
- 02:34 So we have the same send, but instead of appending our information
- 02:39 to this file name here with a question mark, we put it on it's own line.
- 02:43 And we put those parameters inside of this thing.
- 02:45 This line right here, this is just setting URL encoding, 'cause like I said
- 02:48 remember POST is a little bit more secure, so we have to specify it in coding.
- 02:53 And that's what that is.
- 02:54 Pretty much the same method.
- 02:55 And I'll put all this code in the resource files, so you can kinda look through it.
- 02:59 So that's pretty much it.
- 03:00 Open and send, POST and
- 03:02 GET, create an XMLHttpRequest like this, call it like this.
- 03:06 Now we still haven't looked at this stuff here and what all this is.
- 03:09 And we'll look at that in the next video.
- 03:11 And then this all become very, very clear.
- 03:13 And you'll see how easy it is to use this stuff.
- 03:15 Like I said, in the next video I'll talk about Ajax responses.
Lesson notes are only available for subscribers.