Become A Web Developer - Part 18A: HTTP/AJAX/JSON | Andrei Neagoie | Skillshare

Become A Web Developer - Part 18A: HTTP/AJAX/JSON

Andrei Neagoie, Senior Software Developer + Instructor

Become A Web Developer - Part 18A: HTTP/AJAX/JSON

Andrei Neagoie, Senior Software Developer + Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
3 Lessons (41m)
    • 1. HTTP/HTTPS

      19:58
    • 2. JSON

      7:25
    • 3. AJAX

      13:37
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

349

Students

--

Projects

About This Class

Part A - HTTP/AJAX/JSON

This is the tutorial you've been looking for to become a web developer in 2018. It doesn’t just cover a small portion of the industry. In this multipart video series we will covers everything you need to know to get hired: from absolute zero knowledge to being able to put things on your resume that will allow you to live the life you want. 

Sounds too good to be true? Give me 5 minutes of your time to explain to you why I built this course and what is different here than thousands of other courses all over the internet.

  1. There is no wasted time here. We won’t be using outdated technologies like PHP, Wordpress and JQuery. Although still useful, outdated technologies like the above are low paying and demands for them are decreasing. In this course, you will learn the specific technologies that are the most in demand in the industry right now. These include tools and technologies used by the biggest tech companies like Google, Facebook, Instagram, etc… It’s geared specifically for people that want to learn employable skills in 2018.

  2. After finishing this course, you will be able to apply for developer roles, or upgrade your job title as a developer and earn a higher salary. We won't be taking any shortcuts in this course. I am going to take your from absolute zero, where I teach you how the internet works, to mastery, where I show you how to build an image recognition app using a Machine Learning API (a subset of Artificial Intelligence).

  3. This course is taught by an instructor who has worked in silicon valley, and one of the top tech companies in Toronto. I have built large scale applications, and have managed a team of developers. I have worked directly with these technologies. I am not an online marketer or a salesman. I am a senior software developer who loves programming and believes that there needs to be a course out there that actually teaches valuable skills.

  4. I know your time is valuable. You want a course that outlines the best way to learn the topic in simple, well explained methods so that you fully understand topics instead of watching somebody on your screen and having no clue what is going on. I have created this course after consuming hundreds of books, tutorials, and online courses while I was learning. I have taken the best pieces, the best methods, that I have found, and condensed everything so that you can learn in the most efficient way possible. 50 hours of videos doesn't mean much if the instructor isn't engaging or focuses on outdated topics. 

  5. We have a thriving online chat community so you really feel like you are part of a classroom and not just watching videos by yourself. You will have a chance to communicate with fellow students, work on group projects together, and contribute to open source. Anytime you have a question you can ask in the chat and someone will surely be able to help you right away. 
  6. The course is designed to give you employable skills so you can get a job. Here is what one student recently wrote after taking the course and being hired right away: 
    "I’m a self taught dev, who has been out of work for ~6 months. I had some family things that came up that prevented me from seeking permanent employment, so for awhile I was Postmates/Uber delivery driver.
    After taking this course, I immediately got catapulted back to where I was before, but better equipped and with the knowledge to take on the next job. I had just finished the React section when I went to a recent interview, and it really helped me excel. As of today, I am officially re-employed back in the field, and it is all thanks to this course. I had a blast creating the final project, and FINALLY got around to learning SQL statements, and getting to use them in a project. I’m really ecstatic that Andrei went with teaching relational databases over something like MongoDB, which can also be fun, but is less practical for use on the job. So thanks Andrei , I really enjoyed the course and will be making sure to share it with others who find it helpful. I’m also looking forward to the new ES7/8 content that was recently added, and going through the DB stuff again when I go to build a personal project."

In this course, you will be taken through online videos and exercises where you will be able to do the following things by the end:

  • Build real complex applications and websites
  • Build an image recognition app together at the end of the course so you can add it to your portfolio
  • Go into a job interview confident that you understand the fundamental building blocks of web development and the developer space in 2018
  • Be able to go off on your own and grow your skills as a developer having built a solid foundation
  • Learn how front-end, servers, and databases communicate and how they all fit together in the eco system
  • Build your own startup landing page. 
  • Go off and remotely work by being a freelance developer and bid on projects.
  • Know EXACLTY what a day in the life of a developer is like and what the day to day technologies and tools will be that you are using. 

