A Simple AJAX Example

Now that you have an understanding of what Ajax is and why we, 0:00 as web developers, find it exciting and useful, let's dig into some details. 0:04 I'll show you a simple example using plain JavaScript to 0:09 load a chunk of HTML into a page using Ajax. 0:12 If you'd like to follow along, I've set up 0:16 a workspace that has all the files you'll need. 0:18 You can open the workspace by clicking the 0:21 launch workspace button to the right of this video. 0:23 If you're watching this video on our iPad app, you'll 0:26 have to use a laptop or desktop computer to access workspaces. 0:29 I've also included the project files if you want to work locally. 0:33 However, AJAX requests only work through a web server. 0:36 In other words, you can't just preview a local 0:40 file on your computer and expect your Ajax to work. 0:43 You'll need to either set up a local web 0:46 server running on your computer and view your pages 0:48 through it; or upload your project files to a 0:51 web server and view those files through the web. 0:54 Honestly, Workspace is, is the easier way to go if you want to follow along. 0:57 So let's program. 1:01 As I mentioned in the last video, AJAX programming is a four-step process. 1:03 Step one, create an XMLHTTP Request object. 1:08 This step tells the web browser to get ready for AJAX. 1:12 You create an XMLHTTP Request object, or XHR object for short. 1:16 With one simple line of JavaScript. 1:22 I'm going to open the index.html file from my workspace. 1:25 As you can see there's already script tags for adding JavaScript. 1:29 So I'll click in between them and type a line of code. 1:32 What I'm doing here is creating a variable named XHR. 1:37 Which contains a new xml http request object. 1:42 The variable name doesn't have to be xhr, it's just a variable. 1:46 So you could name it ajax or request or even bob for that matter. 1:50 But I'm gonna leave it as xhr. 1:55 The new xml http request part. 1:59 Tells the web browser to get ready to work with 2:02 ajax, and is required any time you'd like to use ajax. 2:04 In fact, for each ajax request, you should create a new XHR object. 2:08 For example, if you wanted to use ajax twice on a page, to 2:13 request data for a sidebar, and another to process a form submission for example. 2:16 You will need two variables, each with their own XHR object. 2:21 Step two, create a callback function. 2:25 This is the most complicated part of the AJAX process. 2:28 That's because the callback function is the programming you want 2:31 the browser to run when the server sends back its response. 2:34 For example, in the case of Twitters endless list of tweets the 2:38 callback function adds the newly retrieved tweets to the end of the webpage. 2:42 The callback function is the heart of your Ajax program all the 2:47 fun stuff you can think to do with the web servers response. 2:51 Think of a callback like a note you leave 2:54 the web browser, give me a call when your ready. 2:57 When the web browser sends off its ajax request it continues doing other things. 3:00 This is the asynchronous part of ajax. 3:04 When a browser sends in a synchronous request, 3:07 it doesn't just wait until it gets a response. 3:10 If it did then the browser would freeze and the user wouldn't 3:12 be able to do anything until the response returned from the server. 3:15 Which could take seconds, or if the server is down or 3:19 there's a problem with the internet, the server might never respond. 3:21 Instead, after the browser sends the request, it continues doing other things. 3:25 Handling other JavaScript programming, responding to 3:30 actions by the user, and so on. 3:33 But, when the browser finally gets a response from the webserver, 3:35 it looks for that note, your callback, and gives it a call. 3:39 Executing all of the programming you set up inside that callback. 3:43 There's another strange thing about the asynchronous nature of AJAX. 3:47 If you make multiple AJAX requests, you'll 3:52 never know which request will be handled first. 3:54 You might send off four AJAX requests and for whatever 3:57 reason the web server can handle that fourth request quickly. 3:59 The callback for that fourth request will run first. 4:03 In other words, you can never tell in which order your AJAX callbacks will run. 4:07 To trigger the call back, we use a special browser event. 4:13 If you've programmed JavaScript before, you should know all about events. 4:17 An event is something that happens in the web browser, an action 4:21 a user takes like clicking the mouse button or submitting a form. 4:24 For example, when a user submits a form, you 4:28 can check to see if they filled it out correctly. 4:31 The event here is submitting the form. 4:34 Checking the form data is the program that runs in reaction to the event. 4:37 The event's callback. 4:41 There are events for mouse clicks, key 4:43 presses, scrolling, and even closing a window. 4:45 AJAX comes with its' own set of events, 4:48 We can add programming to respond to those events. 4:51 The most important is the onreadystatechange event. 4:54 This event is triggered whenever there's a change in an AJAX request. 4:58 Like opening a new request, sending it, or receiving a response. 5:02 We create our callback to respond to that request. 5:05 This programming sets up a function that runs each time 5:15 there is a change in the state of the Ajax request. 5:17 Each step in the Ajax process, like opening a new 5:21 request or sending out that request triggers a change of state. 5:23 For this call-back function we're only interested in the final change of state. 5:27 That's when the server sends back its response. 5:32 We want to get that response and then update our webpage. 5:34 The XML http request object keeps track of 5:37 the state using a special property named ready state. 5:41 That property contains a number including the current state 5:45 of the request and that property holds the number four. 5:48 Then the request is done and the server has sent back a response. 5:51 Let's add a conditional statement to test for that state 5:55 [BLANK_AUDIO] 5:57 [BLANK_AUDIO] 6:02 So here, we're checking if the ready state is equal to 4. 6:04 That means we've got the response back. 6:07 We'll take the full AJAX response and place it into the web page. 6:09 The data we get back is going to be a chunk of HTML. 6:13 And we'll place it inside a div tag that has the ID of AJAX. 6:16 You can see that div down here and there is the id, Ajax. 6:21 First thing you need to do is select that Div. 6:25 We can do that using standard, dominant, 6:31 manipulation methods that are built into web browsers. 6:33 In this case we are selecting. 6:36 An element that has the ID of ajax. 6:38 The next thing we do is set its innerHTML property. 6:41 InnerHTML is a property that contains all the HTML inside an element. 6:47 By changing its value, we can change the HTML that appears inside it. 6:52 [BLANK_AUDIO] 6:56 Every XML HTTP request object has a property called response text. 7:00 This is the information that the web server sends back. 7:06 Here we're taking the response text, and we're storing it inside of the div. 7:10 In this case, we have a simple call back. 7:13 Remember the programming doesn't run until the response comes back from the server. 7:16 In fact, we have two more steps to complete the AJAX request. 7:21 Step three, open a request. 7:25 An HXR object has a method or function called open. 7:27 [BLANK_AUDIO] 7:31 This function prepares the browser for sending the request. 7:35 You give the function two pieces of information. 7:39 The first is the HTTP method that you're going to use. 7:42 The most common methods are GET and POST. 7:46 But there are others, such as PUT and DELETE. 7:49 You'll use GET if you want to send a request for data 7:52 a request for data and POST if you're sending the data. 7:54 Like information from a form, for the server to save in the database. 7:57 I'll talk more about these two methods in the next video. 8:01 The URL is where the request is going. 8:05 This could point to a file or a server-side program on your web server. 8:08 On our example, I'm just pointing to a file in the workspace. 8:12 We'll load that file into the page. 8:16 Now the open function just gets the browser ready 8:18 to make a request, but it doesn't send that request. 8:20 That's the last step of the process. 8:24 Step 4, sending the request. 8:27 The previous three steps gave the web browser all the information it needs. 8:29 So we can finally send off the request to the web server. 8:33 Sending off the request takes just a simple bit of code. 8:37 [BLANK_AUDIO] 8:39 In our case since we're requesting a chunk of 8:43 html we don't provide the send method with any 8:46 information, but when you need to submit information to 8:48 the server like the users input from a web form,. 8:51 You can pass the send method that data. 8:55 Alright, let's see this in action. 8:57 I'm gonna save the page, and preview it. 8:59 Ta-dah, ajax. 9:01 Okay. 9:05 Well this doesn't look like much. 9:06 But let's take a peek under the hood, 9:07 i'll open the JavaScript console, and reload the page. 9:09 In Chrome I can go, to the tools. 9:13 Open up the java script console, make sure I've got 9:16 a log, xml, http request option selected and reload the page. 9:20 There you can see the ajax request that was made. 9:27 So, we've done it! 9:31 But, it's not that interactive. 9:32 Let's make this a bit more interactive by adding a button, that 9:34 when you click, sends the request and loads the data to the page. 9:37 I'll place a button down here below the H1 tag. 9:50 I've added an ID to this button. 9:55 I've also added an on click of it. 9:57 When the button is clicked, there's a function, called send ajax that runs. 10:00 I'll create that function now. 10:04 [BLANK_AUDIO] 10:05 Now I wanna make sure that that function triggers the send method. 10:18 So I'll put the send method inside of the function. 10:21 The last step is we'll make the button disappear. 10:23 After its clicked and the Ajax loads, the button goes away. 10:27 All right. 10:36 Let's check this out. 10:37 I save the file, reload the preview, there's the button, and there's our Ajax. 10:37