1 00:00:00,000 --> 00:00:04,724 [MUSIC] 2 00:00:04,724 --> 00:00:07,969 Hi, I'm Dave, and welcome to AJAX Basics. 3 00:00:07,969 --> 00:00:11,640 AJAX stands for Asynchronous JavaScript and XML. 4 00:00:11,640 --> 00:00:13,818 It sounds complicated, but it doesn't have to be. 5 00:00:13,818 --> 00:00:16,742 In fact, as a concept, it's really simple. 6 00:00:16,742 --> 00:00:21,220 AJAX lets you update HTML without loading a new webpage. 7 00:00:21,220 --> 00:00:25,522 If you've ever used Google Maps, Gmail, Facebook, Twitter and yes, 8 00:00:25,522 --> 00:00:28,071 Treehouse, you've seen AJAX in action. 9 00:00:28,071 --> 00:00:32,793 When you first visit Google Maps, for example, the entire page loads with a map, 10 00:00:32,793 --> 00:00:35,403 a search box, and a few navigation buttons. 11 00:00:35,403 --> 00:00:43,092 If you type a location into the search box, You don't get a new web page. 12 00:00:43,092 --> 00:00:47,248 You get a new map, and some of the user interface elements change, but 13 00:00:47,248 --> 00:00:49,375 you're still on the same web page. 14 00:00:49,375 --> 00:00:52,417 As you drag, new parts of the map appear. 15 00:00:52,417 --> 00:00:56,638 You can zoom in and you can zoom out, and it all happens really quickly. 16 00:00:56,638 --> 00:01:00,446 That's because just parts of the page are being updated, 17 00:01:00,446 --> 00:01:02,320 thanks to the power of AJAX. 18 00:01:02,320 --> 00:01:05,391 Twitter is another website that takes advantage of AJAX. 19 00:01:05,391 --> 00:01:09,491 If you use Twitter, you may have noticed as you scroll down to the bottom of 20 00:01:09,491 --> 00:01:11,360 the page, older tweets appear. 21 00:01:11,360 --> 00:01:13,170 It's a page that never ends. 22 00:01:13,170 --> 00:01:15,167 That's all thanks to the power of AJAX, 23 00:01:15,167 --> 00:01:18,468 loading more tweets whenever you scroll to the bottom of the page. 24 00:01:18,468 --> 00:01:21,418 New content without loading new web pages. 25 00:01:23,540 --> 00:01:26,709 AJAX has lot of uses on the popular entertainment news and 26 00:01:26,709 --> 00:01:28,699 social networking site, Reddit. 27 00:01:28,699 --> 00:01:30,791 Users can vote posts up and down, 28 00:01:30,791 --> 00:01:34,842 helping to move the most popular post to the top of the homepage. 29 00:01:34,842 --> 00:01:39,076 When I click the up arrow on this post, I cast my vote for it. 30 00:01:39,076 --> 00:01:41,529 I don't leave the current web page, but 31 00:01:41,529 --> 00:01:44,427 my vote is sent to the Reddit server using AJAX. 32 00:01:44,427 --> 00:01:47,367 We even do this on Treehouse. 33 00:01:47,367 --> 00:01:51,871 In the forums, you can vote for forum responses, vote them up or down. 34 00:01:53,390 --> 00:01:55,900 This is a really good response, so I'm gonna vote for it. 35 00:01:57,380 --> 00:02:01,637 Again, AJAX is used to send the vote to Treehouse's servers. 36 00:02:01,637 --> 00:02:05,498 Usually, the way we get more web content is to load a new web page. 37 00:02:05,498 --> 00:02:08,968 You click a link, leave the current web page, and load a new one. 38 00:02:08,968 --> 00:02:12,331 Or on a form, you fill out a search box, click Submit, 39 00:02:12,331 --> 00:02:15,930 leave the current page, and load a new page with results. 40 00:02:15,930 --> 00:02:21,541 AJAX gives us another faster and more user-friendly way to update our web pages. 41 00:02:21,541 --> 00:02:25,962 Instead of jumping to a new web page every time we want new information, 42 00:02:25,962 --> 00:02:30,694 AJAX lets you build you web pages that ask for information from a web server. 43 00:02:30,694 --> 00:02:34,062 The web server returns data to the web browser, and 44 00:02:34,062 --> 00:02:39,166 JavaScript processes that data to selectively change parts of the web page. 45 00:02:39,166 --> 00:02:43,907 The amount of data the server returns is usually much less than that sent when you 46 00:02:43,907 --> 00:02:45,331 ask for a full web page. 47 00:02:45,331 --> 00:02:51,479 Another reason why AJAX requests can make your pages feel fast and responsive. 48 00:02:51,479 --> 00:02:53,807 The process of asking a server for 49 00:02:53,807 --> 00:02:58,103 information is technically called making a request of the server. 50 00:02:58,103 --> 00:03:02,379 And when the server sends back its answer, that's called a response. 51 00:03:02,379 --> 00:03:03,912 Keep those two words in mind. 52 00:03:03,912 --> 00:03:08,099 The web is built upon browsers, also called clients, 53 00:03:08,099 --> 00:03:13,663 sending requests to web servers, and servers sending responses back. 54 00:03:13,663 --> 00:03:18,389 You can actually see AJAX in action using the JavaScript console in most web 55 00:03:18,389 --> 00:03:19,147 browsers. 56 00:03:19,147 --> 00:03:24,216 For example, in Chrome, you can open the JavaScript console by clicking 57 00:03:24,216 --> 00:03:28,810 the Settings button, choosing Tools, and JavaScript Console. 58 00:03:28,810 --> 00:03:32,241 This opens the console in the bottom part of the browser window. 59 00:03:32,241 --> 00:03:36,473 To view every single AJAX request, right-click, or 60 00:03:36,473 --> 00:03:43,007 Ctrl-click if you're on a Mac, in the console, and choose Log XMLHttpRequests. 61 00:03:43,007 --> 00:03:45,853 Now, as I grab the map and drag around, 62 00:03:45,853 --> 00:03:49,493 you'll see AJAX requests listed in the console. 63 00:03:49,493 --> 00:03:56,335 You see them here listed as XHR, short for XML HTTP requests. 64 00:03:56,335 --> 00:03:59,222 Each request summons new content for the map. 65 00:03:59,222 --> 00:04:03,147 As you can see, there's a whole lot of AJAX going on here. 66 00:04:03,147 --> 00:04:06,433 AJAX is an important technology that all web designers and 67 00:04:06,433 --> 00:04:08,249 developers should know about. 68 00:04:08,249 --> 00:04:13,236 In this course, you'll learn how to use JavaScript to add AJAX to your webpages. 69 00:04:13,236 --> 00:04:18,515 I won't be covering how to program with the server-side part of the AJAX equation. 70 00:04:18,515 --> 00:04:23,292 That requires one of the many server side programming languages and 71 00:04:23,292 --> 00:04:28,678 frameworks, like Ruby on Rails, PHP, Python, Java, .NET, and so on. 72 00:04:28,678 --> 00:04:33,436 We have lots of videos that can help with that, check the teacher's notes. 73 00:04:33,436 --> 00:04:35,821 With AJAX and your web development tool kit, 74 00:04:35,821 --> 00:04:39,105 you'll be able to build web pages that feel more responsive. 75 00:04:39,105 --> 00:04:43,163 Don't waste your user's time with annoying page refreshes, and 76 00:04:43,163 --> 00:04:45,485 act more like desktop applications. 77 00:04:45,485 --> 00:04:47,380 Let's learn how AJAX works.