By the end of this course you will be comfortable using the below skills and you will be able to put them on your resume:

  • HTML5
  • CSS
  • Bootstrap 4
  • Javascript (ES6/ES7/ES8)
  • React + Redux
  • Git + Github
  • Node.js
  • Express.js
  • NPM
  • PostgresSQL
  • SQL

This course is the accumulation of all of my years working, learning, and teaching coding and all of the frustrations and incomplete information I have encountered along the way. There is so much information out there, so many opinions, and so many ways of doing things, that unless you have spent the last years working with these technologies in a company, you will never fully understand. So this course is the answer to that exact problem. I have gone through thousands of coding books and online tutorials and bootcamps. I have worked with these tools on real applications. Throughout the years I have taken notes on what has worked, and what hasn't and I've created this course to narrow down the best way to learn and the most relevant information. 

I will succeed if you succeed in this course. Therefore, I will be there every step of the way helping you understand concepts and answer any questions you have.

I am 100% confident that you won't find a course like this out there that is as well organized, and as useful, to build a strong foundation for you to start a new career. We're not going to be building simple todo applications and cat image sliders. We are going to learn actual practical skills that will put you into the workforce. Some unique sections that you won't find anywhere else are:

  • React.js + Redux: you will learn the library that companies like Netflix, Facebook and Instagram use to build fast, scalable applications. This is one of the highest in-demand skill in the industry.
  • A day in the life of a developer: What will your day to day look like and what tools will you use? I will take you through a sample day at a tech company.
  • How does the internet actually work. What is the history of these technologies: I will actually have you understand the underlying concepts of the internet, and how the technologies we have now, have come to be where they are.
  • How do you actually deploy a real life app so that it is secure, and won't get hacked: How does a real life app get out to the public?
  • What is Machine learning and how you can harness it's power: Whether you have heard about it or not, this is something that you will hear more and more in the coming years. Those who understand the high level concepts and can harness it will have an advantage. 
  • What is your developer environment on your computer look like: We will be setting up our computers with all the tools necessary of a developer so you can use the same setup when you go into the workforce.

Why do we teach the above? Because in this day and age, just knowing HTML CSS and Javascript is not good enough and you won't be able to grow in your role and command a higher salary. I am teaching you these things because these are the things you should know in 2018 so that you are miles ahead of the rest. 

Make this the year that you took a risk, you learned highly in demand skills, you had new experiences, and you received new opportunities. I hope you join me in this journey. 

This is the proudest work I have ever done in my life and I am confident that you won't find a course better than this. 

See you inside!

Taught by: 

Andrei is the instructor of the highest rated Web Development course on many platforms. His graduates have moved on to work for some of the biggest tech companies around the world like Apple. He has been working as a senior software developer in Silicon Valley and Toronto for many years, and is now taking all that he has learned, to teach programming skills and to help you discover the amazing career opportunities that being a developer allows in life. 

Having been a self taught programmer, he understands that there is an overwhelming number of online courses, tutorials and books that are overly verbose and inadequate at teaching proper skills. Most people feel paralyzed and don't know where to start when learning a complex subject matter, or even worse, most people don't have $20,000 to spend on a coding bootcamp. Programming skills should be affordable and open to all. An education material should teach real life skills that are current and they should not waste a student's valuable time.  Having learned important lessons from working for Fortune 500 companies, tech startups, to even founding his own business, he is now dedicating 100% of his time to teaching others valuable software development skills in order to take control of their life and work in an exciting industry with infinite possibilities. 

Andrei promises you that there are no other courses out there as comprehensive and as well explained. He believes that in order to learn anything of value, you need to start with the foundation and develop the roots of the tree. Only from there will you be able to learn concepts and specific skills(leaves) that connect to the foundation. Learning becomes exponential when structured in this way. 

Taking his experience in educational psychology and coding, Andrei's courses will take you on an understanding of complex subjects that you never thought would be possible.  

See you inside the course! 

Meet Your Teacher

Teacher Profile Image

Andrei Neagoie

Senior Software Developer + Instructor

Teacher

Andrei has been working as a senior software developer in Silicon Valley and Toronto for many years. He is now taking all that he has learned to teach others programming skills in order to discover the amazing career opportunities that being a developer allows in life. 

