Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,974 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
- What is AJAX?
- Making requests asynchronous
- Updating the DOM with getElementById
- Reading JSON files
- Working with jQuery and AJAX
- Sending and searching JSON data
- Incorporating CSS transitions
Skill Level Intermediate
And I'm going to save this, and I'll go ahead and create the separate file. I have Transmit open right here, so I'll right-click and select New File and I'll call it script.js. I'm also going to need another file called data.txt, so I'll create it by right-clicking again, selecting New File, and calling this data.txt. Now, I'm going to open up data.txt. This file is just going to have the words "Hello World" here. I'll save it, close this out, and I'm going to open up my script.js file.
I don't really need to do anything with the index.html anymore. I'll go ahead and open this up. And just to make a little bit easier to work with, I'll drag it right next to this index tab and so it will doc it at the same place as this window. So let's start by creating the simplest of XHR requests. We'll need to create a new variable for the object that we're creating. Next, we need to create the request to our XHR object. The open function of this object is going to require three parameters.
First, the method, which is going to be either GET or POST. Then the location of the data file. Since it's in the same folder as this document, it will just be the name of the file. I should note here that AJAX requests have what's called a same domain policy, so you cannot request data objects from domains other than the one you're currently on. Now, the last parameter we pass is a Boolean that specifies whether we want the request to be asynchronous or not. To keep things simple, we're making that false, and that makes a request a synchronous request.
What I want to do is right-click. I'm in Chrome right now, so I want to select Inspect Element, and this will take me to the Developer Tools. And then I want to hit on this tab that says Console. So when you click on that tab you'll see that it returned an XMLHttpRequest object. And we can open that up and take a look at what's returned from our request to the server. So one of the important things that we see here is the status of the request. That property gives us a number, which in this case says 200. That means the AJAX call was successful.
If any other number was here, like 404 or 500, that would mean the call to the server was unsuccessful. So we can modify our code to check for that property. So I'll save that and then I'll switch over to Chrome, refresh the page, and you'll see we get the same request. Now, you can see that text from the file that was loaded in the response and responseText properties. The responseText property is what you want to use because it always has just the text of our response.
So let's go ahead and output that to our document with the writeln command. So let's save that, and we'll switch back into Chrome, and now we can see the text Hello World appear in our browser. So I mentioned before that these requests we're making are synchronous and that means the server is waiting until the requests are done before it continues. Right now you really can't see that as a problem, because we're only making a single request. So I'm going to change the code and make 100 requests to the server to see what would happen.
So I'm going to save this, and I'll switch over to my browser, and I'll reload the page, and you'll see all the requests being made because I have the console open right now. You can see that there's nothing appearing in my browser until it finishes with all the requests. If you take a look at the Network tab in the Developer Tools in Chrome, you can actually see that the browser is executing the requests in sequence and that the page is not even updating until the whole thing is done, and that's not necessarily a good thing.
So use the XMLhttpRequest object to make calls and request data from your server. You start by opening a connection and then sending the data. You can check the status of your requests, as well as access the text returned by your request and do something with that, like writing it to your page.