So in this lecture, we're going to talk about JavaScript Object Notation, JSON. Now, everything we've been doing lately has been really extending what we're doing in the browser. JavaScript talking to the DOM. In the previous lecture, we actually had we went back and forth, where we sent post dated back and I brought stuff back. Now with JSON, what we really focusing on is this little part right here and that is, what we did before was called AHHA, Asynchronous HTML, HT-something, HTP, and HTML. because we sent HTML back, but really what we want to do is send data back and forth. And especially when we're going to go all the way to the database, get some records back, and then send them. We need a way to represent those records that are coming back so we can read them in jQuery and then put out like a table. Before what we did was, we would have this, we'd get the records, there's a bunch of records. Then we write a loop that would write the table, and then DOM would come out, right? That's how we'd do it in PHP. But what we're going to do is, we're going to move this little loopy bit. We're going to move that into the browser even. So now we're going to send a request in, we're going to get a page back. If then this page is going to make a request, it's going to do loopy stuff, send the data back, and then loopy stuff here to actually print the table. Whether the loopy stuff happens in the server or happens in the browser, it's six and one half a dozen than the other, but I'm showing you now that you can move this back and forth. And the question we're asking is, what is the format, Of the data going back and forth? And, the answer, in 95% of the situations is JSON, JavaScript Object Notation. So the request response cycle is something that by now I hope you understand, and the market in the early 2000s understood it as well. We knew what it was, we were starting to sneak stuff back and forth, the concept of HTTP request was actually, I think the Internet Explorer was the first one to allow JavaScript to make request back to the server. And originally, the idea was that XML would come back, because we were sort of arguing that XML was the greatest way to represent data ever. So you would send a request back, and you would get XML back, that led to a thing called AJAX. Asynchronous JavaScript and XML, I think is what AJAX stands for. So this AJAX pattern of request response cycles initiated from JavaScript and returning XML. But, XML turns out to be kind of a painful format by the time it's all said and done. And so we kind of argued about what format of this return data is for a while. And so, the idea is is that in the server, you might be running JavaScript or PHP or Python. And in a browser, you might be one and it might be JavaScript, Java or whatever in there. And there's different sort of each of these have different ways of thinking about key value pairs, each of these languages. But if we're going to send the data across the Internet, we need to agree on what's called a wire Format, right? That the notion that there is a known syntax that can be translated into a PHP array, or translated from a PHP array, or translated into Python dictionary, or from Python dictionary, or to and from a JavaScript object. And so the question, this is the wire protocol, it's because these used to be wires. Now they're probably fiber optic, but the Internet is a bunch of wires, right? If you were to watch the characters going by on the Internet, what would you see? Curly brace, new line, quote, N-A-M-E, quote, so the wire protocol is literally the exact characters being sent between the system. It's not how these are represented internally in any of these things, because that's in the memory of the computer. So there's sort of the internal representation. The wire format is an external representation. And so, JSON is the one we're going to talk about right now. XML would be the other one. And you'll run across XML once in awhile. Sometimes XML is a good idea. But the idea is that, say we have an array of stuff inside PHP that has a particular shape, and then we do what's called serialize on the way out of PHP sending across the Internet. We take whatever this is and we move it into the wire protocol. Then we send the wire protocol across the Internet, and then in the other end, we receive the wire protocol, and then we parse the wire protocol. You could think of this as encode, Format. The notion of taking something you know and coding it or formatting it in the wire protocol, or parsing it. And the nerd term for this stuff is serializing and de-serializing. Serializing is the preparation of an internal structure to the wire format. And de-serializing is receiving the wire format and creating a different structure. And so, we're going to take a PHP array, and then put the JavaScript object, these are different things. And what we're going to find is that, JSON is so well supported in PHP. It's just like a line of code. And, it's like one or two lines of code, especially if you're using jQuery and JavaScript. And it's so easy, after a while you don't even notice that you're doing it. The notion that you can take a PHP array, and a couple lines later turn into a JavaScript object that came across the network. If you'd imagine how hard that was to do in 1999 compared to today, it was infinitely difficult, because we didn't even have a wire protocol in 1999. I'd also like to talk about the people that invented this and Douglas Crockford. We have a video for Douglas Crockford. He's sort of funny in his own way. He is a really smart guy, and part of his humor is being smarter than you. And, there was a point in time where there was a Twitter feed, it may still exist, for his beard and the idea was that Douglas Crockford's beard is smarter than most programmers on the planet. There's a cool video that I've got and I encourage you because again, the personality of these people sort of is reflected in the kind of technologies that they invent. Now Doug Crockford will be the first one to tell you that he did not invent JSON, he discovered it. He said it was just there, it's just in JavaScript. So what JSON, the reason it's called JSON is, it's the way we write constants, and if you go all the way back to the arrays lecture, I said x=[,,,], y={ y ou know, blah, colon, blah, comma, blah, colon, blah. That's JSON. Kind of reduced it a little bit, and he basically said, the syntax that we use to define JavaScript constants is also the wire protocol. So, JavaScript, it's a little easier for JavaScript to understand JSON. PHP has to work a little harder, Java has to work a little harder, all the other languages have to work little harder. But we had to pick something. And so, JavaScript, JSON was really good. And you could subtly change it. You've gotta be able to have lists of things and key value pairs. And other than that, the rest of it is syntactic craft. And so we took the object literal notation in JavaScript and said, that is a wire protocol. Whether you're using Java or C++ or whatever, let's just use that as a wire protocol, and he gives a really good explanation in this video about why XML? What is good for, what it's bad for? Don't assume that JSON is great for everything. There are some things, like Word documents are represented in XML. PowerPoint's represented in XML, because they're hierarchical structures. Hierarchical structures is not the best thing for JSON. But if you're just moving an array of stuff back and forth, JSON is the absolute 100% answer, and it's really quite wonderful. He talks about how he convinced the world that JSON was a thing. And they were like, there should be a standard. And he's like, well, JavaScript that's the standard. And so he created json.org and he just documented, it's a couple pages. And the world has beat a path to his doorway. And he coined the term. And he just said, hey, look at this thing. And then finally, today, it's just assumed to be part of the profound infrastructure of all distributed computing is that JSON is available. So it's really cool, because it had sort of very humble beginnings. And so up next, we'll have, a look at a little bit of example code and how we can use JSON and talk back and forth, both in PHP and in jQuery.