Having been self-taught, he understands that there is an overwhelming number of online courses, tutorials and books that are overly verbose and inadequate at teaching proper skills. Most people feel paralyzed and don't know where to start when learning a complex subject matter, or even worse, most people don't have $20,000 to spend on a coding bootcamp. Programming skills should be affordable and open to all. An education material should teach real-l... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

phone

Transcripts

1. HTTP/HTTPS: in 1989 Tim Berners Lee invented the HTML that changed the world. But HC Mill wouldn't really do much if we couldn't fetch documents from around the world and different computers for that to happen. Tim, build the hypertext transfer protocol or H g d p for short. Now, remember these arrows from the diagrams that we've had, we told you that these errors were simply the connected wires and cables that connected the World Wide Web. This right, You remember the diagram. But you see these air just wires. There are no instructions on how to do things. For that. You need something called a protocol. Think of it as a standard that everyone follows. If everyone agrees, then the protocol works and can be used by everyone. Http, that I have here is a protocol which allows the fetching of resource is such as HTML documents. I mean, it's in the name right hypertext transfer protocol. Now, with the use of a Schimmel and HD DP, we now have the World Wide Web. We can grab HTML files and received them. If we go to google dot com slash about, we go to the about html page. We grab it and receive it. So, http is the protocol or the rules that we use over the wires? It is the foundation off any data exchange on the Web, and it paved the way for something called a client server protocol, which means requests are initiated by the recipient, which in our case, is the Web browser. So they sent out a request using http. The server now understands what the Web browser saying because it's speaking in a CDP and the server cannot respond with HTML, and the browser understands it because it's speaking through a CDP once again. So you should think of a CDP as a common language that a client and a server can use to communicate there, simply saying, Hey, can you give me this document and the server can say, Yep, no problem. Here it is. And up until this point, we haven't really spoken to a server in our app, have we? We build the front and applications or the client facing applications using HTML, CSS, JavaScript and react. But we lived in our own world. No communications with another computer. Http allows us now to communicate with servers with the outside world. So let's go over the terminology one more time. Clients and servers can communicate by exchanging individual messages. The messages sent by the client usually a Web browser, are called requests, and the messages sent by the server are usually called responses. So if a CDP is the language that allows us to communicate between these two, teach me some of the words, right? I mean, that's a good question. And lucky for you, http, is quite easy to learn because you only have a few words and I'm gonna show you what they are right now. You have get you have post. You have put. And finally you have delete. And now you're thinking, um, that's it. And yeah, Http is beautiful because it's just simple. You don't need to over complicate things. You learn these four wards and these languages, and he can build the apple of your dreams. So let's go through one by one. Get means. Well, I wanna get on a shame. Alpha. So you ask to get something, and the server responds with that request. A post says I want to post something. So that is I'm going to send over some data to Google servers, and I want you to post I want you to added to your servers or your database put is I'm gonna send you some data, and I want you to update some data that already exists in Google servers and just updated with this new information and then delete means well, delete a piece of data on the back end on the servers are on the database. So if we used Twitter as an example, get will be to receive the Twitter feed with all the tweets from today Post would be if you created a new user and you wanna add that user to the Twitter servers put would be if you made a tweet, but you want to make a change or an edit. So you added that tweet and delete will. Meanwhile, you either delete your user account or delete a tweet. And don't worry, we're gonna use these when we get to the back end section and we build our final project. Now, over the years, http was extended to not only worry about text not only fetch hypertext documents like html , but also images and videos and post contents to servers, like with HTML form results. And a CDP can also be used to fetch part of documents to update webpages on demand, which is called Ajax. And we have a video coming up talking about this. But the main idea still stands using these four verbs we just learned we can now communicate with servers. All right, so we know that this air over here at the top uses a CDP to make requests using one of these four verbs. Okay, so I think you get the request part. Now, what does the server respond with? What about response? Here, the server sends you two main things. One is an A C D. P. Message. That is something that you've definitely seen before. And I'll link to this W three schools. Resource is a 200 message means successful. You probably have seen 200. Okay. Before, you might have seen four or four messages, which means not found if you enter a u. R l. That doesn't exist, you'll get a 44 and maybe sometimes you'll get a 500 error message. That is, Well, there's something wrong with the server. So this is just a number code that comes with every response that tells you the response of the server. So that's the 1st 1 The 2nd 1 is usually some sort of data, like HTML, and so far that's what we've been doing. HTML. But in the next videos, I'll show you that again. Send other things other than just simple. HTML. So let's add to this diagram. Now we want to say that this also has a status code and we'll say 200 for now, that everything was fine. And in the response, we give the status code plus the new HTML five. All right, let's actually demonstrate this online to see how you can watch this action take place. I have over here a great website called example dot com, and it's a simple website you can go visit of right now, but the cool part about it is if you open up your developer console up to this point, we've looked at the elements stab and then the consul tap. I want to show you the network tab that we have here now. The network tab. You might have to click on some of these icons and you'll see that different things will pop up. Make sure that the filter is gone. Everything is unclipped. And now at example dot com While this is open, just simply refresh And look at that. I'm gonna click on this icon, which makes it a little bit bigger. This is a plug in, son. Don't worry about this JavaScript. But the top thing it says example dot com status 200 okay and type document. And it even tells me the size the time that it took to get this, which is 53 milliseconds. That's pretty fast. So that means the server responded with 200. If I click on this, I got a whole bunch of things that we don't really need to worry about. But a few things request your URL. This is what we requested. We get a status code off 200 from the server, and if we click on the response, there's a response message. We received the HTML document from the server. If we go back to headers, we also see that our request method was a get we did a get request with Close this and refresh again. I now get a 304 status a three or four. If we look over here, means not modified. Indicates the request. Page has not been modified since the last requested because I've already requested this. Now Google is smart enough to say, Oh, I'm not gonna worry about the server and requesting the same thing over and over. I already have it memorized. So here it is. Very cool. So now work Tab is really, really useful for that. All right, so you can go ahead and play with example dot com and see for yourself how http works. And by the way, yes, this HD dp that you see here. That's what it means when you do an http request, it says, Hey, do, http, we're using the World Wide Web and go request this from the server. Very cool. And if you're wondering about the s, don't worry. I'll let you know at the end of this video what that means as well. All right, now, what if I wanna send data? If we go back to our diagram, I'm just doing a get request. But what if I want to actually send some information to the server other than some u r l saying I want this information Well, there's two ways that you can do it. One is something called Query String. And then the 2nd 1 is through the body of the request. So I'm gonna show you how both of those work I have over here the form that we created in our first advanced Asian male section. When we Onley new HTML, let's open this file up. I have it over here if I double click. Ah, you remember this, don't you? We've come a long, long way in this form. If you remember, we had a form method get. And now you might understand what this get meets its saying. With this form, I want you to do a get request. Let's see what happens when I click register while opening the network tab. I'm going to click register. All right, so we have this request, we see that we have made a request and it has created these things called query strengths the first way off sending data to the server with a gave request. If you want to send information through reform, it adds it to the euro using this question mark which says, Hey, I'm about to send you some query strings and it's gonna have a key and a value in this case . First name, last name. Everything's empty, so there's no information but otherwise will say first name equals Andre. If I click on this, we see that there's query strength parameters that we sent. We have first name, last name, email, password and birthday, which is blank. But if we scroll down in cars, default is Volvo. So that we have cars. Volvo. So this information now is sent to the server. That's query string parameters using get. And we did mention one thing, Bill, we see that we have password in here. That's not very secure, is it? If I went back to the form and I type in secret and I click register again Well, now I have my password. How'd in the open sent over the wire and I even have it up here. My, your Albar. All right, we'll get back to that. So that is one way. The second way is through the body of the request. Let me show you how that works. The way we send information to the body is we use a post request. And this is something that you'll more often see than a get request is that we wanna add some form data to the server. So we want to post something. If I change this over here, I'm gonna save this. And let's open up a new tab with the new safe data. This one is a post form By opening up here, and I type in password Secret and I click on register. I get registered dot html, but no query strings. If I click on this, I see that now, instead of query strings, it's form data, and it even says content type application X W w for mural encoded. And this is just a html way of saying that this is a form and this is the body, but not displaying here. So now the server can access it. Not from the query, Paramus. And don't worry. I'll show you how servers do that when we get the backend section instead of accessing it through the choir programs. I can now access it through the form, Dad. So let's go back to the diagram. We now understand that we can do http requests using get post put delete. I can use quarry strings, which are at the top of the URL to send the data four the body of the request. And then the server responds with a status code based on how my request was, and it returns that with a response. But the one issue we saw was that, well, the password was visible in both cases, wasn't it? And what if we had? I have a scary looking person over here. There you go. What if we had a person who was watching our communication rhe db requests and monitoring it If I used query strings to put my password in there? Well, he can just look over my shoulders. And C o Andres Password is secret. I can now log into his Google account for if I used the body way of sending data well, he can find a way to get this request to come over to him first and just look at the form data and see that my password is secret. Some very good, is it? Well, one solution to this was the idea of http s Now https means hypertext transfer protocol secure, and you can see over here that W three c uses the secure version off https. The communication between the browser and the websites are now encrypted. What does that mean? Encrypted just means that it's jumbled up. So on Lee, the client and the server know the secret pass or secret key to read the message. And this s part. The secret uses a technology called transport layer security or its predecessor, Secure Sockets Layer or TLS and SSL for short. So now, even with a CPS, if the attacker or what we call a man in the middle, the person who's just monitoring our requests, even if they get our password, it's going to be just complete gibberish. It's gonna have something similar to this and we'll that's not our pastor, So it's gonna be meaningless. Your voice, that attack. This is just a tip as a developer that you should tell your friends if you're ever sending sensitive information, maybe logging into a bank account, make sure that there's https out there. If there's no https when you're sending maybe your law game with your password, well, that's not secure. All right, let's review your Web browser. Is a http client sending requests to the server machines. When the browser user enters follow requests by either opening a file or typing a your URL or clicking on a hypertext link an anchor attack. The browser builds an http request and sends it to communicate with the server. Now the server can get information back to us. The earliest version we could use your L parameters such as google dot com slash about and just specifically get HTML. That was it. Then came the form, so we can now actually send more data other than just the u. R L saying we want to go to this Asian male fall. Now we can use get for post to send out either through a body or a query string. And a server can take action based on that data and we turn a new page. And this is the foundation of the Web and how the World Wide Web we have now was made possible through client server communication. In the next few videos, we're going to learn even more to really understand this bar I'll see in the next one, but by 2. JSON: Welcome back. There's one missing piece with the diagram we created in the previous video on Http, we talked about your l parameters such as the google dot com slash about and query string parameters we can do with get. But what about the data? When we post something, can we post anything? Well, no, really. When exchanging data between a browser and a server, the data can only be text. So we can't just send a JavaScript object such as a user with first name John and last name Doe one because http won't understand it, but also if we were sending this data to Google servers Well, unlike the front end, the Web browser where HTML, CSS and JavaScript is a standard when I send a user object to the server, a server can use any type of language like python go PHP. If we send them a JavaScript type like an object, there will really be confused because they would have no idea what it is. That's not really their language. Text, on the other hand, can be understood by all. So we need a way to have a standard way to send data over the wires and receive it. That is what Jason is and where we're going to talk about in this video. Jason Fans for JavaScript object notation. It's a syntax for storing and exchanging data and its text written with JavaScript Object notation. Let's look at the second point here. Jason is a syntax for storing and exchanging data. It's used to send data between machines. Is it the only way? No, there's also XML. Both XML and Jason can be used to receive data from a Web server, and you can see the differences between the two. These are the same data just first names and last names of employees, and XML uses this HTML like syntax, while Jason uses well on object. JavaScript object like syntax. But the standard is now more towards Jason because when you're writing front and code in JavaScript, getting a Jason Data back makes it easier to load that data into an object tree. Because it's so similar to a JavaScript object, then in XML and Jason, format is a more succinct way, which saves bandwidth and improves response times. One sending messages back and forth between client and server and XML is just not very efficient. So Jason now is more of a standard. You'll still see XML, but it is outdated, so we won't be talking about it in this video. But they both are used to transfer data between two machines that might not speak the same language. Jason. However, although it looks similar to Java script, it is a little bit different. It has these double quotes for even properties. Everything has to be a string and wrapped her on double quotes and, well, it looks like it's a object syntax. But Jason can be read by any language. If Google servers was running a different language, they'll understand Jason. They'll be able to modified that Jason, which is just text into their own version. So now we can convert this into a Jason object, send it over a CDP, and then the Google servers, or whatever it is, we'll change it to their own language, understand it and then send a response again. Let's say, for example, was returning. The user has money $345. Well, it will then modify this to Jason, send it over the wire, and then the Web browser will change it from Jason to job script, but how can we do that? Luckily for us, jealous script comes with its own Jason function. We have Jason Parse and Jason String. If I with Jason Parse. If we had Jason again this form, we simply wrap it as the parameter of parse, and it will return a object the opposite way with string. If I we can give it an object such as the one we just created and it will return Jason. So this my Jason Variable can now be put into the http request to send it over the wire or the server can respond with my Jason. So let's review Jason is text, and we can convert any JavaScript object into Jason and Sanjay's onto the server. We can also convert any Jason received from the server into JavaScript objects. This way we can work with data as JavaScript objects with no complicated translation, and this tax can be used as a data format for any programming language. So let's go through the flow one more time now with this complete user object. Before I send it with http, I will do Jason dot string if I user so now it's converted into a Jason string and this Jason String will be sent over a CTP to the Google servers. It is then going to say Jason parse this user so it understands it. Let's say it was running job, script or note. Now it will understand. The user will say, Oh, he wants the money amount for this user. So now it gets money 345 from the account it string. If ISAT the money variable sends it with a status code of 200. And now the Web browser can parse this string that it received and see that Oh, yeah, I have a variable money off $345. And don't worry. When we get to the back and section in a few videos, we are going to show you exactly how to do this in code how to make a CTB requests, use Jason, use, get post put delete methods, and I'm gonna show you how to do that in our final project as well. But now this diagram, although a little bit messy, should make a little bit more sense. And you should understand now how things are working in the next video. I'm gonna introduce you to something that changed Web browsing in 2000 and six. I'll see you on that one. But why? 3. AJAX: welcome back in the previous videos we learned about http and Jason, we learned that we can send a request and get responses, but there is one issue up until now. Every time we need to communicate with the server, we make that request, then the browser. When it receives the response, does a page refresh? Originally, peach learning on the Web was simple. You'd send a request for a website to a server, and as long as nothing went wrong, the assets would be downloaded by the webpage and displayed on your computer. The trouble with this model is that whenever you want to update any parts of the page, for example, display a new set of products like on Amazon. Well, you'll have to load the entire program again. Even the outline, even the navigation bar, the top everything had to get we loaded a complete page refresh. This is extremely wasteful and results in a poor user experience, especially as pages get larger and more complex. You can think of it on the U Demi. What's it if we go to you? Demi? Well, if I click on let's say marketing the top bar, you will remain do you see that? It's a nice user experience. I can click on tabs and I won't get a complete Please refresh its well, it loads data automatically on the page. Now. This issue that we had here led to creation of technologies that allow Web pages to request small chunks of data such as HTML XML plane tax Jason and display them on Lee when needed. Helping to solve this refresh problem and the technology was called Ajax. It allows you to read from a Web server after the page has loaded and update a webpage without reloading the page and finally send data in the background while the user is interacting with the Web site. It was actually pioneered by Google in 2000 and six, and now is what we expect of websites, and any Web app you see online uses Ajax. Now you see Google hide this big problem when we're searching something while you would initially type in Apple and it would do a complete page refresh. But now, with this, I can maintain the top bar and have this loaded. I can even have suggestions brought up from the server, and this is all a response from the server saying these are some of the suggestions based on Apple store. So it was a big problem for Google and they were able to solve it with Ajax. But now we all have disability. So how are we able to do this? What is Ajax? Ajax is just a technology, a method of combining pieces together to achieve this. And it was achieved using a tool that browsers built and it was called XML. Http request it looked something like this. You created a new XML, a CDP request object. As you can see, it looks a little bit tough. You make a request, you make a get request at this euro, you say on load when it loads. If the status the response is greater than 200 or less than 400 it's a success. We're gonna parse the response text, remember, because we're receiving a string from the server. If it's not a success, well, we can return an error and we then send our request and also listen for any errors. It looks pretty tough, but it is things that we've gone over. But don't worry, We actually don't do this anymore. This was the old way of doing it. When Ajax was first introduced, Jake Weary came along and said, Well, this is kind of tough to do every time we'll make it easy for you by just doing this. And that was in another part of the reason that Jaqui was popular. We can just do Ajax requests doing this method, but now there's actually an even nicer in your way that we've used. Actually, when we build our react up and it's supported by the browsers and that is called fetch as you Remember, it was fetch at a your L. And then we did this dot then response, and we received a response. Now this is a really good thing because Paige updates are a lot quicker, and you don't have to wait for the page to refresh, meaning that the side feels faster and more responsive. Also, less data is downloaded on each update, meaning lest wasted bandwidth. And this is a major major issue, especially on mobile devices where Internet connection might not be as good. Ajax allows webpages and by extension web applications to change content dynamically, and it is everywhere. It is something that is just very nice. It looks intimidating, but is just a matter of doing this. Fetch that does a CDP for you, and all you do is say, if you want to do a get a post and add some Jason Data to that request. So let's review again. What happens with Ajax. An event occurs on a weapons such as logging in and I click sign in XML http request object again. Something that Web browsers have implemented is created and that's created using JavaScript XML http request Object sends a request to the Web server. The server processes the request, and then the server sends a response back to the webpage. The responsive read by JavaScript and the user is able to log in at the same time Onley updating a small portion off the window. That is what a single page application is. And it's a word that you've probably heard before and said trend and how to make Web apps where you load a base an almost empty page and build the content on the fly based on the data fetched from the server. Let's go back to you, Danny. When I click on a course, let's do public relations. You see that this is loading. Wanted a time I had the top are loaded. Then I had a pause and then the rest loaded. If I click on explore, course you see again that top are loaded. Other parts of the Web slowly, dynamically load. And again, if I go back to photography, for example again, parts of the Web page load dynamically. And that's the beauty. These applications nearly never do. A full reload. They destroy the previous content all or part of it, and rebuild it based on new data. New page And this might sound familiar to you. Do you remember how we built our robot friends up? We fished this you are? Oh, that gave us users. So now that we understand these concepts, let's go line by line and see what happens. I used to fetch Based on what I said, fetch should be part of the window object, Right. Let's check if I open up the console and I do window dot fetch. Yeah. Fetch is a function that we can use and the CRL, if you remember, returns for us. What is that? Yeah, a Jason object and this Jason object fetch allows us to do something called response response that Jason. Well, let's just do this for now and see what happens. I'm gonna copy and paste this. I'm going to open up the console and you know, I'm gonna open up on you, tap to show you that you can do this from anywhere. If I copy and paste this fetch, I get something called a promise. And this is something in javascript that you'll get used to promises saying, Hey, I'm making a request somewhere over the internet, and I promised to let you know when I have this value returned. So the way you access promises. So you have this once. This is returned. Give me the value you do dot then and it gives you the response. If I add to my previous request Got then and I do Response, console, dialogue, response. Look at that. I get a response. Status 200. We remember this. Okay, that's good. And we also get this body, but it says a breed herbal stream and fetch. I mean, we learned about Jason dot parse too. Parse, Jason, But fetch actually comes with its own method called Well, Jason. So on this response, if we do Jason, it will actually converted for us. Let's see if I go back to that request again. I get a response. If instead of console logging, I say response dot Jason. In that case, I get a promise again. So that means we need to do dot then to receive whenever this returns the promise, which is the value. So again I go up and do got then. And in this case, let's see what data we receive. We get data and we'll consul dialogue data for breast center. Look at that. We receive our users the same users that where Here. So you see now that we simply used the fetch a p I, which allows us to do in Ajax call after the component mounted. So once our rebel friends up was loaded, we made an Ajax request. Using the fetch a p I we got a response, which was a promise. So we have to do dot then and this response and this is just standard that anytime you do fetch, you'll just remember doing dot Jason, I converted this into something that well, we can use in JavaScript. And because this return to promise we did dot Then we got the users. And now we have the users object and we never had to refresh the page. And by the way, if you want this Jason, whenever you're accessing it to look prettier and be a little bit more readable I am using a chrome extension called Jason View. It's free. You just added to chrome. It automatically does it for you. I highly recommend it. Okay, let's go back to this. This should make sense now. We now have the ability to dynamically load our webpages make single page applications using Ajax and Ajax is a combination of tools off using the fetch A P I using http using Jason to communicate with servers. And now we have a complete picture of our front end. Our front end can have html CSS JavaScript react. We can use Ajax to communicate with servers, and we use Jason Data to send data over the wire. I'm really excited for the next couple of videos, so I'll see in that one. But by