What is Ajax?

- [Narrator] In this course, we'll be learning about Ajax development with PHP. So it makes sense that we should begin with the question, what exactly is Ajax? Ajax is an abbreviation of sorts and it comes from asynchronous JavaScript and XML. The A from asynchronous, the JA comes from JavaScript, and the X from XML. Even though it's an abbreviation, it's still written as a single word with a capital A and a lowercase jax. Simply put, Ajax is what enables a web browser to send and receive data in the background. Even though Ajax has a single name, it's not a single technology. It's actually a combination of several technologies working together. It helps if we begin by understanding the history of Ajax. Starting back in 1996, Microsoft and Mozilla, makers of Netscape and Firefox, begin experimenting with asynchronous loading of content in web browsers. Asynchronous meaning that the content doesn't all load at the same time. In 1999, Microsoft Internet Explorer 5 added something called XMLHTTP ActiveX control. And this was really the first time that we were able to load asynchronous content. Between 2000-2002, Mozilla created a standardized XMLHttpRequest object that was modeled very closely on Microsoft's interface. And it was this standardization that became adopted by all web browsers between 2002-2006. Right in the middle of that period, in 2004, Google began using XMLHttpRequest to asynchronously load content for Gmail. In 2004, they also used it for Google Suggest. That's what happens when you go to the Google homepage and you start typing and it makes suggestions as you type of possible searches that come up right below the search box. And then in 2005, they began using it for Google Maps. Now, Google was one of the first companies to realize the tremendous promise of using XMLHttpRequest but it was not just Google. Flickr, Amazon, and Kayak.com were some of the other early adopters. Up until this point, it's still just a technique for using several different technologies together. The moment when Ajax really caught fire with web developers was when it was given a name and explained how you could use it in an article by Jesse James Garrett of Adaptive Path. His article, "Ajax: A New Approach to Web Applications," came out in February of 2005. It's still available online and it's still a great introduction to the topic. Before Ajax, all web pages used the classic HTTP model. Let's make sure that we understand that first. The user performs an action, for example, they click on a link. An HTTP request is sent from the browser to the server, the server processes the request, and then the server returns HTML back to the browser. One of the key parts here, though, is that the user must wait for those server responses. It has to wait for the new page to be received and to load in the user's browser. By contrast, let's now look at the Ajax model, described by Mr. Garrett. First, the webpage loads JavaScript. Mr. Garrett refers to this as the Ajax engine, though few people actually use that term today. Then when the user performs an action, such as clicking a link, the request goes to the JavaScript first, not to the server. That gives JavaScript the opportunity to handle the request directly. Maybe JavaScript already knows what needs to happen. Maybe something on the page just needs to be modified. Some element of the page could be shown or hidden, or maybe a value would be updated. The JavaScript could also validate the data on a form, it could update the navigation, or edit other internal values. JavaScript also has the opportunity to use that XMLHttpRequest to communicate with the server in the background. And it does that by sending XML asynchronously to the server. So the page is still visible to the user and in the background JavaScript can send a request to the server. And then the response data that comes back can then be used in order to update the page. The chief benefit here being that users can continue to interact with the webpage without waiting. That can happen in the background and the user can continue to scroll up and down the page, to click other things, to trigger other Ajax requests as well. Google Maps remains an excellent example of using Ajax. As you drag, you zoom in, you zoom out, or change between satellite, street, or terrain views, the tiles of the map are updated in the background. And throughout it, users maintain the ability to continue interacting with the map. You aren't stuck waiting for your last click to reload a whole new webpage. Ajax has become so commonplace that it's easy to overlook it and take it for granted. Now, as I said earlier, Ajax is made up of a group of technologies. There's HTML and CSS, there's XML, there's the XMLHttpRequest object, and there's JavaScript. I will assume that you have some experience with these already but if you do not, don't panic, you'll still be able to follow along. We aren't going to dive too deeply into HTML, CSS, XML, or JavaScript. And the basics are easy to grasp. We're going to spend most of our time learning to work with that XMLHttpRequest object, which is really what enables Ajax to happen. However, if you want to get serious about using Ajax in your own development, then I suggest that you learn more about these other technologies so that you can get the most out of them. In particular, JavaScript, HTML, and CSS, in that order, will be the most valuable to you.