1 00:00:00,900 --> 00:00:06,939 Welcome back there is one missing piece with the diagram we created in the previous video on 2 00:00:06,980 --> 00:00:08,620 HTTP. 3 00:00:08,790 --> 00:00:16,860 We talked about URL parameters such as the "google.com/about" and query string parameters we 4 00:00:16,860 --> 00:00:20,480 can do with GET but what about the data 5 00:00:20,490 --> 00:00:23,960 when we post something. Can we post anything? 6 00:00:24,000 --> 00:00:31,970 Well not really. When exchanging data between a browser and a server the data can only be text. 7 00:00:32,070 --> 00:00:40,940 So we can't just send a javascript object such as a user with first name John and last name doe. 8 00:00:41,010 --> 00:00:44,070 One because HTTP won't understand it. 9 00:00:44,460 --> 00:00:49,070 But also if we were sending this data to Google servers- 10 00:00:49,220 --> 00:00:56,700 Well unlike the Front-End the web browser where HTML, CSS and Javascript is a standard when I send 11 00:00:56,700 --> 00:00:58,980 a user object to the server. 12 00:00:59,190 --> 00:01:02,500 A server can use any type of language like Python, 13 00:01:02,640 --> 00:01:13,010 Go, PHP. If we send them a java script type, like an object they will really be confused because they 14 00:01:13,010 --> 00:01:14,890 would have no idea what it is. 15 00:01:15,260 --> 00:01:16,790 That's not really their language. 16 00:01:17,820 --> 00:01:22,410 Text on the other hand can be understood by all. 17 00:01:22,440 --> 00:01:28,050 So we need a way to have a standard way to send data over the wires and receive it. 18 00:01:28,050 --> 00:01:32,360 That is what JSON is and what we're going to talk about it in this video. 19 00:01:32,580 --> 00:01:40,620 JSON stands for javascript object notation. It's a syntax for storing and exchanging data and it's text 20 00:01:40,800 --> 00:01:43,540 written with javascript object notation. 21 00:01:43,650 --> 00:01:45,180 Let's look at the second point here. 22 00:01:45,270 --> 00:01:49,320 JSON is a syntax for storing and exchanging data. 23 00:01:49,320 --> 00:01:52,530 It's used to send data between machine. 24 00:01:52,650 --> 00:02:05,800 Is it the only way? No, there's also XML. Both XML and JSON can be used to receive data from 25 00:02:05,860 --> 00:02:06,760 a web server. 26 00:02:07,920 --> 00:02:10,020 And you can see the differences between the two. 27 00:02:10,020 --> 00:02:12,630 These are the same data. 28 00:02:12,630 --> 00:02:16,970 Just first names and last names of employees and XML uses 29 00:02:16,980 --> 00:02:25,740 this HTML like syntax while JSON uses well an object - javascript object like syntax. But the 30 00:02:25,740 --> 00:02:31,740 standard is now more towards JSON because when you're writing front end code in Javascript getting a 31 00:02:31,740 --> 00:02:37,560 JSON data back makes it easier to load that data into an object tree because it's so similar to 32 00:02:37,560 --> 00:02:40,130 a javascript object than an XML. 33 00:02:40,880 --> 00:02:48,500 And JSON format is a more succinct way which saves bandwidth and improves response times when sending 34 00:02:48,740 --> 00:02:51,590 messages back and forth between client and server. 35 00:02:53,030 --> 00:03:00,810 And XML is just not very efficient. So JSON now is more of a standard you'll still see XML but it 36 00:03:00,810 --> 00:03:04,300 is outdated so we won't be talking about it in this video. 37 00:03:04,470 --> 00:03:13,770 But they both are used to transfer data between two machines that might not speak the same language. 38 00:03:14,190 --> 00:03:20,330 JSON however although it looks similar to Javascript it is a little bit different. 39 00:03:20,340 --> 00:03:24,210 It has these double quotes for even properties. 40 00:03:24,210 --> 00:03:28,440 Everything has to be a string and wrapped around double quotes. 41 00:03:28,920 --> 00:03:38,120 And well it looks like it's a object syntax. But JSON can be read by any language. 42 00:03:39,100 --> 00:03:45,250 If Google servers was running a different language they'll understand JSON they'll be able to modify 43 00:03:45,760 --> 00:03:50,550 that JSON which is just text into their own version. 44 00:03:50,560 --> 00:03:59,100 So now we can convert this into a JSON object, send it over HTTP. 45 00:04:00,390 --> 00:04:06,780 And then the Google servers or whatever it is will change it to their own language understand it and 46 00:04:06,780 --> 00:04:08,010 then send a response. 47 00:04:08,010 --> 00:04:13,270 Again let's say for example it was returning - the user has money 345 dollars. 48 00:04:13,620 --> 00:04:22,330 Well it will then modify this to JSON send it over the wire and then the web browser will change it 49 00:04:22,330 --> 00:04:25,080 from JSON to javascript. 50 00:04:25,270 --> 00:04:26,540 But how can we do that? 51 00:04:26,590 --> 00:04:31,550 Luckily for us javascript comes with its own JSON function. 52 00:04:33,350 --> 00:04:39,440 We have JSON.parse and JSON.stringify with JSON.parse 53 00:04:39,440 --> 00:04:50,150 if we had JSON again this form, we simply wrap it as the parameter of parse and it will return a object. 54 00:04:50,210 --> 00:04:53,100 In the opposite way with stringify 55 00:04:53,270 --> 00:04:58,750 we can give it an object such as the one we just created and it will return JSON. 56 00:04:59,300 --> 00:05:09,490 So this myJSON variable can now be put into the HTTP request to send it over the wire or the server 57 00:05:09,490 --> 00:05:11,410 can respond with myJSON. 58 00:05:11,410 --> 00:05:20,380 So let's review JSON is text and we can convert any javascript object into JSON and send JSON to 59 00:05:20,380 --> 00:05:21,060 the server. 60 00:05:21,070 --> 00:05:29,080 We can also convert any JSON received from the server into javascript objects. This way we can work 61 00:05:29,080 --> 00:05:36,940 with data as javascript objects with no complicated translation and this text can be used as a data format 62 00:05:36,940 --> 00:05:38,640 for any programming language. 63 00:05:38,770 --> 00:05:40,620 So lets go through the flow one more time 64 00:05:40,620 --> 00:05:48,530 now with this complete. User object before I send it with HTTP I will do 65 00:05:48,610 --> 00:05:51,030 "JSON.stringify(user);" 66 00:05:51,070 --> 00:06:02,210 So now its converted into a JSON string and this JSON string will be sent over HTTP to the Google 67 00:06:02,210 --> 00:06:02,940 servers. 68 00:06:03,080 --> 00:06:08,840 It is then going to say JSON.parse this user so it understands it. 69 00:06:08,870 --> 00:06:11,620 Lets say it was running Javascript or Node. 70 00:06:11,930 --> 00:06:19,790 Now it'll understand the user. They'll say - oh he wants the money amount for this user. 71 00:06:19,990 --> 00:06:29,860 So now it gets money 345 from the account. It stringify's it the money variable. Sends it with a status 72 00:06:29,860 --> 00:06:32,070 code of 200 73 00:06:32,240 --> 00:06:42,880 And now the web browser can parse this string that it received and see that oh yeah I have a variable 74 00:06:42,880 --> 00:06:52,060 money of $345. And don't worry when we get to the backend section in a few videos we are going to show 75 00:06:52,060 --> 00:07:01,000 you exactly how to do this in code. How to make HTTP requests, use JSON, use GET, POST, PUT, DELETE 76 00:07:01,000 --> 00:07:03,540 methods and I'm going to show you how to do that 77 00:07:03,640 --> 00:07:05,720 in our final project as well. 78 00:07:05,860 --> 00:07:11,830 But now this diagram although a little bit messy should make a little bit more sense and you should 79 00:07:11,830 --> 00:07:14,930 understand now how things are working. 80 00:07:16,290 --> 00:07:23,120 In the next video I'm going to introduce you to something that changed web browsing in 2006. 81 00:07:23,410 --> 00:07:25,060 I'll see you in that one. Bye-bye.