1 00:00:00,506 --> 00:00:09,556 [ Silence ] 2 00:00:10,056 --> 00:00:10,206 >> All right. 3 00:00:10,206 --> 00:00:12,096 Welcome back to Computer Science S-75. 4 00:00:12,096 --> 00:00:13,656 This is Lecture 7, Ajax. 5 00:00:14,036 --> 00:00:17,146 I'm enjoying this process of asking what we did last time 6 00:00:17,206 --> 00:00:18,596 since it's a hard question apparently. 7 00:00:18,596 --> 00:00:19,816 What did we do last time? 8 00:00:20,906 --> 00:00:22,556 Axle, you're the only one looking at me. 9 00:00:22,866 --> 00:00:24,336 >> Yeah. We went through -- 10 00:00:24,336 --> 00:00:26,496 well, we had an introduction to JavaScript -- 11 00:00:26,616 --> 00:00:26,766 >> Okay. 12 00:00:26,986 --> 00:00:30,566 >> -- which is a client-side interpretative language -- 13 00:00:30,756 --> 00:00:31,166 >> Good. 14 00:00:31,166 --> 00:00:33,106 >> -- that stuff you can do with it. 15 00:00:33,106 --> 00:00:35,626 For example, it's validate the fields before they're actually 16 00:00:35,626 --> 00:00:36,426 sent to the server -- 17 00:00:36,426 --> 00:00:36,596 >> Okay. 18 00:00:36,756 --> 00:00:40,336 >> -- to reduce circuit load and revive annoying HTML text 19 00:00:40,876 --> 00:00:41,426 >> Okay, good. 20 00:00:41,426 --> 00:00:42,966 Those are the two purposes of JavaScript. 21 00:00:42,966 --> 00:00:43,586 So, yeah, we talked 22 00:00:43,586 --> 00:00:46,226 about JavaScript client-side programming language. 23 00:00:46,226 --> 00:00:48,036 It's executed within the confines of the browser. 24 00:00:48,276 --> 00:00:49,896 We played with a couple of different applications, 25 00:00:49,896 --> 00:00:51,436 the first of which was form validation. 26 00:00:51,436 --> 00:00:52,776 Very common, very useful. 27 00:00:52,976 --> 00:00:55,476 Less useful was the resurrection of the blink tag, 28 00:00:55,506 --> 00:00:57,906 but that exercise, bigger picture hopefully, 29 00:00:58,136 --> 00:00:59,626 give you a sense of how we can control CSS, 30 00:00:59,626 --> 00:01:03,716 we can control the DOM itself and do something simple 31 00:01:03,716 --> 00:01:05,526 or silly, yes, like resurrect the blink tag. 32 00:01:05,526 --> 00:01:07,686 But more generally exercise control over the layout 33 00:01:07,686 --> 00:01:09,716 of the page even after it's downloaded. 34 00:01:09,816 --> 00:01:10,086 Jack. 35 00:01:10,086 --> 00:01:14,506 >> We had this had roaming with the fact that we can't -- 36 00:01:16,256 --> 00:01:20,506 we can't use a JavaScript to do certain things 37 00:01:20,726 --> 00:01:22,336 that we might want to do, like I wanted 38 00:01:22,336 --> 00:01:25,556 to make a Submit Button have JavaScript even when it was off. 39 00:01:26,376 --> 00:01:29,276 >> Okay. Have -- okay, can you push it a little? 40 00:01:29,396 --> 00:01:31,626 >> So there are limits to what JavaScript can 41 00:01:31,626 --> 00:01:33,566 and can't do based on what the browser interprets. 42 00:01:34,136 --> 00:01:35,596 >> Okay. So there are limits of JavaScript. 43 00:01:35,596 --> 00:01:37,146 And one example of this was? 44 00:01:37,386 --> 00:01:39,036 >> That we know form 45 00:01:39,036 --> 00:01:43,306 or something is disabled you can't run JavaScript off of it. 46 00:01:43,306 --> 00:01:44,046 >> Ah, okay. 47 00:01:44,046 --> 00:01:46,166 So, okay. So, that's fair. 48 00:01:46,166 --> 00:01:48,176 I wouldn't highlight that as one of the main takeaways, 49 00:01:48,206 --> 00:01:49,636 that JavaScript has these limitations. 50 00:01:49,636 --> 00:01:53,916 But in the particular case we had disabled a form field, 51 00:01:53,916 --> 00:01:55,736 and in this case Chrome, therefore, 52 00:01:55,736 --> 00:01:58,126 decided to no longer trigger the events 53 00:01:58,506 --> 00:01:59,786 that we were hoping to receive. 54 00:01:59,786 --> 00:02:02,486 For instance, on Click or on Submit or the like. 55 00:02:02,536 --> 00:02:04,926 But I would propose that's sort of a corner case 56 00:02:04,926 --> 00:02:07,156 and you shouldn't read too much into that inability. 57 00:02:07,306 --> 00:02:07,406 Yeah. 58 00:02:07,956 --> 00:02:09,806 >> We also went through different ways 59 00:02:09,806 --> 00:02:11,416 to find functions. 60 00:02:11,646 --> 00:02:11,786 >> Okay. 61 00:02:12,076 --> 00:02:16,246 >> One of them being that you can define functions 62 00:02:16,246 --> 00:02:16,696 anonymously -- 63 00:02:16,696 --> 00:02:17,416 >> Okay, good. 64 00:02:17,416 --> 00:02:18,726 >> -- without giving them a name. 65 00:02:18,726 --> 00:02:22,526 So calling them directly from inside whatever triggers it. 66 00:02:22,526 --> 00:02:23,096 >> Okay, good. 67 00:02:23,096 --> 00:02:25,006 So we looked at anonymous functions, otherwise known 68 00:02:25,006 --> 00:02:26,806 as lambda functions, and these are functions 69 00:02:26,806 --> 00:02:27,686 that are exactly that. 70 00:02:27,686 --> 00:02:30,506 They don't have names but they still take in arguments, 71 00:02:30,506 --> 00:02:31,826 they can still return values. 72 00:02:31,826 --> 00:02:35,686 And when is it useful or compelling to use a function 73 00:02:35,686 --> 00:02:38,166 with no name and to define an anonymous function? 74 00:02:38,736 --> 00:02:38,826 Yeah. 75 00:02:40,396 --> 00:02:40,516 >> Well -- 76 00:02:40,656 --> 00:02:40,776 >> Isaac. 77 00:02:40,776 --> 00:02:43,866 >> -- it didn't seem to blink example, 78 00:02:43,866 --> 00:02:46,046 but I know that jQuery uses them all the time. 79 00:02:46,226 --> 00:02:48,076 >> Okay. So we did it in the blink example 80 00:02:48,076 --> 00:02:49,046 as one of the iterations. 81 00:02:49,046 --> 00:02:51,956 jQuery does it all the time and, indeed, JavaScript, in general, 82 00:02:51,956 --> 00:02:53,606 when you're doing browser-side programming 83 00:02:53,606 --> 00:02:55,906 and even server-side programming as we'll discuss briefly 84 00:02:55,906 --> 00:02:58,126 in the context of JavaScript, 85 00:02:58,126 --> 00:03:00,226 anonymous functions are just quite useful 86 00:03:00,226 --> 00:03:03,146 because they allow you to pass around functions really much 87 00:03:03,146 --> 00:03:05,706 like they are themselves variables or values. 88 00:03:05,706 --> 00:03:07,036 And so the fancy way of saying that is 89 00:03:07,036 --> 00:03:10,626 that in JavaScript functions are first class objects 90 00:03:10,926 --> 00:03:13,436 which means pretty much what we've experienced ourselves 91 00:03:13,436 --> 00:03:16,606 where you can pass them around and create them on the fly. 92 00:03:16,896 --> 00:03:17,256 All right. 93 00:03:17,256 --> 00:03:20,066 So, a couple of administrative announcements. 94 00:03:20,066 --> 00:03:21,426 So grades and feedback 95 00:03:21,426 --> 00:03:23,776 on Project Zero should now be available. 96 00:03:23,776 --> 00:03:26,796 You can go to the course's website and go -- 97 00:03:26,796 --> 00:03:30,046 or rather go to apps.cs75.net and see both comments 98 00:03:30,046 --> 00:03:31,136 under the Submit button. 99 00:03:31,366 --> 00:03:34,146 What you'll see is that after you submitted your own work 100 00:03:34,146 --> 00:03:35,656 and were able to browse it 101 00:03:35,656 --> 00:03:37,536 and see it's all syntax highlighted online, 102 00:03:37,816 --> 00:03:41,546 your TFs have put up little Post-It notes style sticky notes 103 00:03:41,816 --> 00:03:43,776 that have comments on various parts of your codes, 104 00:03:43,776 --> 00:03:45,776 so you can browse their context-sensitive comments, 105 00:03:45,906 --> 00:03:47,306 and then if you go to the grade book link, 106 00:03:47,306 --> 00:03:49,416 you can view what the actual scores were and recall 107 00:03:49,416 --> 00:03:52,526 that the axes on which we evaluate are scope correctness, 108 00:03:52,856 --> 00:03:53,756 design, and style. 109 00:03:53,756 --> 00:03:56,056 And if you have any questions, certainly reply directly 110 00:03:56,056 --> 00:03:58,416 to your teaching fellow via email to ask questions or try it 111 00:03:58,416 --> 00:03:59,926 in person or if you have questions 112 00:03:59,926 --> 00:04:03,146 or concerns also feel free to reach out to me as well. 113 00:04:03,146 --> 00:04:04,096 All right. 114 00:04:04,146 --> 00:04:06,546 So, today we dive a bit deeper into JavaScript, 115 00:04:06,546 --> 00:04:09,926 specifically using a technology or it's a bit 116 00:04:09,926 --> 00:04:12,386 of an overstatement, a technique called Ajax. 117 00:04:12,626 --> 00:04:16,906 What is Ajax in your current understanding if any? 118 00:04:16,906 --> 00:04:17,156 Jack. 119 00:04:17,596 --> 00:04:19,686 >> Some sort of JavaScript that can run 120 00:04:19,886 --> 00:04:21,206 after the page is already loaded 121 00:04:21,206 --> 00:04:23,216 and can load things from elsewhere. 122 00:04:23,356 --> 00:04:25,746 >> Good. So it refers to the ability to run JavaScript code, 123 00:04:25,746 --> 00:04:29,436 and specifically make HTTP requests in JavaScript code 124 00:04:29,716 --> 00:04:31,846 after a webpage has initially loaded 125 00:04:31,846 --> 00:04:32,916 so that you can grab more data. 126 00:04:33,176 --> 00:04:35,576 And in what kinds of applications or websites 127 00:04:35,576 --> 00:04:37,286 that you're familiar with is this useful? 128 00:04:37,826 --> 00:04:38,856 >> Well, if you're making a website 129 00:04:38,856 --> 00:04:41,366 that has Chat, for example -- 130 00:04:41,366 --> 00:04:41,566 >> Okay. 131 00:04:41,566 --> 00:04:43,696 >> -- on Facebook, they can need to push new content 132 00:04:43,696 --> 00:04:45,776 into the Chat window as people type things. 133 00:04:45,776 --> 00:04:46,196 >> Perfect. 134 00:04:46,236 --> 00:04:47,956 So if you're launching a chat room, right. 135 00:04:47,956 --> 00:04:48,916 Back in the day the way 136 00:04:48,916 --> 00:04:51,006 to implement an interactive chat room is literally 137 00:04:51,006 --> 00:04:54,416 to reload the whole page or reload a frame within a page 138 00:04:54,646 --> 00:04:56,716 that shows you the more recent instant messages 139 00:04:56,716 --> 00:04:57,396 that someone's posted. 140 00:04:57,396 --> 00:05:00,936 Nowadays you can just insert more div tags or span tags 141 00:05:00,936 --> 00:05:03,566 into your DOM as we'll see today 142 00:05:03,656 --> 00:05:05,776 so that you can see it dynamically updating itself. 143 00:05:05,816 --> 00:05:06,056 Jack. 144 00:05:06,206 --> 00:05:07,996 >> Google uses it all the time 145 00:05:07,996 --> 00:05:10,426 like in their suggested searches -- 146 00:05:10,426 --> 00:05:10,666 >> Good. 147 00:05:10,666 --> 00:05:13,096 >> -- or it may-- got instant load running, 148 00:05:13,096 --> 00:05:15,276 and then they also have it in Google Maps to look 149 00:05:15,276 --> 00:05:17,306 at certain parts of the world and things like that. 150 00:05:17,306 --> 00:05:17,666 >> Perfect. 151 00:05:17,666 --> 00:05:20,326 So Google does it with instant search and auto-complete 152 00:05:20,326 --> 00:05:22,226 so that you're fetching some data from a server 153 00:05:22,226 --> 00:05:23,116 and showing it to the user 154 00:05:23,116 --> 00:05:24,476 without reloading the whole page. 155 00:05:24,476 --> 00:05:26,246 Google Maps is another great example. 156 00:05:26,376 --> 00:05:26,516 Yeah. 157 00:05:26,516 --> 00:05:29,856 >> Connecting to Project One stock websites 158 00:05:29,986 --> 00:05:32,026 like real stock trading websites would have 159 00:05:32,026 --> 00:05:33,946 to do it otherwise you would have -- 160 00:05:34,316 --> 00:05:37,086 you would actually buy stocks that have an old price. 161 00:05:37,086 --> 00:05:37,626 You have to upload -- 162 00:05:37,626 --> 00:05:38,146 >> Okay, good. 163 00:05:38,146 --> 00:05:40,436 >> -- all the time to keep the user 164 00:05:40,436 --> 00:05:42,226 or the broker [inaudible] part of the price. 165 00:05:42,306 --> 00:05:42,726 >> Exactly. 166 00:05:42,726 --> 00:05:44,816 I think it actually is finance.yahoo.com 167 00:05:44,816 --> 00:05:46,266 or maybe it's Google Finance 168 00:05:46,306 --> 00:05:48,626 that updates the stock price every minute or so. 169 00:05:48,626 --> 00:05:49,916 So it's not perfectly real time, 170 00:05:50,176 --> 00:05:52,326 but if you leave a web page open all day long, 171 00:05:52,326 --> 00:05:54,496 hopefully by the end of the day you'll see the closing price 172 00:05:54,496 --> 00:05:56,436 as opposed to the price that you originally saw 173 00:05:56,676 --> 00:05:58,196 when you pulled up the page. 174 00:05:58,196 --> 00:05:58,666 Excellent. 175 00:05:58,916 --> 00:06:03,676 So a quick look back at a paradigm that we'll need to keep 176 00:06:03,676 --> 00:06:05,706 in mind now that we're diving in deeper to JavaScript. 177 00:06:05,706 --> 00:06:09,216 So, DOM. DOM was Document Object Model, and that was a fancy way 178 00:06:09,216 --> 00:06:10,796 of saying what exactly? 179 00:06:11,366 --> 00:06:13,326 And I realize there's a bug. 180 00:06:13,416 --> 00:06:15,266 Pardon my lack of a closed body tag. 181 00:06:15,266 --> 00:06:15,906 There should be one there. 182 00:06:16,046 --> 00:06:17,186 Not a fair question, I think. 183 00:06:17,186 --> 00:06:17,666 >> Well, it's 184 00:06:17,726 --> 00:06:20,686 like a representation of the structure -- 185 00:06:20,936 --> 00:06:21,146 >> Good. 186 00:06:21,146 --> 00:06:21,546 >> -- of a webpage. 187 00:06:21,666 --> 00:06:23,156 >> Yeah. So it's a representation 188 00:06:23,156 --> 00:06:24,526 of the structure of a webpage. 189 00:06:24,716 --> 00:06:27,916 This looks sort of visually hierarchical whereby there's 190 00:06:27,916 --> 00:06:31,416 some root to this structure, namely the HTML element. 191 00:06:31,416 --> 00:06:34,596 And so what DOM similarly captures that kind of hierarchy. 192 00:06:35,186 --> 00:06:36,246 >> Yeah. I was going to say 193 00:06:36,696 --> 00:06:39,236 that we have a representation called Tree or -- 194 00:06:39,396 --> 00:06:39,566 >> Good. 195 00:06:39,566 --> 00:06:40,126 >> -- B-Tree. 196 00:06:41,056 --> 00:06:41,426 >> B-Tree. 197 00:06:41,426 --> 00:06:42,656 So B-Tree, not in this case. 198 00:06:42,656 --> 00:06:43,886 That's more of a database thing. 199 00:06:43,886 --> 00:06:43,976 >> Oh, yeah. 200 00:06:44,526 --> 00:06:46,746 >> Or, at least, we've seen it in the context of the databases. 201 00:06:46,746 --> 00:06:47,406 But Tree, yes. 202 00:06:47,636 --> 00:06:47,756 >> Yes. 203 00:06:48,376 --> 00:06:48,676 >> Okay. 204 00:06:48,676 --> 00:06:50,116 >> In the Tree you have nodes 205 00:06:50,186 --> 00:06:51,336 and nodes have childs [inaudible]. 206 00:06:51,816 --> 00:06:52,286 >> Exactly. 207 00:06:52,286 --> 00:06:53,386 So we have this tree here. 208 00:06:53,386 --> 00:06:56,546 And the actual root of this tree we generically call the document 209 00:06:56,546 --> 00:06:59,736 node, and that's so that you can hang different things off of it 210 00:06:59,736 --> 00:07:03,556 like comments, for instance, or the HTML element in this case. 211 00:07:03,556 --> 00:07:05,986 But in this case, beneath the HTML element notice 212 00:07:05,986 --> 00:07:07,196 that we have the head element, 213 00:07:07,196 --> 00:07:09,316 the title elements, body, and so forth. 214 00:07:09,316 --> 00:07:11,956 And all of those show hierarchically what this page 215 00:07:11,956 --> 00:07:12,436 looks like. 216 00:07:12,436 --> 00:07:15,576 Once a browser has parsed it, that is, read it top to bottom, 217 00:07:15,576 --> 00:07:20,016 left to right, into some in memory, in RAM representation. 218 00:07:20,016 --> 00:07:22,766 So the neat thing about JavaScript starting today is 219 00:07:22,766 --> 00:07:28,026 that not only can we traverse the DOM as we did last Wednesday 220 00:07:28,266 --> 00:07:31,796 by actually accessing the username field 221 00:07:31,796 --> 00:07:33,526 or the password field to do validation, 222 00:07:33,776 --> 00:07:35,486 we can also mutate the DOM. 223 00:07:35,486 --> 00:07:37,496 In other words, delete nodes, add nodes. 224 00:07:37,496 --> 00:07:38,736 So, in the case of Facebook Chat, 225 00:07:39,136 --> 00:07:41,486 what's really happening is there is some kind of tree structure 226 00:07:41,486 --> 00:07:42,836 for the Facebook Chat window 227 00:07:43,146 --> 00:07:46,146 and what they keep doing is appending more and more 228 00:07:46,146 --> 00:07:49,196 and more children to one of the elements so that immediately 229 00:07:49,196 --> 00:07:52,006 in JavaScript, once you've added a new node, a new rectangle, 230 00:07:52,006 --> 00:07:54,086 in this case to the tree, the browser is supposed 231 00:07:54,086 --> 00:07:55,556 to display that new content. 232 00:07:55,556 --> 00:07:58,076 So we'll do it today, albeit with a stock example, 233 00:07:58,286 --> 00:07:59,636 but in a way that's representative 234 00:07:59,636 --> 00:08:02,986 of how you can insert yet more information into a page. 235 00:08:03,316 --> 00:08:06,686 So Ajax more properly flows as follows. 236 00:08:06,686 --> 00:08:09,326 So on the left- and the right-hand side here we have a 237 00:08:09,326 --> 00:08:11,616 client and a server, respectively. 238 00:08:11,826 --> 00:08:13,696 And we have five different steps 239 00:08:13,696 --> 00:08:17,206 that describe how Ajax itself works. 240 00:08:17,206 --> 00:08:19,536 So in Step One, we have some JavaScript called. 241 00:08:19,536 --> 00:08:20,446 So, actually, let's roll back. 242 00:08:20,446 --> 00:08:23,446 So you just visited at Facebook.com or Google.com 243 00:08:23,446 --> 00:08:25,846 or C75.net, whatever website it is 244 00:08:25,846 --> 00:08:28,916 that has some JavaScript code that's using Ajax involved. 245 00:08:29,326 --> 00:08:30,646 Then you do something 246 00:08:30,646 --> 00:08:32,426 that triggers the getting of more information. 247 00:08:32,426 --> 00:08:34,826 You click a button or maybe it just happens every minute 248 00:08:34,826 --> 00:08:37,016 on its own, and now we're in Step One. 249 00:08:37,016 --> 00:08:41,006 So there's a JavaScript called where it instantiates, 250 00:08:41,186 --> 00:08:43,236 so to speak, an object 251 00:08:43,396 --> 00:08:46,606 in JavaScript called an XML HttpRequest object. 252 00:08:46,726 --> 00:08:49,206 This is sort of a fancy object similar in spirit 253 00:08:49,206 --> 00:08:51,886 to the document object of the Window object 254 00:08:51,886 --> 00:08:53,896 that you already have access to in JavaScript. 255 00:08:54,026 --> 00:08:55,486 But this one's all about Ajax. 256 00:08:55,666 --> 00:08:57,566 That object is allowed in Step Three 257 00:08:57,566 --> 00:08:59,466 to make an additional HTTP request 258 00:08:59,466 --> 00:09:01,246 without the user reloading the whole page. 259 00:09:01,416 --> 00:09:04,546 So it's a function call related to that object. 260 00:09:04,986 --> 00:09:07,696 In Step Four, the web server realizes, oh, 261 00:09:07,696 --> 00:09:09,036 I've got a request for more data. 262 00:09:09,036 --> 00:09:10,776 Maybe it's for some chat messages; 263 00:09:10,776 --> 00:09:12,906 maybe it's for some stock prices, whatever it is. 264 00:09:13,176 --> 00:09:15,466 Maybe the web server in Step Four has to talk 265 00:09:15,466 --> 00:09:17,156 to its own database which might be the case 266 00:09:17,156 --> 00:09:18,376 in the Facebook Chat model 267 00:09:18,376 --> 00:09:20,246 if you're storing those messages persistently. 268 00:09:20,666 --> 00:09:24,716 And, eventually, the web server responds at the end 269 00:09:24,716 --> 00:09:28,536 of Step Four with, in this case, some XML content. 270 00:09:28,666 --> 00:09:30,706 So XML we talked about early on. 271 00:09:30,706 --> 00:09:31,916 You're using in for Project Zero. 272 00:09:32,156 --> 00:09:35,126 And it's a very common format for moving data from one server 273 00:09:35,126 --> 00:09:38,716 to another in a way that's easy to parse after the fact. 274 00:09:39,156 --> 00:09:41,376 Semantically tagged, much like your pizza menu. 275 00:09:41,736 --> 00:09:44,766 So in Step Five, finally, the browser has received 276 00:09:44,766 --> 00:09:46,156 that XML data and it turns 277 00:09:46,156 --> 00:09:51,126 out in JavaScript you can parse XML much like you can in PHP. 278 00:09:51,126 --> 00:09:53,006 And so what Step Five is proposing is 279 00:09:53,006 --> 00:09:56,006 that upon receiving this XML data, which contains, again, 280 00:09:56,006 --> 00:09:59,196 some instant messages or some stock prices, whatever it is, 281 00:09:59,676 --> 00:10:04,196 that XML is converted by JavaScript code that you wrote 282 00:10:04,456 --> 00:10:07,626 to HTML and/or CSS, and plugged into the current web page. 283 00:10:08,096 --> 00:10:10,546 So we'll see all this in real terms 284 00:10:10,606 --> 00:10:11,926 in an example in just a moment. 285 00:10:12,176 --> 00:10:15,526 But, in short, browser requests more data using this fancy 286 00:10:15,526 --> 00:10:17,146 object called XML HttpRequest. 287 00:10:17,146 --> 00:10:18,866 The server receives that request, 288 00:10:18,866 --> 00:10:21,436 figures out what it wants, responds with some XML. 289 00:10:21,636 --> 00:10:24,636 The JavaScript code on the client then reads that XML, 290 00:10:24,636 --> 00:10:27,596 converts it to HTML or CSS, much like you guys did 291 00:10:27,596 --> 00:10:29,126 for Project Zero but in PHP. 292 00:10:29,126 --> 00:10:31,516 And then the user sees the end results. 293 00:10:31,516 --> 00:10:33,596 And, of course, this all happens [finger snap] pretty darn fast. 294 00:10:34,186 --> 00:10:37,846 So there's one sort of dated aspect here. 295 00:10:37,846 --> 00:10:41,226 Ajax, once upon a time, stood for Asynchronous JavaScript 296 00:10:41,226 --> 00:10:43,016 and XML because when it first came 297 00:10:43,016 --> 00:10:46,086 into vogue XML was the transport mechanism. 298 00:10:46,086 --> 00:10:48,486 It was how data was sent from server to client. 299 00:10:48,866 --> 00:10:52,066 These days a different data format is much more popular. 300 00:10:52,096 --> 00:10:52,216 Yeah? 301 00:10:52,546 --> 00:10:55,016 >> This is a guess -- by JSon? 302 00:10:55,016 --> 00:10:56,046 >> JSon, yes, exactly. 303 00:10:56,046 --> 00:10:58,266 JavaScript Object Notation. 304 00:10:58,506 --> 00:11:02,836 J-S-O-N is much more popular these days, daresay, than XML, 305 00:11:03,046 --> 00:11:05,026 in large part because it's less verbose. 306 00:11:05,186 --> 00:11:07,166 In other words, XML has open tags, 307 00:11:07,166 --> 00:11:08,826 closed tags, a lot of redundancy. 308 00:11:08,826 --> 00:11:11,436 It's very readable but it's also very bloated 309 00:11:11,436 --> 00:11:13,026 and that was partly by design. 310 00:11:13,026 --> 00:11:14,476 It was meant to be very human-readable, 311 00:11:14,666 --> 00:11:16,706 but it's perhaps excessively so. 312 00:11:16,906 --> 00:11:18,096 So, in JSon, as we'll see, 313 00:11:18,096 --> 00:11:21,436 you have a much simpler data format and, in fact, 314 00:11:21,436 --> 00:11:24,126 JSon notation is identical to object notation 315 00:11:24,126 --> 00:11:26,346 that we saw last time when we just looked 316 00:11:26,346 --> 00:11:27,386 at JavaScript objects. 317 00:11:27,386 --> 00:11:30,186 Indeed, that's what JSon means -- JavaScript Object Notation. 318 00:11:30,516 --> 00:11:32,246 So this format is very simple. 319 00:11:32,246 --> 00:11:35,906 It's much less verbose but it's also relatively easy 320 00:11:35,906 --> 00:11:37,436 to read and understand. 321 00:11:37,436 --> 00:11:38,636 You don't quite have the same notion 322 00:11:38,636 --> 00:11:40,676 of attributes and child elements. 323 00:11:40,966 --> 00:11:43,136 But you have the notion of children through hierarchy. 324 00:11:43,206 --> 00:11:45,286 So we'll see in just a moment what JSon looks like, 325 00:11:45,536 --> 00:11:48,676 and that is probably a much more compelling route 326 00:11:48,676 --> 00:11:50,746 to go these days for transmitting your data. 327 00:11:50,746 --> 00:11:53,096 And, in fact, that's why some people, as I did here, 328 00:11:53,096 --> 00:11:54,676 write Ajax in lower case now 329 00:11:54,956 --> 00:11:57,306 because it's not necessarily an acronym anymore. 330 00:11:57,826 --> 00:12:00,046 So let's focus on this special object for a moment. 331 00:12:00,336 --> 00:12:03,216 So there is a feature in modern browsers called the XML 332 00:12:03,216 --> 00:12:04,676 HttpRequest object. 333 00:12:04,676 --> 00:12:07,586 Again, it's similar in spirit to special global objects 334 00:12:07,586 --> 00:12:10,256 like a date object, a string object, a window object, 335 00:12:10,256 --> 00:12:11,756 a document object, and so forth, 336 00:12:11,756 --> 00:12:13,966 that exists in the context of a page. 337 00:12:14,226 --> 00:12:15,726 This particular object has a bunch 338 00:12:15,726 --> 00:12:17,156 of functionality that's built into it. 339 00:12:17,156 --> 00:12:18,766 At the end of the day it all has to do 340 00:12:18,766 --> 00:12:21,416 with getting HTTP-based data. 341 00:12:21,936 --> 00:12:24,476 How is that implemented? 342 00:12:24,476 --> 00:12:27,126 Well, for instance, there's an open method inside 343 00:12:27,126 --> 00:12:29,566 of this object, and the open method can be called 344 00:12:29,566 --> 00:12:30,446 in a few different ways. 345 00:12:30,446 --> 00:12:31,666 It has a few different signatures. 346 00:12:31,666 --> 00:12:33,216 You can call it with two arguments, three, 347 00:12:33,216 --> 00:12:34,436 or even four arguments. 348 00:12:34,576 --> 00:12:37,666 But at the end of the day open simply opens an HTTP connection 349 00:12:37,776 --> 00:12:40,146 from the browser to some remote server. 350 00:12:40,546 --> 00:12:42,986 There is a Send method which can be called with 351 00:12:42,986 --> 00:12:45,616 or without an argument, but it does as the name suggests. 352 00:12:45,616 --> 00:12:48,696 It actually sends data over an open connection 353 00:12:48,866 --> 00:12:50,086 from the client to the server. 354 00:12:50,226 --> 00:12:53,536 So it's a two-step process minimally to actually get data 355 00:12:53,536 --> 00:12:55,066 from a server via Ajax. 356 00:12:55,066 --> 00:12:56,046 You open a connection. 357 00:12:56,226 --> 00:12:57,306 Then you send your request. 358 00:12:57,416 --> 00:12:59,336 You send your Get request or your Post request, 359 00:12:59,496 --> 00:13:01,026 and you're going to hopefully get back a response. 360 00:13:01,306 --> 00:13:04,376 When you do, you can call something like GetResponseHeader 361 00:13:04,376 --> 00:13:07,266 or GetAllResponseHeaders to actually get the HTTP headers 362 00:13:07,556 --> 00:13:08,526 that the server returned. 363 00:13:08,796 --> 00:13:12,536 I would propose that that's not terribly common for you to need 364 00:13:12,536 --> 00:13:13,976 to call that method directly. 365 00:13:13,976 --> 00:13:17,206 There are simpler ways of reading the response. 366 00:13:17,286 --> 00:13:19,946 And we'll see in just a moment how you access the response. 367 00:13:20,206 --> 00:13:21,206 But there's an Abort method 368 00:13:21,206 --> 00:13:22,836 which means stop this connection. 369 00:13:22,836 --> 00:13:24,916 For instance, if the user clicks Cancel and you want 370 00:13:24,916 --> 00:13:27,596 to abort an open Ajax request if it's being slow. 371 00:13:27,936 --> 00:13:29,546 That's possible as well. 372 00:13:30,046 --> 00:13:33,856 So an XML HttpRequest object now has a bunch of properties. 373 00:13:34,186 --> 00:13:35,256 So recall that objects 374 00:13:35,456 --> 00:13:37,336 in object-oriented programming have methods 375 00:13:37,336 --> 00:13:39,366 and they have properties or data members. 376 00:13:39,656 --> 00:13:41,886 So the properties for this object are as follows -- 377 00:13:42,316 --> 00:13:44,556 onreadystatechange, which we'll come back to, 378 00:13:45,006 --> 00:13:46,566 readyState, this is easier. 379 00:13:46,616 --> 00:13:47,586 This is just a number. 380 00:13:47,826 --> 00:13:51,326 So there is a property inside of an XML HttpRequest object 381 00:13:51,516 --> 00:13:54,106 that tells you what state the object is in. 382 00:13:54,566 --> 00:13:56,506 Is it in state zero, uninitialized? 383 00:13:56,606 --> 00:13:57,616 You've created the object 384 00:13:57,616 --> 00:13:59,106 but you haven't done anything with it. 385 00:13:59,106 --> 00:14:01,076 You haven't requested any data from a server. 386 00:14:01,416 --> 00:14:03,936 Step One, or State One, open. 387 00:14:04,036 --> 00:14:06,956 Have you opened a connection before having sent anything? 388 00:14:07,406 --> 00:14:08,336 State Two. 389 00:14:08,336 --> 00:14:09,696 Have you sent information? 390 00:14:09,776 --> 00:14:10,446 State Three. 391 00:14:10,586 --> 00:14:12,606 Are you currently receiving information? 392 00:14:12,606 --> 00:14:14,516 And, finally, State Four, loaded. 393 00:14:14,696 --> 00:14:15,676 Are you all set? 394 00:14:16,126 --> 00:14:19,436 So the reality is that when you make an Ajax request you go 395 00:14:19,436 --> 00:14:24,236 from State Zero to Two pretty darn fast -- Zero, One, Two. 396 00:14:24,616 --> 00:14:25,846 And then you've sent your request. 397 00:14:26,036 --> 00:14:28,406 So it's not that interesting looking at all 398 00:14:28,406 --> 00:14:29,836 of these individual state changes. 399 00:14:30,156 --> 00:14:33,866 In fact, what most people do is only look at State Four. 400 00:14:33,866 --> 00:14:35,566 In other words, you keep an eye on this object 401 00:14:35,566 --> 00:14:36,606 after you've sent a request. 402 00:14:36,786 --> 00:14:39,046 And only once the object state has changed 403 00:14:39,046 --> 00:14:40,176 to Four, do you care. 404 00:14:40,456 --> 00:14:43,816 It's rare that you need to care about Zero, One, Two, or Three. 405 00:14:43,986 --> 00:14:46,386 Four means it actually worked and you had back some data. 406 00:14:47,086 --> 00:14:50,226 So responseBody, responseText, and responseXML. 407 00:14:50,556 --> 00:14:53,956 You kind of see some of the legacy features here 408 00:14:54,296 --> 00:14:56,596 or rather the original design intents here. 409 00:14:56,596 --> 00:15:00,306 But responseText literally contains the browser's response. 410 00:15:00,646 --> 00:15:02,066 Sorry, the server's response. 411 00:15:02,296 --> 00:15:05,696 If the server has returned HTML, if the server has returned XML, 412 00:15:05,696 --> 00:15:08,716 if the server has returned JSon, it's in responseText. 413 00:15:08,976 --> 00:15:10,676 It's exactly what the browser returned. 414 00:15:10,816 --> 00:15:11,746 It's what you, the human, 415 00:15:11,746 --> 00:15:14,316 would see if you manually visited the URL in question 416 00:15:14,316 --> 00:15:15,376 with your own browser. 417 00:15:15,796 --> 00:15:21,396 ResponseBody is generally used for something like HTML. 418 00:15:21,926 --> 00:15:25,946 So if you actually want to get back more 419 00:15:25,946 --> 00:15:28,516 than just the raw text, but some representation of it. 420 00:15:28,796 --> 00:15:32,396 ResponseXML -- if the response was XML, 421 00:15:32,396 --> 00:15:34,306 responseXML hands you a DOM. 422 00:15:34,626 --> 00:15:38,226 It hands you the root of the tree that the browser built 423 00:15:38,226 --> 00:15:40,626 up upon reading that XML. 424 00:15:40,626 --> 00:15:41,966 So, in other words, if you want raw text, 425 00:15:42,396 --> 00:15:43,526 you go with responseText. 426 00:15:43,526 --> 00:15:45,846 If you want a DOM that's been pre-parsed 427 00:15:45,846 --> 00:15:48,216 for you, you use responseXML. 428 00:15:48,416 --> 00:15:50,216 So, in short, if you're expecting XML, 429 00:15:50,396 --> 00:15:53,566 you should actually access the return value via a responseXML, 430 00:15:53,566 --> 00:15:55,936 otherwise responseText generally suffices. 431 00:15:56,196 --> 00:15:57,916 Notice there's no response JSon. 432 00:15:58,106 --> 00:16:00,646 Response JSon is transmitted just as pure text 433 00:16:00,906 --> 00:16:03,526 and there's generally an additional step we ourselves 434 00:16:03,526 --> 00:16:06,316 have to implement in order to convert JSon, 435 00:16:06,316 --> 00:16:09,596 which is just going to be text, to an in-memory representation 436 00:16:09,596 --> 00:16:10,946 of a JavaScript object. 437 00:16:10,946 --> 00:16:13,166 So we'll see that in just a moment. 438 00:16:13,166 --> 00:16:14,716 Lastly of interest, status. 439 00:16:15,066 --> 00:16:17,256 So these you can probably infer what status is. 440 00:16:17,466 --> 00:16:20,766 Whereas readyState refers to this internal notion of state 441 00:16:20,766 --> 00:16:22,656 for the XML HttpRequest object. 442 00:16:22,946 --> 00:16:25,136 Status clearly refers to what exactly? 443 00:16:25,706 --> 00:16:29,306 What does status refer to? 444 00:16:29,306 --> 00:16:30,386 Yeah. Excellent. 445 00:16:30,966 --> 00:16:34,336 >> It's what the server you're requesting things 446 00:16:34,466 --> 00:16:35,366 from sends back. 447 00:16:35,366 --> 00:16:35,816 >> Exactly. 448 00:16:35,816 --> 00:16:37,236 So this is one of the first things 449 00:16:37,236 --> 00:16:38,286 that are sent in the headers. 450 00:16:38,636 --> 00:16:40,106 Is it 200, which is okay. 451 00:16:40,106 --> 00:16:40,766 That's a good thing. 452 00:16:40,766 --> 00:16:43,336 If it's 404, it means you might have made an Ajax request 453 00:16:43,336 --> 00:16:44,016 but you screwed up. 454 00:16:44,016 --> 00:16:46,186 You visited a URL that just doesn't exist. 455 00:16:46,446 --> 00:16:48,626 Five hundred means something bad really happened. 456 00:16:48,626 --> 00:16:51,016 There's 401, 403, all of the usual ones. 457 00:16:51,286 --> 00:16:53,756 So, in general with Ajax, what a programmer will check 458 00:16:53,816 --> 00:16:58,826 for is am I in readyState Four, and was the status 200? 459 00:16:58,826 --> 00:17:01,096 If so, life is good and I can proceed 460 00:17:01,096 --> 00:17:02,236 to do something with the response. 461 00:17:02,316 --> 00:17:04,416 Otherwise something bad happened. 462 00:17:04,906 --> 00:17:06,516 So that's the general failure case. 463 00:17:07,066 --> 00:17:07,406 All right. 464 00:17:07,466 --> 00:17:09,806 So that's the high-level setup. 465 00:17:10,156 --> 00:17:12,576 Let's go ahead and take a look at an example. 466 00:17:12,576 --> 00:17:17,316 So in today's lecture examples we have a whole bunch 467 00:17:17,316 --> 00:17:22,526 of files -- Ajax1 and on upward, a JIF, and some PHP files. 468 00:17:22,836 --> 00:17:25,866 So let's go ahead and implement a very small web-based 469 00:17:25,866 --> 00:17:29,076 application that allows me to check stock prices. 470 00:17:29,246 --> 00:17:32,036 So let me go first to Ajax1.html. 471 00:17:32,706 --> 00:17:34,746 And this is a very simple user interface. 472 00:17:34,746 --> 00:17:36,726 And I'm going to go ahead and type in GOOG -- 473 00:17:36,876 --> 00:17:39,396 G-O-O-G, as the stock symbol for Google. 474 00:17:39,656 --> 00:17:40,826 I'm going to click Get Quo. 475 00:17:41,826 --> 00:17:45,316 Okay. So this is pretty much something we could have done 476 00:17:45,316 --> 00:17:47,126 last week in terms of the alerting. 477 00:17:47,336 --> 00:17:48,756 But notice what didn't happen. 478 00:17:48,756 --> 00:17:50,136 There was no whole page reload. 479 00:17:50,136 --> 00:17:52,516 And, in fact, as you've been working on Project One, 480 00:17:52,576 --> 00:17:55,536 cs75 finance, odds are when you click the Submit button 481 00:17:55,536 --> 00:17:58,636 on your quote page you're led to another page in order 482 00:17:58,636 --> 00:18:00,126 to see the response from the server. 483 00:18:00,416 --> 00:18:01,456 But I haven't done that here. 484 00:18:01,456 --> 00:18:03,316 I've used this quick and dirty approach 485 00:18:03,316 --> 00:18:05,336 of calling the JavaScript Alert function. 486 00:18:05,636 --> 00:18:07,886 But notice that my URL has not changed. 487 00:18:07,886 --> 00:18:09,226 And that's the key takeaway for now. 488 00:18:09,226 --> 00:18:11,486 I am not visiting a new page all of a sudden. 489 00:18:11,776 --> 00:18:15,076 I have somehow retrieved data dynamically from the server 490 00:18:15,076 --> 00:18:18,186 and then shown it to the user without refreshing the page. 491 00:18:18,446 --> 00:18:20,906 So let me go ahead and open up Ajax1.html. 492 00:18:21,236 --> 00:18:24,906 I'm going to use a text editor called Vim, but you can do this 493 00:18:24,906 --> 00:18:26,056 in most any text editor. 494 00:18:26,376 --> 00:18:29,356 And let me zoom in on first the HTML at the bottom. 495 00:18:29,666 --> 00:18:32,336 So at the very bottom we have a form element. 496 00:18:32,716 --> 00:18:34,696 We have quote1.php as the action 497 00:18:34,696 --> 00:18:36,546 which we'll see is a very simple file 498 00:18:36,636 --> 00:18:38,916 that I essentially ported over from last week. 499 00:18:39,236 --> 00:18:40,166 Method equals get. 500 00:18:40,386 --> 00:18:44,316 On Submit equals quote no argument semi-colon; 501 00:18:44,316 --> 00:18:46,636 and then you can kind of infer -- 502 00:18:46,636 --> 00:18:48,386 this is an interesting little thought exercise. 503 00:18:48,446 --> 00:18:55,726 What does it likely say after quote semi-colon? 504 00:18:55,726 --> 00:18:58,686 Re -- what's that? 505 00:18:58,686 --> 00:18:58,886 Isaac? 506 00:18:58,886 --> 00:19:00,996 >> Return quote? 507 00:19:01,116 --> 00:19:01,266 Or -- 508 00:19:01,266 --> 00:19:02,426 >> Return -- no, not return quote 509 00:19:02,426 --> 00:19:04,476 because we already called quote. 510 00:19:04,776 --> 00:19:06,906 >> Although the -- 511 00:19:07,106 --> 00:19:07,316 >> Quick. 512 00:19:07,596 --> 00:19:08,396 >> Response maybe? 513 00:19:08,396 --> 00:19:09,386 >> No. Quick. 514 00:19:09,906 --> 00:19:12,686 Oh, come on. 515 00:19:12,686 --> 00:19:13,196 >> False? 516 00:19:14,006 --> 00:19:14,766 >> Okay, false. 517 00:19:15,386 --> 00:19:16,206 So why is this? 518 00:19:16,206 --> 00:19:17,516 So this was a reasonable question, 519 00:19:17,516 --> 00:19:18,516 I thought, to ask, right? 520 00:19:18,516 --> 00:19:20,206 Because what's the intended behavior here? 521 00:19:20,206 --> 00:19:21,756 Do you want this form to be submitted? 522 00:19:21,756 --> 00:19:22,386 >> No. Yeah. 523 00:19:23,606 --> 00:19:24,216 Obviously not. 524 00:19:24,216 --> 00:19:24,946 >> Good save. 525 00:19:25,176 --> 00:19:25,866 So, obviously not. 526 00:19:25,866 --> 00:19:27,286 So you don't want the form to be submitted 527 00:19:27,286 --> 00:19:29,256 because if it did get submitted you would have been led 528 00:19:29,256 --> 00:19:31,036 to another webpage as is the case. 529 00:19:31,036 --> 00:19:33,716 And that webpage in this case would have been quote1.php, 530 00:19:33,716 --> 00:19:37,036 so that sort of HTML 1.0 style form interactions. 531 00:19:37,316 --> 00:19:39,116 So in this case I didn't want the form 532 00:19:39,116 --> 00:19:41,196 to actually get submitted, but I wanted to use a form 533 00:19:41,196 --> 00:19:42,866 to get user input, right? 534 00:19:42,866 --> 00:19:45,666 I wanted to enable someone like me to type in G-O-O-G, 535 00:19:45,666 --> 00:19:46,726 and hit a Submit button. 536 00:19:47,066 --> 00:19:49,816 But I want to, in JavaScript code today, 537 00:19:50,046 --> 00:19:52,416 override the default form handling behavior, 538 00:19:52,416 --> 00:19:55,636 much like I did last Wednesday when doing form validation. 539 00:19:55,816 --> 00:19:58,796 But this time I want to not only intercept the form submission, 540 00:19:59,096 --> 00:20:01,436 I want to do the HttpRequest myself 541 00:20:01,436 --> 00:20:03,226 and then show the user the response. 542 00:20:03,836 --> 00:20:06,606 So I still want to use the input mechanism of a form, 543 00:20:06,936 --> 00:20:10,416 but I want to implement the backend functionality myself, 544 00:20:10,416 --> 00:20:12,166 the handling of that form submission. 545 00:20:12,446 --> 00:20:13,896 So let's see what I've done here. 546 00:20:14,096 --> 00:20:17,236 I've only asked the user for a symbol, and I've noticed 547 00:20:17,236 --> 00:20:19,526 that I've given the symbol a name of symbol. 548 00:20:19,526 --> 00:20:21,656 But I've also given it an ID of symbol. 549 00:20:21,656 --> 00:20:22,846 A little redundant but it turns 550 00:20:22,846 --> 00:20:24,396 out this makes my life a little easier 551 00:20:24,396 --> 00:20:26,096 in just a moment in code as we'll see. 552 00:20:26,346 --> 00:20:27,066 The type is text. 553 00:20:27,066 --> 00:20:29,606 A couple of line breaks and a Submit button, and that's it. 554 00:20:29,886 --> 00:20:32,416 So in terms of HTML there's nothing fancy here. 555 00:20:32,546 --> 00:20:34,946 The only thing of interest is apparently this event handler 556 00:20:35,026 --> 00:20:35,566 on Submit. 557 00:20:36,026 --> 00:20:36,896 So just to be clear, 558 00:20:36,896 --> 00:20:38,826 what function obviously is getting called 559 00:20:38,826 --> 00:20:39,706 when I click Submit now? 560 00:20:40,366 --> 00:20:40,856 >> Quote. 561 00:20:41,036 --> 00:20:42,926 >> Quote. So let's scroll up now 562 00:20:43,236 --> 00:20:45,306 and see this supposed quote function. 563 00:20:45,536 --> 00:20:47,956 So if I scroll up to the top, notice that in the head 564 00:20:47,956 --> 00:20:51,506 of my page I have a script tag, much like I had last week. 565 00:20:52,106 --> 00:20:55,366 And now notice I have a variable up there called xhr 566 00:20:55,366 --> 00:20:56,746 which is just shorthand notation, 567 00:20:56,746 --> 00:20:59,566 totally arbitrary, for XML HttpRequest. 568 00:20:59,606 --> 00:21:00,916 Could have called it fubar baz. 569 00:21:00,916 --> 00:21:01,546 It doesn't matter. 570 00:21:01,896 --> 00:21:05,006 But notice that I've initialized it to null for now just 571 00:21:05,006 --> 00:21:07,166 so that I know what its initial value is. 572 00:21:07,586 --> 00:21:09,906 Now notice down below I have a quote function. 573 00:21:10,456 --> 00:21:13,986 So if I scroll down below the break here, 574 00:21:14,416 --> 00:21:17,976 notice that I'm doing a few lines of code. 575 00:21:18,336 --> 00:21:23,336 I am trying to instantiate an XML HttpRequest object. 576 00:21:23,616 --> 00:21:26,926 And if that fails because an exception is thrown, 577 00:21:26,926 --> 00:21:30,476 I'm going to instead try to instantiate an ActiveX object. 578 00:21:31,346 --> 00:21:32,536 So what's going on here? 579 00:21:32,926 --> 00:21:34,126 This is somewhat dated. 580 00:21:34,126 --> 00:21:36,616 This is really here now just for backwards compatibility. 581 00:21:37,136 --> 00:21:40,466 But take a guess as to why or why we're doing this 582 00:21:40,466 --> 00:21:40,976 or what we're doing here. 583 00:21:48,236 --> 00:21:48,436 Axle? 584 00:21:48,436 --> 00:21:51,216 >> I mean, the XML HttpRequest, 585 00:21:51,266 --> 00:21:54,276 that's what you're first trying to create. 586 00:21:54,276 --> 00:21:54,486 >> Good. 587 00:21:54,486 --> 00:21:57,686 >> And if that doesn't work you're probably using some older 588 00:21:57,686 --> 00:22:00,906 version or another version that works on public systems. 589 00:22:00,906 --> 00:22:02,586 >> Good. And what system might that be in this case? 590 00:22:02,826 --> 00:22:04,536 >> All the Microsoft systems. 591 00:22:04,536 --> 00:22:05,366 >> In IE, yeah. 592 00:22:05,366 --> 00:22:06,366 So this is the result 593 00:22:06,366 --> 00:22:08,746 of the browser manufacturers not cooperating years ago 594 00:22:08,746 --> 00:22:10,896 when whereas most of the world was going in the direction 595 00:22:10,896 --> 00:22:13,216 of supporting an XML HttpRequest object, 596 00:22:13,436 --> 00:22:16,076 IE was not so accommodating at the time. 597 00:22:16,076 --> 00:22:18,986 So this what you might see underneath the hood of something 598 00:22:18,986 --> 00:22:21,266 like JQuery or JavaScript Library 599 00:22:21,476 --> 00:22:23,546 that we'll see tonight will actually simplify a lot 600 00:22:23,546 --> 00:22:25,296 of the code that we're writing right now. 601 00:22:25,296 --> 00:22:27,106 In fact, this is deliberately verbose. 602 00:22:27,106 --> 00:22:29,616 This is deliberately low-level 603 00:22:29,756 --> 00:22:33,326 so that you can see how the underlying code should be 604 00:22:33,326 --> 00:22:35,916 implemented even if you're abstracting away ultimately a 605 00:22:35,916 --> 00:22:38,156 lot of these details with more user-friendly libraries 606 00:22:38,156 --> 00:22:38,846 like JQuery. 607 00:22:38,846 --> 00:22:41,036 In fact, we'll see by the last Ajax example tonight, 608 00:22:41,256 --> 00:22:42,896 we're going to simplify all of this code 609 00:22:43,026 --> 00:22:45,096 to something that's much, much cleaner, 610 00:22:45,096 --> 00:22:46,516 but still just as functional. 611 00:22:46,856 --> 00:22:49,246 So in short, this is actually kind of an abusive try/catch. 612 00:22:49,246 --> 00:22:51,056 In general you shouldn't be using try 613 00:22:51,056 --> 00:22:53,506 and catch for a logic flow. 614 00:22:53,506 --> 00:22:55,586 In other words, you shouldn't be using it 615 00:22:55,586 --> 00:22:57,306 as though it's kind of like an if/else. 616 00:22:57,306 --> 00:22:59,486 But the reality is this is the way to do it here 617 00:22:59,756 --> 00:23:03,156 because the XML HttpRequest object will trigger an exception 618 00:23:03,156 --> 00:23:04,776 if it doesn't exist because you're using IE6 619 00:23:05,176 --> 00:23:05,946 or something like that. 620 00:23:06,436 --> 00:23:09,376 Okay. Well, let's assume by then we have something 621 00:23:09,376 --> 00:23:10,986 in this variable xhr. 622 00:23:10,986 --> 00:23:13,176 If not, it's going to be null. 623 00:23:13,306 --> 00:23:14,386 In which case we're going to yell 624 00:23:14,386 --> 00:23:16,796 at the user saying Ajax is not supported by your browser. 625 00:23:16,796 --> 00:23:19,086 So not a terribly common concern these days. 626 00:23:19,366 --> 00:23:21,556 But if the user's using an older browser, 627 00:23:21,556 --> 00:23:23,706 maybe certain Blackberry devices, or older devices 628 00:23:23,706 --> 00:23:25,706 that didn't have full-fledge JavaScript support, 629 00:23:25,706 --> 00:23:26,586 you might run into this. 630 00:23:26,586 --> 00:23:29,506 So, in general, we're just doing some good error checking here. 631 00:23:29,816 --> 00:23:33,406 But suppose that xhr is not null and we actually have a reference 632 00:23:33,406 --> 00:23:35,826 to one of these objects. 633 00:23:36,006 --> 00:23:38,086 Let's see how you can make an Ajax call. 634 00:23:38,086 --> 00:23:39,196 It's actually pretty simple. 635 00:23:39,546 --> 00:23:40,376 So, first, I'm going 636 00:23:40,376 --> 00:23:44,036 to construct a variable called URL whose value is quote 1.php 637 00:23:44,036 --> 00:23:47,246 question mark symbol equals something. 638 00:23:47,246 --> 00:23:48,346 All right. 639 00:23:48,346 --> 00:23:48,946 Why is that? 640 00:23:48,946 --> 00:23:52,086 Well, I want to make an HttpRequest to quote l.php. 641 00:23:52,086 --> 00:23:55,926 It's in the same directory as the current HTML file, 642 00:23:55,926 --> 00:23:58,556 so I don't need any slashes or I don't need any HTTP. 643 00:23:58,556 --> 00:24:00,186 I can just use a relative URL. 644 00:24:00,546 --> 00:24:03,416 And just as you did, or are doing in Project One, 645 00:24:03,416 --> 00:24:06,786 creating URLs sort of on the fly with -- 646 00:24:06,786 --> 00:24:10,296 or for Project Zero with question mark symbol equals, 647 00:24:10,626 --> 00:24:11,676 what's this next line? 648 00:24:11,676 --> 00:24:13,086 Well, plus means concatenate. 649 00:24:13,296 --> 00:24:15,116 And if we scroll over to the right here, 650 00:24:15,116 --> 00:24:18,196 document dot get element by ID symbol dot value, 651 00:24:19,056 --> 00:24:23,106 just in English, what is that expression doing for us? 652 00:24:24,736 --> 00:24:27,856 Document dot get element by ID symbol dot value. 653 00:24:27,856 --> 00:24:28,106 Yeah, Ben. 654 00:24:29,056 --> 00:24:30,926 >> Just getting what you typed in. 655 00:24:30,926 --> 00:24:31,986 >> Yeah. Exactly. 656 00:24:31,986 --> 00:24:33,546 Just getting what the user typed in. 657 00:24:33,796 --> 00:24:36,606 Specifically it's using the document object. 658 00:24:36,606 --> 00:24:38,876 Recall, that's the special global object you have access 659 00:24:38,876 --> 00:24:39,806 to in JavaScript. 660 00:24:40,226 --> 00:24:43,586 Get element by ID we haven't seen yet but this is a function 661 00:24:43,586 --> 00:24:45,796 that exists inside of that document object 662 00:24:46,066 --> 00:24:47,456 that does exactly what it says. 663 00:24:47,456 --> 00:24:50,206 It gets an element in a webpage by its ID. 664 00:24:50,356 --> 00:24:53,446 Notice that it's not by name. 665 00:24:53,446 --> 00:24:55,396 If I had used -- or rather by tag name. 666 00:24:55,656 --> 00:24:57,776 Tag name actually I think we did use last time 667 00:24:57,776 --> 00:25:00,386 where I searched the DOM for all of the blink tags. 668 00:25:00,686 --> 00:25:03,156 In this case I want one specific tag, 669 00:25:03,426 --> 00:25:06,116 the one to whom I assigned an ID of symbol. 670 00:25:06,166 --> 00:25:08,326 So that's why I gave it an ID. 671 00:25:08,806 --> 00:25:13,166 Dot value means get the actual textual value of that node. 672 00:25:13,576 --> 00:25:16,856 So in short, I've constructed a URL right now that's quote 1.php 673 00:25:16,856 --> 00:25:19,156 question mark symbol equals what? 674 00:25:19,856 --> 00:25:20,026 >> GOOG. 675 00:25:20,246 --> 00:25:21,836 >> GOOG, G-O-O-G. 676 00:25:21,986 --> 00:25:22,616 So that's it. 677 00:25:22,616 --> 00:25:26,646 I have a string now in memory and a variable called URL 678 00:25:26,956 --> 00:25:29,426 that I now pass as follows -- 679 00:25:29,556 --> 00:25:32,936 xhr dot onreadystatechange equals handler. 680 00:25:32,966 --> 00:25:34,416 Let's again ignore that for just a moment. 681 00:25:34,946 --> 00:25:39,656 Line two -- xhr open quote unquote get url true. 682 00:25:39,656 --> 00:25:42,166 This is actually a little more verbose than it needs to be, 683 00:25:42,166 --> 00:25:46,906 but this is clearly preparing to send an HTTP Get request, 684 00:25:46,996 --> 00:25:49,246 the sort of easy one that's all URL-based. 685 00:25:49,556 --> 00:25:52,656 The URL is the destination True just means asynchronous 686 00:25:52,656 --> 00:25:53,436 which is the default. 687 00:25:53,436 --> 00:25:54,536 But I put it there to be explicit. 688 00:25:54,536 --> 00:25:57,046 And we'll contrast this with synchronous in just a bit. 689 00:25:57,216 --> 00:26:00,386 xhr dot send null just means send the request. 690 00:26:01,596 --> 00:26:01,856 All right. 691 00:26:01,936 --> 00:26:03,286 So, in short, what's happening? 692 00:26:03,846 --> 00:26:06,236 The open line opens an HTTP connection 693 00:26:06,236 --> 00:26:07,506 to the server via a Get. 694 00:26:07,816 --> 00:26:10,796 The second line, Send, actually sends the request. 695 00:26:11,296 --> 00:26:11,916 And that's it. 696 00:26:11,916 --> 00:26:13,916 And it's null because all of the data 697 00:26:14,316 --> 00:26:16,006 to this request is embodied where? 698 00:26:19,936 --> 00:26:20,216 >> In the letter. 699 00:26:20,276 --> 00:26:22,486 >> In the -- well, in the URL specifically, 700 00:26:22,486 --> 00:26:23,696 because we have the question mark. 701 00:26:23,696 --> 00:26:26,216 Because we're using Get we don't need to send additional data. 702 00:26:26,216 --> 00:26:28,686 So to be clear, if we were using Post, 703 00:26:28,956 --> 00:26:31,386 the means by which you send post data via Ajax, 704 00:26:31,646 --> 00:26:34,096 is to actually pass in an argument to the Send function 705 00:26:34,386 --> 00:26:35,826 which we are not doing in this case. 706 00:26:35,986 --> 00:26:37,236 Just Get suffices. 707 00:26:37,966 --> 00:26:38,266 All right. 708 00:26:38,596 --> 00:26:40,476 So that's it. 709 00:26:40,476 --> 00:26:41,226 We send it. 710 00:26:41,666 --> 00:26:44,036 But nowhere is there code apparently 711 00:26:44,156 --> 00:26:46,066 that actually handles the server's response. 712 00:26:46,066 --> 00:26:47,376 Recall that in our picture, 713 00:26:47,376 --> 00:26:50,856 Step Five was client gets back a response from the server. 714 00:26:51,146 --> 00:26:53,956 And it has to create some HTML or CSS 715 00:26:53,956 --> 00:26:55,726 or in this case a JavaScript alert out of it. 716 00:26:56,316 --> 00:26:59,016 So where can we find, even though we've not seen it, 717 00:27:00,006 --> 00:27:01,856 the JavaScript code that's going 718 00:27:01,856 --> 00:27:04,246 to actually handle the server's response? 719 00:27:04,856 --> 00:27:09,786 What's that function called do you think? 720 00:27:09,946 --> 00:27:10,226 Axle? 721 00:27:10,576 --> 00:27:12,086 >> Maybe request headers. 722 00:27:12,566 --> 00:27:13,156 >> Request header. 723 00:27:13,156 --> 00:27:15,336 Okay, no. This would be a function I wrote, 724 00:27:15,416 --> 00:27:16,656 not that comes with the object. 725 00:27:16,656 --> 00:27:17,436 >> Oh, okay. 726 00:27:18,316 --> 00:27:19,496 Handle response? 727 00:27:19,806 --> 00:27:21,476 >> Okay. How about handler? 728 00:27:21,476 --> 00:27:21,856 [ Inaudible Speaker ] 729 00:27:21,856 --> 00:27:23,736 So in this case it's purely up to me. 730 00:27:23,926 --> 00:27:26,046 And so we finally have an opportunity to spell out what 731 00:27:26,046 --> 00:27:27,176 on ready state change is. 732 00:27:27,176 --> 00:27:27,696 So this, too. 733 00:27:27,696 --> 00:27:29,936 It's sort of an annoyingly long-named property, 734 00:27:30,236 --> 00:27:31,236 but it does exactly that. 735 00:27:31,676 --> 00:27:36,076 Anytime this xhr object changes state, zero to one, 736 00:27:36,076 --> 00:27:37,186 one to two, one to three. 737 00:27:37,186 --> 00:27:37,486 I'm sorry. 738 00:27:37,716 --> 00:27:40,316 Zero to one, one to two, two to three, three to four -- 739 00:27:40,826 --> 00:27:42,896 that function is going to get called. 740 00:27:43,176 --> 00:27:43,886 What function? 741 00:27:43,886 --> 00:27:48,116 Well, xhr.onreadystatechange equals handler is telling it 742 00:27:48,816 --> 00:27:51,356 to call a function that's apparently called handler. 743 00:27:51,666 --> 00:27:52,676 And, again, this is a bit 744 00:27:52,676 --> 00:27:54,656 of a tricky question seen out of context. 745 00:27:54,656 --> 00:27:56,046 But sure enough, if I scroll down, 746 00:27:56,396 --> 00:27:57,566 there's my handler function. 747 00:27:58,026 --> 00:28:00,736 So, in other words, everytime this object changes state, 748 00:28:00,966 --> 00:28:02,886 the following code is going to get executed. 749 00:28:03,296 --> 00:28:05,836 If xhr.readystate equals equals four 750 00:28:06,826 --> 00:28:10,406 and xhrstatus equals equals 200, what do you want to do? 751 00:28:10,536 --> 00:28:11,656 Well, there's our magic. 752 00:28:11,656 --> 00:28:14,006 Alert xhr.responsetext. 753 00:28:14,596 --> 00:28:16,876 Otherwise we yell at the user with an error. 754 00:28:16,876 --> 00:28:19,276 But that didn't happen when we played just a moment ago. 755 00:28:19,806 --> 00:28:22,286 So, to be clear, why am I checking for readyState 4? 756 00:28:22,286 --> 00:28:23,966 What does that mean? 757 00:28:23,966 --> 00:28:24,066 Yeah. 758 00:28:24,066 --> 00:28:28,086 >> That means that the data has been received -- 759 00:28:28,086 --> 00:28:28,176 >> Good. 760 00:28:28,176 --> 00:28:28,516 >> -- by them. 761 00:28:28,516 --> 00:28:31,076 >> So that is the final state in an Ajax request. 762 00:28:31,076 --> 00:28:32,956 It's really the only one we care about. 763 00:28:33,286 --> 00:28:35,656 In fact, even though this function will get called 764 00:28:35,846 --> 00:28:38,986 for readyState zero to one, one to two, two to three, 765 00:28:38,986 --> 00:28:41,916 the only one we're going to care about is when it becomes 4. 766 00:28:42,116 --> 00:28:44,466 Otherwise that if condition won't even evaluate to true 767 00:28:44,466 --> 00:28:45,636 in all those other cases. 768 00:28:45,906 --> 00:28:47,786 So if it's indeed in State 4, 769 00:28:47,786 --> 00:28:50,196 which is that data has been received and is ready 770 00:28:50,196 --> 00:28:53,016 to be parsed, then we check, wait a minute, let's make sure 771 00:28:53,016 --> 00:28:55,086 that not only we got a response from the server 772 00:28:55,276 --> 00:28:58,586 but it was a okay response, a 200 response, and not a 404 773 00:28:58,586 --> 00:29:00,006 or 401 or something else. 774 00:29:00,436 --> 00:29:02,616 And if that's the case, then we can trust 775 00:29:02,746 --> 00:29:04,416 that in the response text property 776 00:29:04,416 --> 00:29:07,946 of this object is what the server sent back. 777 00:29:08,876 --> 00:29:09,886 So that's it. 778 00:29:10,326 --> 00:29:12,286 To recap, we click Submit on the form. 779 00:29:12,456 --> 00:29:14,506 Our on submit handler get invoked 780 00:29:14,506 --> 00:29:16,196 which calls our quote function. 781 00:29:16,436 --> 00:29:20,536 The quote function, it creates this XML HttpRequest object. 782 00:29:20,956 --> 00:29:23,836 It then creates this URL dynamically 783 00:29:24,086 --> 00:29:25,256 to create a Get request 784 00:29:25,256 --> 00:29:27,636 with question mark symbol equals GOOG, in this case. 785 00:29:28,076 --> 00:29:29,356 It opens a connection to the server. 786 00:29:29,356 --> 00:29:30,166 Sends the request. 787 00:29:30,476 --> 00:29:33,486 And then finally the handler function gets called and as soon 788 00:29:33,486 --> 00:29:36,416 as the state is 4 and the response is 200, voila. 789 00:29:36,616 --> 00:29:38,706 We have our Ajax response. 790 00:29:39,526 --> 00:29:41,136 And then we can play this game all over again 791 00:29:41,136 --> 00:29:42,376 by just submitting the form again 792 00:29:42,376 --> 00:29:43,786 with something besides Goog. 793 00:29:44,216 --> 00:29:47,696 So, in fact, if we go back to our example and into Chrome 794 00:29:48,316 --> 00:29:51,416 and type in, let's say, MSFT, get quote. 795 00:29:51,646 --> 00:29:53,176 We now have Microsoft's stock price, 796 00:29:53,176 --> 00:29:55,466 which is $29 give or take. 797 00:29:56,326 --> 00:29:59,486 As an aside, notice that even though we tend to think 798 00:29:59,486 --> 00:30:01,236 in dollars and cents, as you've probably noticed 799 00:30:01,236 --> 00:30:04,446 for Project One, Yahoo Finance does return slightly longer 800 00:30:04,446 --> 00:30:07,596 prices to the hundredths place or thousandths place or beyond. 801 00:30:08,046 --> 00:30:09,196 So do keep that in mind 802 00:30:09,196 --> 00:30:12,276 when storing prices and costs and such. 803 00:30:12,856 --> 00:30:13,296 All right. 804 00:30:13,516 --> 00:30:16,886 So the file we haven't looked at is Quote1.php. 805 00:30:16,886 --> 00:30:19,416 It turns out this is pretty simple and pretty much stolen 806 00:30:19,416 --> 00:30:23,926 from last week whereby I need to write a little program here 807 00:30:24,106 --> 00:30:26,916 that gets the stock price from Yahoo somehow. 808 00:30:26,916 --> 00:30:27,996 So how do I do that? 809 00:30:28,256 --> 00:30:30,936 Well, I use fopen and I use the same URL 810 00:30:30,936 --> 00:30:32,866 that you're probably using in Project One 811 00:30:32,926 --> 00:30:34,256 that we played with last week. 812 00:30:34,526 --> 00:30:37,486 I'm checking if the handle is not equal to false in this case. 813 00:30:37,776 --> 00:30:39,676 As an aside, if you've seen me write it in lower case 814 00:30:39,676 --> 00:30:43,206 in the past, php unfortunately is case insensitive sometimes, 815 00:30:43,246 --> 00:30:45,796 so false in capitals is the same as false in lower case. 816 00:30:45,796 --> 00:30:48,246 Just be consistent within your files. 817 00:30:48,366 --> 00:30:50,796 Data equals fgetcsvhandle. 818 00:30:50,796 --> 00:30:53,546 What does that do in English when you call fgetcsv 819 00:30:53,546 --> 00:30:54,816 on an open file handle? 820 00:30:54,816 --> 00:30:55,096 Axle. 821 00:30:55,856 --> 00:30:57,956 >> I think it parses the csv. 822 00:30:58,106 --> 00:31:00,436 >> Good. It parses the first row of the csv 823 00:31:00,436 --> 00:31:02,826 and it returns to what? 824 00:31:04,176 --> 00:31:06,276 This should be familiar from Project One. 825 00:31:06,556 --> 00:31:07,316 It returns an array 826 00:31:07,706 --> 00:31:09,406 where bracket zero is the first column, 827 00:31:09,406 --> 00:31:11,496 bracket one is the second, and so forth. 828 00:31:11,766 --> 00:31:13,266 So what am I checking for here? 829 00:31:13,386 --> 00:31:14,656 I just have a little sanity check. 830 00:31:14,656 --> 00:31:16,856 If the row is not equal to false; 831 00:31:16,916 --> 00:31:19,306 that is if fgetcsv returned a natural row 832 00:31:19,676 --> 00:31:22,156 and the first element is not applicable -- 833 00:31:22,216 --> 00:31:27,406 rather is not -- sorry. 834 00:31:27,406 --> 00:31:30,246 [Inaudible] and data is there equals equals NA. 835 00:31:34,236 --> 00:31:36,116 Oh, that was incorrect logic. 836 00:31:36,386 --> 00:31:37,806 Right idea, wrong implementation. 837 00:31:37,806 --> 00:31:43,306 So you can check for NA if -- NA is among the values returned 838 00:31:43,306 --> 00:31:44,846 when you've looked up a bogus symbol. 839 00:31:44,996 --> 00:31:46,876 I did not mean to check here for NA. 840 00:31:46,876 --> 00:31:48,706 I meant to check here for not NA. 841 00:31:48,976 --> 00:31:52,256 So it turns out that the csv file is always putting NA 842 00:31:52,326 --> 00:31:53,986 in bracket zero, which is why this is working. 843 00:31:54,106 --> 00:31:55,936 So, in short, ignore this little error checking. 844 00:31:55,936 --> 00:31:58,296 I goofed slightly and I'll fix it before I re-upload it 845 00:31:58,296 --> 00:31:58,806 to the server. 846 00:31:58,806 --> 00:32:00,396 But the point ultimately is 847 00:32:00,396 --> 00:32:03,556 that we are using this PHP script to query Yahoo. 848 00:32:03,746 --> 00:32:04,416 We get back a csv. 849 00:32:04,416 --> 00:32:06,046 We parse the first row. 850 00:32:06,046 --> 00:32:06,976 We grab the stock price, 851 00:32:06,976 --> 00:32:08,826 much like you're presumably doing for Project One. 852 00:32:08,826 --> 00:32:10,846 And then what are we doing once we have that stock price? 853 00:32:12,006 --> 00:32:12,766 Just printing it out. 854 00:32:13,386 --> 00:32:18,796 So all quote1.php is doing is spitting out some raw text. 855 00:32:18,796 --> 00:32:19,906 And we can actually see that. 856 00:32:19,906 --> 00:32:24,676 Let me go to the appliance and go not to Ajax1.html, 857 00:32:24,976 --> 00:32:31,696 but go to quote1.php question mark symbol equals msft enter. 858 00:32:31,986 --> 00:32:33,936 And indeed, what I get back in the body 859 00:32:33,936 --> 00:32:35,986 of my response is just the price. 860 00:32:36,026 --> 00:32:38,486 If I view the page source, that's all that's there. 861 00:32:38,796 --> 00:32:40,146 Nothing else. 862 00:32:40,756 --> 00:32:44,506 So, in short, our HTML file talks to the PHP file 863 00:32:44,506 --> 00:32:47,016 which in turn returns a response 864 00:32:47,116 --> 00:32:50,516 that gets embedded into the former. 865 00:32:51,026 --> 00:32:52,506 Any questions? 866 00:32:52,506 --> 00:32:55,326 >> I have a question. 867 00:32:55,446 --> 00:32:55,536 >> Yeah. 868 00:32:55,966 --> 00:32:59,866 >> So for the project we have the flexibility 869 00:32:59,866 --> 00:33:07,206 to do it just the PHP way and kind of go from one, 870 00:33:09,216 --> 00:33:10,966 submitting the form -- 871 00:33:11,296 --> 00:33:18,476 the symbol on one form and getting it on the other? 872 00:33:18,476 --> 00:33:19,756 Does that get CSV? 873 00:33:19,756 --> 00:33:20,116 >> Yes. 874 00:33:20,376 --> 00:33:22,836 >> [Inaudible] or is that the requirements 875 00:33:22,836 --> 00:33:23,836 of doing the Ajax -- 876 00:33:25,046 --> 00:33:25,276 >> Correct. 877 00:33:25,886 --> 00:33:29,116 No Ajax requirements for Project One. 878 00:33:29,156 --> 00:33:31,586 It is totally acceptable and expected 879 00:33:31,586 --> 00:33:34,596 to do it the last-week way 880 00:33:34,876 --> 00:33:37,046 where you moved the user to another page. 881 00:33:37,046 --> 00:33:37,946 Correct. All right. 882 00:33:37,946 --> 00:33:39,866 So, what's not so good about this? 883 00:33:39,866 --> 00:33:45,446 Well, this is hardly as sexy as Facebook or Google 884 00:33:45,446 --> 00:33:47,776 or really any site that actually uses Ajax 885 00:33:47,776 --> 00:33:51,376 to create a more dynamic interface. 886 00:33:51,576 --> 00:33:55,516 All I'm doing is calling this annoying JavaScript alert 887 00:33:55,516 --> 00:34:00,976 function, which is hardly what I'd call compelling. 888 00:34:01,626 --> 00:34:07,636 So how can we take this one stop closer to something 889 00:34:07,636 --> 00:34:09,736 that we're more familiar with? 890 00:34:09,736 --> 00:34:14,786 Well, let me open up Ajax 2.html, and this time scroll 891 00:34:14,786 --> 00:34:17,616 down to the HTML just to see the following. 892 00:34:17,616 --> 00:34:19,576 I've added something to this page's HTML 893 00:34:19,576 --> 00:34:21,216 which is what apparently? 894 00:34:21,216 --> 00:34:21,566 Axle. 895 00:34:21,566 --> 00:34:23,046 >> A price input. 896 00:34:23,046 --> 00:34:23,776 >> A price input. 897 00:34:23,776 --> 00:34:26,896 And notice I got rid of the name attributes altogether 898 00:34:26,896 --> 00:34:30,406 because I'm not actually submitting this form 899 00:34:30,406 --> 00:34:32,276 to the server. 900 00:34:32,276 --> 00:34:34,656 Really, all I need is a unique identifier. 901 00:34:34,766 --> 00:34:38,686 And for that an ID is, by design, meant to be unique. 902 00:34:38,686 --> 00:34:41,586 So I have an ID of symbol and an ID of price, 903 00:34:41,586 --> 00:34:45,176 which means programmatically in JavaScript I should be able 904 00:34:45,176 --> 00:34:49,486 to access each of these elements directly using document.element 905 00:34:49,486 --> 00:34:50,826 by ID, just like I did before. 906 00:34:50,826 --> 00:34:53,526 So this is kind of a step towards something better. 907 00:34:54,046 --> 00:34:55,546 It's not as good. 908 00:34:55,996 --> 00:35:00,486 But if I want to request from the server a stock price 909 00:35:00,536 --> 00:35:04,556 and then show it to the user, my goal now is get rid 910 00:35:04,706 --> 00:35:07,136 of the stupid alert function. 911 00:35:07,136 --> 00:35:10,476 Instead I want to embed the result in a webpage. 912 00:35:10,476 --> 00:35:14,476 Now one way I know of doing this is if I have a blinking prompt 913 00:35:14,476 --> 00:35:17,726 for instance in a field called Price, 914 00:35:17,726 --> 00:35:21,456 maybe I can use JavaScript to update the value 915 00:35:21,456 --> 00:35:22,926 of that blank input field. 916 00:35:22,926 --> 00:35:26,606 So, in other words, if I go to my browser and I type 917 00:35:26,606 --> 00:35:29,326 in for Version 2, the same symbol like GOOG, 918 00:35:29,326 --> 00:35:33,856 notice now that the response is not going to come back 919 00:35:33,856 --> 00:35:38,266 as an alert, and notice there's nothing in here right now. 920 00:35:38,266 --> 00:35:42,896 But I click Get Quote and now it gets populated there. 921 00:35:42,936 --> 00:35:45,976 Now this isn't the best approach because I can delete that 922 00:35:45,976 --> 00:35:50,306 and that doesn't feel quite right that I should be able 923 00:35:50,306 --> 00:35:51,556 to delete the server's response. 924 00:35:51,556 --> 00:35:58,276 It feels a little weird that I can type whatever I want 925 00:35:58,276 --> 00:36:00,696 in there only to have it disappear. 926 00:36:00,696 --> 00:36:03,976 But at least it's better, I would argue, 927 00:36:03,976 --> 00:36:06,056 than the alert function. 928 00:36:06,056 --> 00:36:06,866 So how are we doing this? 929 00:36:06,866 --> 00:36:11,186 Well, you can perhaps guess what the code's got to look like. 930 00:36:11,186 --> 00:36:13,296 But the top of this file is identical. 931 00:36:13,296 --> 00:36:16,696 My quote function, and we won't go through it line by line 932 00:36:16,696 --> 00:36:21,066 because it's indeed identical, is the same as before. 933 00:36:21,066 --> 00:36:25,386 So the handler function is apparently what's changed 934 00:36:25,386 --> 00:36:26,996 and how is it changed? 935 00:36:26,996 --> 00:36:29,106 Well, notice my handler function, 936 00:36:29,106 --> 00:36:37,186 in addition to checking for readyState 4 and status 200, 937 00:36:37,256 --> 00:36:41,356 this time it's doing document.getelementby 938 00:36:41,356 --> 00:36:44,906 IDofprice.value equals -- and it's cut off at the moment. 939 00:36:44,906 --> 00:36:46,026 But what must be to the right? 940 00:36:46,256 --> 00:36:47,936 What's the rest of this expression? 941 00:36:47,936 --> 00:36:49,326 >> xhr.responseText. 942 00:36:49,326 --> 00:36:50,096 >> Exactly. 943 00:36:50,096 --> 00:36:52,106 xhr.responseText which is the price that we got back 944 00:36:52,436 --> 00:36:55,476 from the server which was spit out by quote1.php. 945 00:36:55,476 --> 00:36:56,256 So, again, not perfect. 946 00:36:56,256 --> 00:36:57,546 But I'm kind of learning as I go here. 947 00:36:57,546 --> 00:37:00,326 And I know that I can access the current value 948 00:37:00,326 --> 00:37:02,966 of an input via this dot value property. 949 00:37:02,966 --> 00:37:04,946 So it stands to reason that I can change the value 950 00:37:04,946 --> 00:37:08,446 of an input element by just using code like this. 951 00:37:08,556 --> 00:37:11,476 So this is not good though for a couple 952 00:37:11,476 --> 00:37:13,646 of reasons which we've seen. 953 00:37:13,646 --> 00:37:16,196 How can we do a little better? 954 00:37:16,506 --> 00:37:20,906 Well, let me open up the third variant of this. 955 00:37:20,906 --> 00:37:23,136 Scroll down to my HTML. 956 00:37:23,176 --> 00:37:26,036 And what's fundamentally different here? 957 00:37:26,036 --> 00:37:26,566 Louis? 958 00:37:26,566 --> 00:37:27,666 >> It's in a span instead of a input? 959 00:37:27,666 --> 00:37:31,276 >> Yeah. So this time I'm using a span tag instead of an input. 960 00:37:31,276 --> 00:37:33,456 A span tag is an inline HTML element. 961 00:37:34,066 --> 00:37:37,076 It doesn't create any visual effect unless you're using CSS 962 00:37:37,076 --> 00:37:38,646 to stylize it somehow. 963 00:37:38,646 --> 00:37:40,316 But it's a way of saying this chunk 964 00:37:40,316 --> 00:37:43,146 of HTML should be uniquely identifiable by an ID of price. 965 00:37:43,146 --> 00:37:44,466 In other words, if I didn't have that ID, 966 00:37:44,466 --> 00:37:47,586 it wouldn't be as useful. 967 00:37:47,686 --> 00:37:50,336 I could find this element but the fact 968 00:37:50,336 --> 00:37:53,426 that I'm giving the span an ID means it's going to be 969 00:37:53,426 --> 00:37:55,916 so much easier in JavaScript code to dive right 970 00:37:55,916 --> 00:38:00,966 into that part of the DOM and mutate its value. 971 00:38:00,966 --> 00:38:04,376 But we're going to have to do it a little differently. 972 00:38:04,376 --> 00:38:07,896 And just to be super clear as to what's happening, 973 00:38:07,896 --> 00:38:11,756 notice that that span currently has some HTML in it. 974 00:38:11,856 --> 00:38:14,086 It has bold-faced words, "to be determined." 975 00:38:14,086 --> 00:38:16,956 So what does this look like on the webpage? 976 00:38:17,346 --> 00:38:19,286 Well, hopefully, I'll see in bold 977 00:38:19,656 --> 00:38:21,476 "to be determined" in Version 3. 978 00:38:21,696 --> 00:38:22,876 So let's take a look. 979 00:38:22,876 --> 00:38:24,866 And, indeed, there it is. 980 00:38:25,226 --> 00:38:27,136 Couldn't be more explicit. 981 00:38:27,136 --> 00:38:28,196 This is not editable. 982 00:38:28,196 --> 00:38:30,426 Notice I can hit the keyboard all I want. 983 00:38:30,426 --> 00:38:33,446 It's not changing because it's just a span tag as we've seen. 984 00:38:33,446 --> 00:38:36,656 But now I type in GOOG and hit "Get Quote." 985 00:38:36,746 --> 00:38:41,556 And now we have something that's a little closer to Facebook 986 00:38:41,556 --> 00:38:46,826 and Google and these websites that actually update the website 987 00:38:46,826 --> 00:38:51,066 in line without using these hacks 988 00:38:51,306 --> 00:38:56,226 like an alert box or a text field. 989 00:38:56,316 --> 00:38:58,876 So what must be happening here? 990 00:38:58,876 --> 00:39:03,796 Well, let's scroll up to my handler function here, 991 00:39:03,796 --> 00:39:05,956 and notice the one difference now is 992 00:39:05,956 --> 00:39:07,676 that I'm still getting the element by ID of price. 993 00:39:07,676 --> 00:39:08,986 But what property am I mutating? 994 00:39:08,986 --> 00:39:09,256 Axle. 995 00:39:09,256 --> 00:39:10,196 >> InnerHTML? 996 00:39:10,196 --> 00:39:13,256 >> Yeah. So in this case it's a little different. 997 00:39:13,256 --> 00:39:16,406 Whereas, an input element has a value property 998 00:39:16,406 --> 00:39:19,806 which is literally its value, in HTML elements like a span 999 00:39:19,836 --> 00:39:20,616 or a div or a bunch of others, 1000 00:39:20,646 --> 00:39:21,516 instead has an InnerHTML property. 1001 00:39:21,546 --> 00:39:22,836 This isn't necessarily the best way of doing this, 1002 00:39:22,866 --> 00:39:24,246 but it does work and it's the quickest and simplest. 1003 00:39:24,276 --> 00:39:25,176 So we'll start with this approach here. 1004 00:39:25,206 --> 00:39:25,986 So InnerHTML is exactly that. 1005 00:39:26,016 --> 00:39:26,706 I can cram into the child -- 1006 00:39:26,736 --> 00:39:28,266 I can cram into the price span whatever I put to the right 1007 00:39:28,296 --> 00:39:28,866 of the equal sign there. 1008 00:39:28,896 --> 00:39:30,126 And in this case, again, it's xhr.responseText. 1009 00:39:30,156 --> 00:39:30,936 Now I did lose the bold facing, 1010 00:39:30,966 --> 00:39:32,076 so let's actually see this in action again. 1011 00:39:32,106 --> 00:39:32,976 If I go back to my browser, reload. 1012 00:39:33,006 --> 00:39:34,266 Let me go ahead and open up Chrome's Inspector. 1013 00:39:34,296 --> 00:39:35,256 Whoops. Open up Chrome's Inspector here. 1014 00:39:35,286 --> 00:39:35,526 Oh, my god. 1015 00:39:35,556 --> 00:39:36,066 Why is it doing this? 1016 00:39:36,096 --> 00:39:36,336 Chew-chew-chew. 1017 00:39:36,366 --> 00:39:36,726 We want tools. 1018 00:39:36,756 --> 00:39:37,266 Okay. Developer tools. 1019 00:39:37,296 --> 00:39:38,316 Okay. So in this window let me go ahead 1020 00:39:38,346 --> 00:39:39,396 and open the form and go down to price. 1021 00:39:39,426 --> 00:39:39,906 And there's the span. 1022 00:39:39,936 --> 00:39:41,316 So in the bottom left notice that's what our HTML looks 1023 00:39:41,346 --> 00:39:41,826 like at the moment. 1024 00:39:41,856 --> 00:39:43,356 As soon as I type in GOOG and hit Get Quote, watch the HTML 1025 00:39:43,386 --> 00:39:44,946 on the bottom left-hand corner even though it's a little small. 1026 00:39:44,976 --> 00:39:45,426 Okay. So it changed. 1027 00:39:45,456 --> 00:39:47,196 And it changed to this, literally 616.82. 1028 00:39:47,226 --> 00:39:47,706 And what went away? 1029 00:39:47,736 --> 00:39:49,266 The bold face tags because I told the inner HTML of the span 1030 00:39:49,296 --> 00:39:50,106 to take on xhr.Response text. 1031 00:39:50,136 --> 00:39:51,636 So suppose I wanted to cram those bold tags back in there. 1032 00:39:51,666 --> 00:39:52,536 Well, I can do this in a few ways. 1033 00:39:52,566 --> 00:39:54,156 This is probably not the best way, but I could do it this way. 1034 00:39:54,186 --> 00:39:54,876 If I really want those tags 1035 00:39:54,906 --> 00:39:55,926 in there I could do something quite literal 1036 00:39:55,956 --> 00:39:57,636 like open bracket B plus, and then I can do close B over here. 1037 00:39:57,666 --> 00:39:57,936 Close -- whoops. 1038 00:39:57,966 --> 00:39:58,296 Close bracket. 1039 00:39:58,326 --> 00:39:58,536 Save this. 1040 00:39:58,566 --> 00:39:58,986 Go back over here. 1041 00:39:59,016 --> 00:39:59,706 Reload. And now type in GOOG. 1042 00:39:59,736 --> 00:39:59,976 Get Quote. 1043 00:40:00,046 --> 00:40:01,106 So now it's still bold. 1044 00:40:01,106 --> 00:40:03,236 And if we look at the HTML down here, 1045 00:40:03,236 --> 00:40:04,826 notice I get my bold tags back. 1046 00:40:05,126 --> 00:40:07,556 But there are better ways of doing this, right? 1047 00:40:07,556 --> 00:40:09,996 What might be a cleaner way rather 1048 00:40:09,996 --> 00:40:12,276 than reconstructing these bold tags again and again? 1049 00:40:12,276 --> 00:40:12,406 Isaac. 1050 00:40:13,156 --> 00:40:16,476 >> You could put the bold tags around the span. 1051 00:40:16,476 --> 00:40:18,666 >> Okay. So one approach, put the bold tags around the span. 1052 00:40:18,696 --> 00:40:20,266 Another approach? 1053 00:40:20,556 --> 00:40:24,666 >> Give the bold tags the ID price and update the -- 1054 00:40:24,906 --> 00:40:25,456 >> Good. 1055 00:40:25,456 --> 00:40:25,696 [ Inaudible Speaker ] 1056 00:40:25,696 --> 00:40:27,116 So there's nothing stopping me 1057 00:40:27,166 --> 00:40:30,786 from actually giving the bold tag an ID of price and homing 1058 00:40:30,786 --> 00:40:33,776 in on its inner HTML instead. 1059 00:40:33,776 --> 00:40:35,976 And, frankly, that would pretty much obviate the need 1060 00:40:35,976 --> 00:40:37,686 for the span tag whatsoever. 1061 00:40:37,686 --> 00:40:39,526 What's another approach to preserve the boldness? 1062 00:40:43,156 --> 00:40:45,956 Frankly b-tags are kind of frowned upon these days 1063 00:40:45,956 --> 00:40:48,196 because you're comingling data with aesthetics. 1064 00:40:48,786 --> 00:40:50,796 >> I mean, you could just do a JavaScript 1065 00:40:50,946 --> 00:40:54,196 that sets all the text of this current class 1066 00:40:54,196 --> 00:40:56,216 or an ID of 2 bold. 1067 00:40:56,526 --> 00:40:58,196 >> Okay. So we could JavaScript 1068 00:40:58,196 --> 00:41:02,116 to set some class to make this bold. 1069 00:41:02,116 --> 00:41:02,966 But it would be even simpler. 1070 00:41:02,966 --> 00:41:03,966 We don't need JavaScript for this. 1071 00:41:03,966 --> 00:41:05,066 What do we need? 1072 00:41:05,656 --> 00:41:07,916 How do we make this whole element bold not matter what its 1073 00:41:07,916 --> 00:41:08,506 contents are? 1074 00:41:08,926 --> 00:41:09,266 Jack? 1075 00:41:09,466 --> 00:41:10,806 >> You could put the bold type outside the span? 1076 00:41:10,806 --> 00:41:12,376 >> Ah, that was Isaac's idea. 1077 00:41:12,376 --> 00:41:13,006 >> Oh, sorry. 1078 00:41:13,006 --> 00:41:16,296 >> Workable, but we can do this a little more cleanly. 1079 00:41:16,816 --> 00:41:16,986 Axle? 1080 00:41:17,706 --> 00:41:20,106 >> It feels like we're just guessing now. 1081 00:41:20,316 --> 00:41:22,716 But style inside the -- 1082 00:41:23,376 --> 00:41:23,586 >> Good. 1083 00:41:23,586 --> 00:41:26,006 >> -- inside the span and then maybe you can do a 1084 00:41:26,136 --> 00:41:26,226 CSS [inaudible]. 1085 00:41:26,436 --> 00:41:27,226 >> Right. We just CSS. 1086 00:41:27,366 --> 00:41:30,126 So the JavaScript idea would work but it's totally overkill. 1087 00:41:30,126 --> 00:41:32,166 We can just put a style attribute there. 1088 00:41:32,386 --> 00:41:34,886 Style equals font weight bold. 1089 00:41:35,106 --> 00:41:37,956 We could put this into a separate CSS file elsewhere. 1090 00:41:38,186 --> 00:41:40,256 In other words, we can do the stylization 1091 00:41:40,256 --> 00:41:41,706 without resorting to the bold tag. 1092 00:41:41,706 --> 00:41:44,766 So this is really just here for clarity, but we can factor 1093 00:41:44,766 --> 00:41:48,246 that out and put our stylization is CSS as usual. 1094 00:41:48,246 --> 00:41:49,636 All right. 1095 00:41:49,686 --> 00:41:51,636 So all possibilities. 1096 00:41:51,916 --> 00:41:53,366 What more can we now do? 1097 00:41:53,366 --> 00:41:57,246 Well, let me go ahead and open up a fourth variance of this, 1098 00:41:57,246 --> 00:42:00,226 and this going to look uglier so it's going 1099 00:42:00,226 --> 00:42:01,926 to be a step back for just a moment. 1100 00:42:02,256 --> 00:42:03,266 Where does it appear? 1101 00:42:03,266 --> 00:42:07,926 I'm going to be spitting out the server's response of this time. 1102 00:42:08,136 --> 00:42:08,656 Yeah, Louis. 1103 00:42:08,726 --> 00:42:10,716 >> In a text area? 1104 00:42:10,716 --> 00:42:12,936 >> In a text area which is perhaps even uglier 1105 00:42:12,936 --> 00:42:14,516 than the input field we saw before. 1106 00:42:14,726 --> 00:42:16,796 But it's compelling for the moment because now I'm going 1107 00:42:16,796 --> 00:42:19,256 to start experimenting with returning multiple lines 1108 00:42:19,256 --> 00:42:20,486 of output from the server. 1109 00:42:20,486 --> 00:42:22,186 In fact, I don't want just the price now. 1110 00:42:22,186 --> 00:42:23,526 I want this to be a little sexier. 1111 00:42:23,526 --> 00:42:26,316 I want the day's high and the day's low in addition 1112 00:42:26,356 --> 00:42:27,626 to the most recent price. 1113 00:42:27,956 --> 00:42:29,856 So I have three values that I want to come back, 1114 00:42:29,856 --> 00:42:31,826 and I need a text area for the moment just 1115 00:42:31,826 --> 00:42:33,996 so I can see everything coming back from the server. 1116 00:42:34,266 --> 00:42:35,866 But notice I pruned the form further. 1117 00:42:35,866 --> 00:42:38,296 Notice that my form no longer has a method attribute. 1118 00:42:38,466 --> 00:42:40,266 It no longer has an action attribute. 1119 00:42:41,266 --> 00:42:44,356 Why is that okay? 1120 00:42:44,586 --> 00:42:44,866 Axle. 1121 00:42:45,196 --> 00:42:46,136 >> You're never using them. 1122 00:42:46,296 --> 00:42:46,716 >> Exactly. 1123 00:42:46,716 --> 00:42:48,036 I was never using them anyway, 1124 00:42:48,036 --> 00:42:51,006 even if I might have mentioned quote1.dotphp is the action 1125 00:42:51,006 --> 00:42:52,046 in some previous version. 1126 00:42:52,416 --> 00:42:55,236 I don't need it anyway because all I'm doing is intercepting 1127 00:42:55,236 --> 00:42:59,556 this form submission and then I'm doing that process 1128 00:42:59,556 --> 00:43:03,196 of the HTTP request myself in JavaScript code. 1129 00:43:03,196 --> 00:43:04,496 So I've pruned this a bit further. 1130 00:43:04,776 --> 00:43:06,906 Now let's take a look at the end results here. 1131 00:43:07,616 --> 00:43:10,756 Let me go back to the web browser. 1132 00:43:10,756 --> 00:43:12,596 Let me go to version 4 here. 1133 00:43:12,596 --> 00:43:14,116 Enter. This is pretty hideous. 1134 00:43:14,796 --> 00:43:17,456 But it feels like I now have room for more stuff 1135 00:43:17,456 --> 00:43:18,636 to come back from the server. 1136 00:43:18,786 --> 00:43:19,996 There's one other difference here. 1137 00:43:19,996 --> 00:43:21,766 If I scroll up to my quote function, 1138 00:43:21,986 --> 00:43:29,436 what URL am I constructing this time? 1139 00:43:29,436 --> 00:43:29,656 [ Inaudible Speaker ] 1140 00:43:29,656 --> 00:43:30,146 Yeah? 1141 00:43:30,146 --> 00:43:32,926 >> Quote2.php.stepquote1? 1142 00:43:32,926 --> 00:43:33,326 >> Exactly. 1143 00:43:33,326 --> 00:43:37,136 And now I'm using quote2.php which is almost the same. 1144 00:43:37,676 --> 00:43:40,066 But what is its output apparently going to look like? 1145 00:43:40,236 --> 00:43:40,306 Yeah. 1146 00:43:40,766 --> 00:43:40,896 >> Who? 1147 00:43:42,836 --> 00:43:43,006 >> Axle. 1148 00:43:43,096 --> 00:43:48,096 >> It prints spell Price, and then a new line, and the High, 1149 00:43:48,096 --> 00:43:51,886 and then a new line, and then Low, then nothing. 1150 00:43:52,106 --> 00:43:52,556 >> Exactly. 1151 00:43:52,556 --> 00:43:54,036 So a little hackish at the moment. 1152 00:43:54,336 --> 00:43:55,596 But this time I'm going to print 1153 00:43:55,596 --> 00:43:58,496 out three values -- Price, Colon, Number. 1154 00:43:58,776 --> 00:44:00,596 New line. High and the Low. 1155 00:44:00,666 --> 00:44:01,206 Same deal. 1156 00:44:01,546 --> 00:44:04,066 So it's not very elegant and this pretty much means 1157 00:44:04,066 --> 00:44:07,086 that I'm going to have just plop all of this text in one place, 1158 00:44:07,086 --> 00:44:08,416 the same place in the webpage. 1159 00:44:08,626 --> 00:44:10,766 I can't put the Price up here, the High over here, 1160 00:44:10,766 --> 00:44:12,246 the Low down here, or whatever. 1161 00:44:12,476 --> 00:44:15,636 Can't integrate it like into Yahoo Finance UI very well. 1162 00:44:15,826 --> 00:44:18,256 This all has to go together became I'm returning it all 1163 00:44:18,256 --> 00:44:18,616 at once. 1164 00:44:18,876 --> 00:44:20,566 But at least we'll be one step closer. 1165 00:44:20,566 --> 00:44:22,256 So let me go ahead and type in GOOG here. 1166 00:44:22,486 --> 00:44:23,486 Click Get Quote. 1167 00:44:23,486 --> 00:44:26,396 And sure enough, now I get back these values. 1168 00:44:26,706 --> 00:44:28,836 Now I could kind of hack something together, right? 1169 00:44:28,836 --> 00:44:32,996 I could use JavaScript and figure out where the colon is 1170 00:44:33,356 --> 00:44:36,666 and somehow extract the numbers that I've returned 1171 00:44:36,666 --> 00:44:38,576 so that I could put them in three different places. 1172 00:44:38,576 --> 00:44:42,386 But what would be a cleaner approach here? 1173 00:44:42,676 --> 00:44:45,056 If I want to somehow get back more than one value -- 1174 00:44:45,056 --> 00:44:46,496 I don't want Price alone. 1175 00:44:46,496 --> 00:44:48,566 I want Price and High and Low. 1176 00:44:48,976 --> 00:44:52,136 How can I go about returning something more useful 1177 00:44:52,136 --> 00:44:52,876 from the server? 1178 00:44:53,506 --> 00:44:53,806 Axle. 1179 00:44:54,036 --> 00:44:56,406 >> I don't know if this would work, but you could 1180 00:44:56,406 --> 00:44:59,646 in the PHP print an array or return an array somehow. 1181 00:44:59,646 --> 00:45:00,316 >> Okay. Good. 1182 00:45:00,316 --> 00:45:03,476 So what if we actually return not just some arbitrary random 1183 00:45:03,476 --> 00:45:06,146 like David style of new line, new line, new line. 1184 00:45:06,146 --> 00:45:08,156 Why don't we actually use something standard 1185 00:45:08,156 --> 00:45:09,006 like an array? 1186 00:45:09,356 --> 00:45:12,746 For instance could we create an array in PHP 1187 00:45:12,746 --> 00:45:15,966 and then somehow print it out maybe using Print R. 1188 00:45:15,966 --> 00:45:18,076 But that might be a little hard to parse in JavaScript. 1189 00:45:18,076 --> 00:45:19,766 But somehow return the actual object. 1190 00:45:19,966 --> 00:45:21,756 Well, I can do this pretty easily in code. 1191 00:45:21,756 --> 00:45:27,346 Let me go over here to quote2.php, and let me do this. 1192 00:45:27,546 --> 00:45:31,356 Let me go in here and let me try a suboptimal way first. 1193 00:45:31,956 --> 00:45:34,146 Let's delete these three. 1194 00:45:34,146 --> 00:45:35,246 Actually, first let's do this. 1195 00:45:35,646 --> 00:45:41,136 Let me go to quote2.php in a separate tab just for clarity. 1196 00:45:41,246 --> 00:45:45,546 So this is quote2.php question mark symbol equals -- 1197 00:45:45,626 --> 00:45:47,196 whoops -- symbol equals GOOG. 1198 00:45:47,196 --> 00:45:50,396 Enter. So that's what's coming back right now from the server. 1199 00:45:50,646 --> 00:45:52,476 Let's make it a little more machine-friendly. 1200 00:45:52,476 --> 00:45:54,216 Let me delete, delete, delete. 1201 00:45:54,446 --> 00:45:55,106 How about this? 1202 00:45:55,156 --> 00:45:58,466 Print r data, where data is the row 1203 00:45:58,466 --> 00:45:59,736 that I got back from the server. 1204 00:45:59,736 --> 00:46:00,706 Now let's reload. 1205 00:46:01,196 --> 00:46:06,006 Okay. So this is a little better but not quite perfect. 1206 00:46:06,006 --> 00:46:09,056 Why? Well, because if I'm getting back literally this 1207 00:46:09,056 --> 00:46:12,496 string of text, if this is the contents of response text, 1208 00:46:12,696 --> 00:46:16,406 how do I go about parsing this in order to extract the Price 1209 00:46:16,876 --> 00:46:18,086 and the Low and the High? 1210 00:46:18,446 --> 00:46:19,886 I have to literally parse this mess. 1211 00:46:20,066 --> 00:46:21,996 Like I need to write a JavaScript function 1212 00:46:22,236 --> 00:46:24,456 that somehow reads this thing, top to bottom, left to right, 1213 00:46:24,456 --> 00:46:25,886 figuring out what the various prices are. 1214 00:46:25,886 --> 00:46:27,416 So we need it to be a little cleaner. 1215 00:46:27,876 --> 00:46:30,636 So what would be a better way of representing an array 1216 00:46:30,796 --> 00:46:33,006 of values here, an object of values? 1217 00:46:33,386 --> 00:46:37,216 What else could we do here? 1218 00:46:39,156 --> 00:46:41,716 Well, let's do a quick little spoiler. 1219 00:46:42,006 --> 00:46:45,636 Instead of printing this, let me instead print the results 1220 00:46:45,636 --> 00:46:48,746 of calling JSon and code, a new function tonight, 1221 00:46:49,366 --> 00:46:51,856 that quite simply is going to output something 1222 00:46:51,856 --> 00:46:53,936 that looks a little more like this. 1223 00:46:54,906 --> 00:46:56,696 And what does this syntax remind you of? 1224 00:46:56,856 --> 00:46:56,923 Yeah. 1225 00:46:57,256 --> 00:47:03,266 >> It looks very much like a non-associative array. 1226 00:47:03,616 --> 00:47:04,086 >> Exactly. 1227 00:47:04,086 --> 00:47:06,636 This is a non-associative array in JavaScript. 1228 00:47:06,636 --> 00:47:08,276 It's using the square bracket notation 1229 00:47:08,276 --> 00:47:09,596 which is how you can infer as much. 1230 00:47:09,596 --> 00:47:11,366 This is one of the key features of JavaScript 1231 00:47:11,366 --> 00:47:12,306 that we looked at Wednesday. 1232 00:47:12,656 --> 00:47:16,216 Now it's not ideal in that there's no metadata 1233 00:47:16,216 --> 00:47:17,846 like Price, High, and Low. 1234 00:47:17,846 --> 00:47:20,406 I'm going to have to remember that bracket 1 in Price, 1235 00:47:20,406 --> 00:47:23,796 bracket 2 is High, I think, bracket 3 is something else. 1236 00:47:24,456 --> 00:47:26,826 There's the escaping issue here which is kind of interesting 1237 00:47:26,826 --> 00:47:29,066 in that the forward slash is apparently a potentially 1238 00:47:29,066 --> 00:47:31,756 worrisome character, but that's actually not such a big deal. 1239 00:47:31,756 --> 00:47:35,676 But here we have the beginnings of JavaScript object notation, 1240 00:47:35,676 --> 00:47:38,556 the returning from the server of something that's compatible 1241 00:47:38,556 --> 00:47:41,216 with JavaScript even though it was generated by PHP. 1242 00:47:41,216 --> 00:47:43,646 And that's going to be the power that we're going 1243 00:47:43,646 --> 00:47:46,166 to start harnessing to make the UI all the more dynamic. 1244 00:47:46,656 --> 00:47:48,096 But why don't we pause on that cliffhanger. 1245 00:47:48,096 --> 00:47:49,446 Why don't we take our five-minute break here 1246 00:47:49,446 --> 00:47:51,376 and come back with some sexier examples. 1247 00:47:52,056 --> 00:47:57,456 All right. 1248 00:47:59,566 --> 00:48:02,916 So this is pretty bad, resorting to this HTML text area. 1249 00:48:03,146 --> 00:48:05,166 So we can do one step better than this. 1250 00:48:05,166 --> 00:48:07,236 Just like we introduced the span as an alternative 1251 00:48:07,236 --> 00:48:08,236 to an input field, 1252 00:48:08,466 --> 00:48:12,176 we can instead replace this text area with, say, a div, right? 1253 00:48:12,176 --> 00:48:15,536 A div at least allows for multi-line text. 1254 00:48:16,126 --> 00:48:18,866 So not ideal yet, but at least we can go one step closer. 1255 00:48:18,866 --> 00:48:19,586 So let's try this. 1256 00:48:19,586 --> 00:48:22,886 So in version 5, I proposed to have this placeholder. 1257 00:48:22,886 --> 00:48:25,526 So, again, resorting to my ugly boldface placeholder. 1258 00:48:25,526 --> 00:48:27,406 But that's going to be overwritten in just a moment 1259 00:48:27,716 --> 00:48:30,706 because this time when I go ahead and type in G-O-O-G 1260 00:48:31,236 --> 00:48:33,586 and click Get Quote, I now get this. 1261 00:48:34,016 --> 00:48:36,996 And what's the outputted HTML look like? 1262 00:48:36,996 --> 00:48:42,446 Well, if I look at down here, notice that I have div this time 1263 00:48:42,716 --> 00:48:45,126 that simply has some br tags in the middle. 1264 00:48:45,426 --> 00:48:47,396 So how do I make -- what changes are necessary 1265 00:48:47,396 --> 00:48:48,286 to make this possible? 1266 00:48:48,286 --> 00:48:50,666 One, I need to remove the text area from my HTML 1267 00:48:50,666 --> 00:48:52,446 and replace it with what obviously? 1268 00:48:52,886 --> 00:48:55,126 >> Div with an id quote? 1269 00:48:55,406 --> 00:48:58,116 >> Good. A div with an id of quote/unquote/quote. 1270 00:48:58,116 --> 00:48:58,856 All right. 1271 00:48:58,916 --> 00:49:02,176 So, that needs to be there so I can uniquely identify this spot. 1272 00:49:02,426 --> 00:49:03,446 And what else is in here? 1273 00:49:03,446 --> 00:49:04,606 I have br tags. 1274 00:49:05,306 --> 00:49:06,946 So what else needs to change? 1275 00:49:07,596 --> 00:49:09,646 Because what was the server spitting out previously? 1276 00:49:10,646 --> 00:49:10,746 Yeah. 1277 00:49:11,166 --> 00:49:13,426 >> Well, the server was spitting out just the text 1278 00:49:13,606 --> 00:49:16,426 about anything in-between, so now we're sending it 1279 00:49:16,786 --> 00:49:22,776 with JSon instead, parsing it, and then printing the first key 1280 00:49:22,776 --> 00:49:24,626 of the array, and then a br for the second key. 1281 00:49:24,626 --> 00:49:25,206 >> Oh, good. 1282 00:49:25,206 --> 00:49:27,066 Okay. So, actually, let me take a step back. 1283 00:49:27,306 --> 00:49:29,706 So the cliffhanger of taking the JSon approach, 1284 00:49:29,706 --> 00:49:30,556 not quite there yet. 1285 00:49:31,086 --> 00:49:34,006 So, instead, consider where the quote function was before I 1286 00:49:34,006 --> 00:49:36,486 manually updated it right before the break. 1287 00:49:36,706 --> 00:49:38,456 Previously we were outputting new lines. 1288 00:49:38,516 --> 00:49:40,936 In this case we clearly need to be outputting br's. 1289 00:49:40,936 --> 00:49:45,106 But now things -- and this will be an argument in favor further 1290 00:49:45,106 --> 00:49:48,856 of using JSon because notice that this example here, 1291 00:49:48,856 --> 00:49:52,776 version 5, is using quote3.php, 1292 00:49:52,776 --> 00:49:56,636 and quote 3.php really takes this suboptimal approach 1293 00:49:56,636 --> 00:49:58,046 if spitting out br tags. 1294 00:49:58,536 --> 00:50:01,216 And this, too; now this is a very slippery slope because now, 1295 00:50:01,216 --> 00:50:03,346 not only are we spitting out on the server data, 1296 00:50:03,476 --> 00:50:04,976 we're also now spitting out mark-up. 1297 00:50:05,336 --> 00:50:07,136 So this really is not ideal. 1298 00:50:07,136 --> 00:50:08,696 Better is going to be to something 1299 00:50:08,696 --> 00:50:11,476 like a JavaScript array or maybe a JavaScript object. 1300 00:50:11,686 --> 00:50:13,836 And then we can take care of doing the stylization 1301 00:50:13,836 --> 00:50:16,666 and formatting on the server itself. 1302 00:50:17,016 --> 00:50:19,586 So let's take a look then at this 6th variant 1303 00:50:19,586 --> 00:50:21,506 where we get a little closer to that. 1304 00:50:22,156 --> 00:50:24,976 But, first, let's resolve one other detail. 1305 00:50:25,276 --> 00:50:29,886 In Ajax6.html, I again have this div placeholder. 1306 00:50:30,096 --> 00:50:31,856 I, again, am going to search for GOOG. 1307 00:50:32,066 --> 00:50:33,526 But notice what happens this time. 1308 00:50:33,526 --> 00:50:35,866 It's kind of sexy, right? 1309 00:50:35,866 --> 00:50:38,136 I have a bit of a progress bar 1310 00:50:38,136 --> 00:50:40,726 of sorts here before I actually see the value. 1311 00:50:40,726 --> 00:50:42,736 So it looks like the server was kind of slow which is great 1312 00:50:42,736 --> 00:50:45,816 because I had the sexy little looking up quote dot-dot-dot. 1313 00:50:46,046 --> 00:50:47,146 Looking up price, dot-dot-dot. 1314 00:50:47,146 --> 00:50:48,086 And then the price appear. 1315 00:50:48,516 --> 00:50:50,226 So how do we go about implementing that? 1316 00:50:51,556 --> 00:50:51,856 Axle? 1317 00:50:52,306 --> 00:50:56,176 >> Well, I think state 3 of the Ajax request was -- 1318 00:50:56,176 --> 00:51:00,796 it's loading but it hasn't finished receiving everything. 1319 00:51:00,796 --> 00:51:00,926 >> Okay. 1320 00:51:00,926 --> 00:51:04,766 >> So you would set the text of that span or that div 1321 00:51:04,766 --> 00:51:05,786 to loading [inaudible]. 1322 00:51:05,786 --> 00:51:07,206 >> Okay, good. 1323 00:51:07,206 --> 00:51:09,406 So we can take advantage of the ready state property 1324 00:51:09,406 --> 00:51:13,616 and display a message based on the state we're in. 1325 00:51:13,616 --> 00:51:15,786 To be honest, I think we can even simplify it further. 1326 00:51:15,786 --> 00:51:18,066 Rather than doing it when the state changes, 1327 00:51:18,406 --> 00:51:20,756 why not just do it when the user -- 1328 00:51:20,916 --> 00:51:21,386 >> Clicks the button. 1329 00:51:21,466 --> 00:51:22,296 >> -- clicks the button, right? 1330 00:51:22,296 --> 00:51:22,836 Then I don't even have 1331 00:51:22,836 --> 00:51:24,436 to remember what the various states are. 1332 00:51:24,526 --> 00:51:26,576 Four is the only one I've cared about thus far. 1333 00:51:26,576 --> 00:51:28,326 And it's frankly the only one you really need 1334 00:51:28,326 --> 00:51:29,466 to care about functionally. 1335 00:51:29,896 --> 00:51:35,146 But I can in my quote function change the contents of that div 1336 00:51:35,196 --> 00:51:37,606 and then, fine, I'll just change them again once my handler 1337 00:51:37,606 --> 00:51:38,796 function gets called. 1338 00:51:38,796 --> 00:51:40,596 So we don't have to mutate the DOM just once. 1339 00:51:40,596 --> 00:51:42,126 We can do it as many times as we want. 1340 00:51:42,386 --> 00:51:44,896 So, sure enough, in Ajax 6 here, 1341 00:51:45,216 --> 00:51:51,236 notice that I have the following code in my quote function. 1342 00:51:51,816 --> 00:51:53,756 After constructing the URL, 1343 00:51:53,926 --> 00:51:57,636 but before I actually make my Ajax request, what am I doing? 1344 00:51:57,636 --> 00:52:00,666 I'm informing the user by updating the inner HTML 1345 00:52:00,796 --> 00:52:03,836 of that quote div to be quote/unquote looking 1346 00:52:03,836 --> 00:52:05,406 up symbol, dot-dot-dot. 1347 00:52:06,006 --> 00:52:06,616 And that's it. 1348 00:52:07,016 --> 00:52:09,516 Now, if I scroll down to the handler function, 1349 00:52:09,516 --> 00:52:10,946 I'm doing something very similar, 1350 00:52:11,286 --> 00:52:12,896 identical to what I did before. 1351 00:52:13,026 --> 00:52:14,866 In this case I'm just re-updating 1352 00:52:14,866 --> 00:52:18,456 that quote element inner HTML with the response text. 1353 00:52:19,586 --> 00:52:23,536 Now it was not quite a coincidence 1354 00:52:23,536 --> 00:52:26,296 that this time the server took a while to respond. 1355 00:52:26,536 --> 00:52:28,076 In order to simulate this effective, 1356 00:52:28,076 --> 00:52:31,636 notice the little trick I did in quote5.php. 1357 00:52:32,926 --> 00:52:35,566 That's why you got to see the dot, dot, dot for five seconds. 1358 00:52:35,626 --> 00:52:37,606 But, more generally, if you don't need -- 1359 00:52:37,606 --> 00:52:40,216 this is not a good thing to do in an actual production system 1360 00:52:40,216 --> 00:52:42,096 since you're just wasting people's time otherwise. 1361 00:52:42,436 --> 00:52:44,826 So this is meant just to simulate a slow connection 1362 00:52:44,826 --> 00:52:45,696 so we could actually see it. 1363 00:52:45,696 --> 00:52:47,386 Otherwise it would be pretty instantaneous. 1364 00:52:47,526 --> 00:52:49,746 But you don't typically just see something like looking 1365 00:52:49,746 --> 00:52:50,796 up symbol dot-dot-dot. 1366 00:52:50,796 --> 00:52:53,106 What do you generally see in a website instead 1367 00:52:55,896 --> 00:52:58,026 when you're waiting for an Ajax response? 1368 00:52:58,026 --> 00:52:58,176 Ben. 1369 00:52:58,176 --> 00:53:02,396 >> So you like [inaudible] like spin [inaudible]. 1370 00:53:02,616 --> 00:53:04,586 >> Yeah. So you see some kind of spinning wheel 1371 00:53:04,586 --> 00:53:06,296 or progress bar or the like. 1372 00:53:06,296 --> 00:53:08,056 So we can actually do that. 1373 00:53:08,306 --> 00:53:13,836 Let me go ahead and open up, let's say, version 7 here. 1374 00:53:15,096 --> 00:53:17,796 And let me open that up in the browser as well. 1375 00:53:17,796 --> 00:53:19,556 And let's see what this version looks like. 1376 00:53:19,676 --> 00:53:20,716 It's deliberately hideous , 1377 00:53:21,046 --> 00:53:23,176 but it's at least sexier than just text. 1378 00:53:23,176 --> 00:53:23,976 Now we have this. 1379 00:53:24,516 --> 00:53:26,736 [ Inaudible Conversations ] 1380 00:53:27,236 --> 00:53:27,876 It's pretty bad. 1381 00:53:28,586 --> 00:53:29,606 Give it five or so seconds. 1382 00:53:29,876 --> 00:53:30,966 Voila. All right. 1383 00:53:31,016 --> 00:53:33,436 So now let's try to reverse-engineer this, right? 1384 00:53:33,436 --> 00:53:34,676 We know how we can update text. 1385 00:53:35,026 --> 00:53:38,686 How do we go about displaying a sexy progress bar like that? 1386 00:53:40,656 --> 00:53:41,696 Yeah, Axle. 1387 00:53:41,696 --> 00:53:42,916 >> Is that a gif 5? 1388 00:53:43,356 --> 00:53:43,846 >> Maybe. 1389 00:53:44,516 --> 00:53:46,726 [ Laughter ] 1390 00:53:47,226 --> 00:53:48,966 >> It would have a gif. 1391 00:53:49,286 --> 00:53:51,656 I think it's the timex image still. 1392 00:53:52,006 --> 00:53:53,536 >> Okay. Image tag, sure. 1393 00:53:53,536 --> 00:53:58,086 >> And then you would do a hidden or a stylus way none, 1394 00:53:58,086 --> 00:54:00,526 and you would talk about it based on the statement. 1395 00:54:00,526 --> 00:54:03,296 >> Good. So that hideous blink example we did last week recall 1396 00:54:03,296 --> 00:54:05,576 was interesting not because it fixed the blink tag 1397 00:54:05,866 --> 00:54:07,626 but rather it was manipulating CSS. 1398 00:54:08,266 --> 00:54:10,126 And, really, here that's an option, right? 1399 00:54:10,126 --> 00:54:12,056 If I come up with the animation somehow, 1400 00:54:12,216 --> 00:54:13,566 and frankly the easiest way is indeed 1401 00:54:13,566 --> 00:54:14,736 with an animated gif, right? 1402 00:54:14,736 --> 00:54:15,866 There's not complexity there. 1403 00:54:15,866 --> 00:54:17,836 I just frankly downloaded that one off the Internet, 1404 00:54:17,836 --> 00:54:19,516 and we'll see a site where you can download all sorts 1405 00:54:19,516 --> 00:54:20,286 of these kinds of things. 1406 00:54:20,626 --> 00:54:23,036 It's just an animated gif which means it's a single gif file 1407 00:54:23,246 --> 00:54:24,856 that happens to be animated like this. 1408 00:54:25,246 --> 00:54:28,156 Well, that's perfect because all I need to do 1409 00:54:28,156 --> 00:54:32,056 to show progress is either turn that image on or turn it off. 1410 00:54:32,136 --> 00:54:34,116 In other words, show it or hide it. 1411 00:54:34,476 --> 00:54:37,166 And we can do showing and hiding via CSS. 1412 00:54:37,166 --> 00:54:40,816 Recall that we had the visibility property of CSS 1413 00:54:40,916 --> 00:54:42,916 where you can either show or hide something. 1414 00:54:43,166 --> 00:54:45,456 There's an alternative which is the display property 1415 00:54:45,686 --> 00:54:48,136 which actually behaves a little bit differently 1416 00:54:48,356 --> 00:54:49,826 as we'll see in just a moment. 1417 00:54:49,826 --> 00:54:52,876 So let me go ahead and see how this is actually implemented. 1418 00:54:52,876 --> 00:54:55,676 Let me go to the source code in Ajax 7. 1419 00:54:55,676 --> 00:54:57,136 Scroll down to the HTML. 1420 00:54:57,426 --> 00:55:01,986 And now notice -- what's the secret here? 1421 00:55:02,796 --> 00:55:05,446 In addition to having my form and my divs and so forth, 1422 00:55:05,446 --> 00:55:07,066 what do I also have in there apparently? 1423 00:55:08,276 --> 00:55:08,376 Yeah? 1424 00:55:08,916 --> 00:55:11,286 >> Well then a div has a style attribute 1425 00:55:11,446 --> 00:55:12,766 that says display none. 1426 00:55:12,806 --> 00:55:13,326 >> Exactly. 1427 00:55:13,326 --> 00:55:17,686 So I have a div here called progress whose display 1428 00:55:17,686 --> 00:55:21,336 for the moment is done - rather is none, and that just means 1429 00:55:21,336 --> 00:55:23,036 by default it's not going to appear on the screen. 1430 00:55:23,036 --> 00:55:24,746 So this is actually kind of an important detail 1431 00:55:24,746 --> 00:55:26,656 because you wouldn't want it to be there be default 1432 00:55:26,656 --> 00:55:28,916 and then use JavaScript to change display to none 1433 00:55:29,126 --> 00:55:30,486 because you could see the progress bar 1434 00:55:30,486 --> 00:55:33,406 for a split second before the JavaScript actually hides it. 1435 00:55:33,666 --> 00:55:35,236 So doing it this way ensures that it's not going 1436 00:55:35,236 --> 00:55:38,166 to be displayed at all, and I have some alt text there 1437 00:55:38,166 --> 00:55:40,586 and the source happens to be 19 dash zero dot gif 1438 00:55:40,656 --> 00:55:43,466 which is the name from the site that I downloaded it from. 1439 00:55:43,876 --> 00:55:47,286 And then the div for the quote is just 1440 00:55:47,286 --> 00:55:48,576 as simple as it was before. 1441 00:55:48,576 --> 00:55:51,276 No actual content, but it did replace the text area 1442 00:55:51,356 --> 00:55:52,986 that we used a couple of examples before. 1443 00:55:53,296 --> 00:55:54,426 So now what has to change? 1444 00:55:54,426 --> 00:55:55,326 I somehow need 1445 00:55:55,326 --> 00:55:58,786 to programmatically change the display property 1446 00:55:59,136 --> 00:56:03,326 of the progress div, but we saw how to do that last week. 1447 00:56:03,326 --> 00:56:07,086 If I scroll up here and go into my quote function, 1448 00:56:07,536 --> 00:56:09,416 notice that this time to show progress, 1449 00:56:09,416 --> 00:56:11,796 rather than update some elements in our HTML, 1450 00:56:11,796 --> 00:56:14,976 notice that I instead get the div called progress, 1451 00:56:15,346 --> 00:56:17,526 then I do dot style dot display. 1452 00:56:18,006 --> 00:56:20,166 Last week we did style dot visibility. 1453 00:56:20,166 --> 00:56:23,396 Here I do style dot display, and I change it to block which, 1454 00:56:23,526 --> 00:56:25,556 for some silly reason, is the opposite of none. 1455 00:56:25,676 --> 00:56:28,286 Block is the opposite of none; none is the opposite of block. 1456 00:56:28,286 --> 00:56:30,576 Although there are some other variance possible as well. 1457 00:56:31,076 --> 00:56:32,516 So what am I probably doing 1458 00:56:32,516 --> 00:56:35,676 in my handler function once the price comes back? 1459 00:56:36,356 --> 00:56:40,076 What do I need to do in my handler function? 1460 00:56:41,496 --> 00:56:43,376 Because otherwise I have this big, ugly, 1461 00:56:43,376 --> 00:56:44,866 red icon spinning around. 1462 00:56:44,986 --> 00:56:48,686 So how do I turn that off? 1463 00:56:48,966 --> 00:56:49,656 Well, Axle. 1464 00:56:49,656 --> 00:56:51,356 >> You set it to [inaudible]. 1465 00:56:51,596 --> 00:56:52,846 >> Yeah. Just do the opposite. 1466 00:56:52,846 --> 00:56:54,896 So pretty much the same code but a different value. 1467 00:56:55,196 --> 00:56:56,866 I change the display back to none. 1468 00:56:57,176 --> 00:57:00,666 Now, just as with the blink tag, we could see the DOM changing 1469 00:57:00,666 --> 00:57:02,926 in real time thanks to Chrome's Developer Toolbar. 1470 00:57:03,216 --> 00:57:04,406 We can see the same here. 1471 00:57:04,406 --> 00:57:07,106 So let me open up the same example again. 1472 00:57:07,656 --> 00:57:10,606 Let me make the Developer Toolbar a little bigger. 1473 00:57:11,016 --> 00:57:13,166 Go to our elements tag. 1474 00:57:14,116 --> 00:57:15,076 Go in here. 1475 00:57:15,566 --> 00:57:19,566 And now notice here in the DOM it's display none. 1476 00:57:20,106 --> 00:57:23,446 Now let me go up here and quickly type in GOOG. 1477 00:57:23,666 --> 00:57:24,326 Get quote. 1478 00:57:24,326 --> 00:57:25,606 Now down here -- oops. 1479 00:57:25,946 --> 00:57:28,346 Down here notice that it's display block 1480 00:57:28,346 --> 00:57:30,346 and in just a couple of seconds back to none. 1481 00:57:30,736 --> 00:57:32,766 So the same behavior that we saw while playing 1482 00:57:32,766 --> 00:57:33,836 with the blink element. 1483 00:57:34,216 --> 00:57:37,246 Now we're just updating things a little more precisely. 1484 00:57:37,746 --> 00:57:39,736 So for those quite savvy with CSS, 1485 00:57:40,096 --> 00:57:42,866 why am I using display today and not visibility? 1486 00:57:50,106 --> 00:57:51,006 What's the difference, Axle? 1487 00:57:51,006 --> 00:57:52,896 >> Well, this is not going to do with [inaudible]. 1488 00:57:53,956 --> 00:57:54,776 This is just a guess. 1489 00:57:55,136 --> 00:57:59,536 It feels like -- no, no, no. 1490 00:57:59,726 --> 00:58:00,586 >> Don't want to go there? 1491 00:58:00,826 --> 00:58:00,926 >> No. 1492 00:58:00,926 --> 00:58:01,956 >> All right. 1493 00:58:02,176 --> 00:58:03,986 So let me see if I can do it by example. 1494 00:58:03,986 --> 00:58:06,526 Let me go down to my actual HTML. 1495 00:58:07,476 --> 00:58:10,526 Oops. Let me go into this. 1496 00:58:11,126 --> 00:58:16,166 I'm going to change display none to visibility hidden, 1497 00:58:16,456 --> 00:58:18,426 and let me reload the page. 1498 00:58:18,426 --> 00:58:20,366 And, hopefully -- no progress bar. 1499 00:58:20,366 --> 00:58:21,226 Okay. So that's good. 1500 00:58:21,366 --> 00:58:22,396 No progress bar there. 1501 00:58:22,966 --> 00:58:25,936 But what do you notice is slightly different already? 1502 00:58:25,936 --> 00:58:27,966 >> It still takes up the space. 1503 00:58:28,086 --> 00:58:29,096 >> It still takes up the space. 1504 00:58:29,426 --> 00:58:30,396 So that's the difference. 1505 00:58:30,396 --> 00:58:33,866 Whereas the visibility property in CSS hides something. 1506 00:58:33,866 --> 00:58:36,476 If you say it's a hidden, it still takes 1507 00:58:36,476 --> 00:58:38,666 up the exact same amount of space as it would 1508 00:58:38,666 --> 00:58:39,776 if it were not hidden. 1509 00:58:40,166 --> 00:58:41,586 So that might be fine. 1510 00:58:41,586 --> 00:58:43,396 And, in fact, sometimes that is the behavior you want. 1511 00:58:43,396 --> 00:58:46,896 You don't want your webpage moving up and down, up and down, 1512 00:58:46,946 --> 00:58:48,206 as will be the case here. 1513 00:58:48,506 --> 00:58:50,226 But I just decided that this looks atrocious. 1514 00:58:50,556 --> 00:58:52,356 So, instead, I decided it's going to be better 1515 00:58:52,356 --> 00:58:54,626 if things actually moved down in this particular case, 1516 00:58:54,626 --> 00:58:56,316 showing the image and then disappearing 1517 00:58:56,686 --> 00:58:58,296 when it's done showing progress. 1518 00:58:58,516 --> 00:58:59,746 Even better, frankly, would be 1519 00:58:59,746 --> 00:59:02,376 to use an image that's a lot more subtle, maybe small. 1520 00:59:02,376 --> 00:59:04,206 You align it with the text field instead 1521 00:59:04,206 --> 00:59:06,546 so that you see a progress bar, but nothing has to move. 1522 00:59:06,636 --> 00:59:08,316 But that's the key difference between display 1523 00:59:08,656 --> 00:59:10,846 and the visibility property of CSS. 1524 00:59:10,946 --> 00:59:12,426 All right. 1525 00:59:12,426 --> 00:59:13,626 So that's getting a little better. 1526 00:59:13,866 --> 00:59:17,326 As an aside, if you want to download this 1527 00:59:17,326 --> 00:59:19,916 in other fun progress bars, 1528 00:59:19,966 --> 00:59:23,256 a good silly website is ajaxload.info. 1529 00:59:23,256 --> 00:59:25,946 It's the only dot info site I know of on the Internet. 1530 00:59:26,576 --> 00:59:29,226 And you can choose some really hideous icons here. 1531 00:59:30,006 --> 00:59:31,406 They got that. 1532 00:59:32,376 --> 00:59:34,216 So this one's, you know, at least typical. 1533 00:59:34,216 --> 00:59:35,316 This is just strange [laughter]. 1534 00:59:35,546 --> 00:59:39,636 So we look forward to very hideous project tools. 1535 00:59:40,736 --> 00:59:42,306 So that's the biggest one I could find here. 1536 00:59:43,006 --> 00:59:45,246 But notice, these are all just animated gifs. 1537 00:59:45,246 --> 00:59:46,936 So the fact that they appear 1538 00:59:46,936 --> 00:59:50,156 to be showing progress is really just an illusion, and it -- 1539 00:59:50,236 --> 00:59:55,606 where the sort of spinney thing is, where the darker icon is, 1540 00:59:55,606 --> 00:59:57,676 it's totally a function of when you reveal it 1541 00:59:57,756 --> 00:59:58,666 and when you hide it. 1542 00:59:58,666 --> 01:00:00,846 It has nothing to do with starting at one point 1543 01:00:00,846 --> 01:00:01,976 and going to another point. 1544 01:00:02,216 --> 01:00:03,946 You can't stop the animation of the gif. 1545 01:00:04,276 --> 01:00:05,476 All you can do is hide it. 1546 01:00:05,476 --> 01:00:07,426 And there are a couple of more down here. 1547 01:00:07,996 --> 01:00:09,766 Yeah, so there's all sorts of crazy things. 1548 01:00:10,046 --> 01:00:12,446 And -- okay, that's kind of funny. 1549 01:00:12,966 --> 01:00:15,666 But then you can choose like your background color here. 1550 01:00:15,666 --> 01:00:17,426 So we could do -- let's see. 1551 01:00:17,426 --> 01:00:19,616 If I do this up here. 1552 01:00:20,416 --> 01:00:20,816 Okay [inaudible]. 1553 01:00:21,746 --> 01:00:23,696 Okay, we did -- choose this guy. 1554 01:00:23,996 --> 01:00:27,086 And now generate it. 1555 01:00:27,786 --> 01:00:28,206 There it is. 1556 01:00:28,346 --> 01:00:29,436 Okay. That's all I wanted to do. 1557 01:00:29,436 --> 01:00:30,086 All right. 1558 01:00:30,116 --> 01:00:32,216 So there's your potential progress bar if you're familiar. 1559 01:00:32,456 --> 01:00:33,316 From the lack of laughter, 1560 01:00:33,316 --> 01:00:34,526 some of you don't even know what Pa-Man is. 1561 01:00:34,526 --> 01:00:35,556 That's kind of sad. 1562 01:00:35,846 --> 01:00:37,486 Oh, well. Game from yesteryear. 1563 01:00:37,856 --> 01:00:38,286 All right. 1564 01:00:38,506 --> 01:00:40,726 So, not bad. 1565 01:00:40,846 --> 01:00:43,376 But we can do a little differently here. 1566 01:00:43,376 --> 01:00:46,456 Let's take a look at this example now. 1567 01:00:46,456 --> 01:00:47,736 It's going to be a little more work. 1568 01:00:48,046 --> 01:00:51,386 But now let's notice how I've restructured the page. 1569 01:00:51,716 --> 01:00:53,096 Finally we're getting back 1570 01:00:53,096 --> 01:00:54,866 to the cliffhanger from before break. 1571 01:00:55,536 --> 01:00:57,696 So what am I obviously fundamentally doing here that's 1572 01:00:57,696 --> 01:01:00,106 different from all previous examples? 1573 01:01:00,686 --> 01:01:00,826 Louis? 1574 01:01:04,276 --> 01:01:07,106 >> By separating [inaudible] to zero spans? 1575 01:01:08,446 --> 01:01:09,166 >> Yeah, exactly. 1576 01:01:09,166 --> 01:01:10,626 So now I have three different spans, 1577 01:01:10,626 --> 01:01:12,826 each of which is semantically tagged with some keyword. 1578 01:01:12,826 --> 01:01:14,626 In this case, Price, Low, and High. 1579 01:01:14,896 --> 01:01:16,616 So that can uniquely identify these spans. 1580 01:01:16,616 --> 01:01:19,316 And so, finally, I'm starting to actualize my vision here 1581 01:01:19,556 --> 01:01:24,466 so that I can update a specific part of the DOM without having 1582 01:01:24,466 --> 01:01:26,936 to just plop in a huge bunch of text from the server. 1583 01:01:27,266 --> 01:01:30,116 So to do this, I'm going to need the server to return 1584 01:01:30,116 --> 01:01:32,776 to me some uniquely identifiable values. 1585 01:01:32,776 --> 01:01:34,526 And this far I've returned price, 1586 01:01:34,526 --> 01:01:35,776 colon and then some number. 1587 01:01:36,036 --> 01:01:39,826 I tried doing price, colon, some number, backslash n, then low, 1588 01:01:39,826 --> 01:01:41,256 and then high, and so forth. 1589 01:01:41,456 --> 01:01:43,086 Then I resorted to some br tags. 1590 01:01:43,086 --> 01:01:44,646 But we really need to clean this up. 1591 01:01:44,916 --> 01:01:46,716 So I can take the JSon approach, 1592 01:01:46,716 --> 01:01:48,976 and I can actually construct an array on the server 1593 01:01:49,246 --> 01:01:50,846 and I can spit out an array. 1594 01:01:50,846 --> 01:01:53,756 But an array is not necessarily the best representation 1595 01:01:53,756 --> 01:01:54,826 for these pieces of data. 1596 01:01:54,826 --> 01:02:02,936 Why? Why is a array with square brackets not necessarily the 1597 01:02:02,936 --> 01:02:05,976 best way of sending this data from server to browser? 1598 01:02:17,056 --> 01:02:17,496 Mm-hmm? 1599 01:02:18,176 --> 01:02:19,326 >> This is one thing you get 1600 01:02:19,326 --> 01:02:21,796 since it's a non-associative array you don't know 1601 01:02:21,796 --> 01:02:23,356 if it's the price low or high in the array. 1602 01:02:23,446 --> 01:02:26,076 You have to remember though the row numbers, but -- 1603 01:02:26,076 --> 01:02:26,436 >> Yeah. 1604 01:02:26,436 --> 01:02:27,266 >> -- I think that it. 1605 01:02:27,266 --> 01:02:27,726 >> Okay. No. 1606 01:02:27,726 --> 01:02:29,296 That's a pretty reasonable criticism. 1607 01:02:29,296 --> 01:02:31,316 I mean, granted, there's not much data we're sending back, 1608 01:02:31,316 --> 01:02:34,246 and the array we did right before break whereby I sent back 1609 01:02:34,246 --> 01:02:36,786 a four-element array using square bracket notations, 1610 01:02:36,786 --> 01:02:38,456 so it's indeed a numerically indexed array. 1611 01:02:38,756 --> 01:02:40,496 You know, the burden is on me to remember 1612 01:02:40,496 --> 01:02:43,176 that bracket one is Price, bracket two is High or Low. 1613 01:02:43,176 --> 01:02:44,976 I already forgot which is High or Low. 1614 01:02:45,206 --> 01:02:46,656 So that's potentially a problem. 1615 01:02:46,906 --> 01:02:49,986 Moreover, if I ever change what the server's spitting 1616 01:02:49,986 --> 01:02:52,426 out then my client's side code is going to break. 1617 01:02:52,426 --> 01:02:54,886 And this is in stark contrast to XML, for instance, 1618 01:02:55,116 --> 01:02:57,166 whereby one of the design features of XML, recall, 1619 01:02:57,166 --> 01:02:59,956 was its extensibility whereby you should be able to spit 1620 01:02:59,956 --> 01:03:02,746 out a person's middle initial and their address, 1621 01:03:02,966 --> 01:03:06,076 additional XML elements, without breaking code 1622 01:03:06,216 --> 01:03:08,406 that expects first name and last name and other 1623 01:03:08,406 --> 01:03:09,236 such things to be there. 1624 01:03:09,236 --> 01:03:11,646 If you think way back to that purchase order example 1625 01:03:11,646 --> 01:03:14,006 for the Amazon book, we introduced more elements. 1626 01:03:14,356 --> 01:03:15,086 Same deal here. 1627 01:03:15,086 --> 01:03:17,736 If I suddenly introduce some field besides High, Low, 1628 01:03:17,736 --> 01:03:18,926 and Price, it would be nice 1629 01:03:18,926 --> 01:03:20,806 if it doesn't break existing implementations. 1630 01:03:20,806 --> 01:03:22,696 And, frankly, if I want to reorder Price, High, 1631 01:03:22,696 --> 01:03:25,016 and Low for whatever arbitrary reasons, it would be nice 1632 01:03:25,316 --> 01:03:26,896 if client code doesn't break as well. 1633 01:03:27,166 --> 01:03:30,316 So what's the alternative to a numerically-indexed array 1634 01:03:30,316 --> 01:03:35,136 that we could spit back that JavaScript could understand? 1635 01:03:35,136 --> 01:03:35,366 Axle. 1636 01:03:35,836 --> 01:03:36,446 >> Associative array? 1637 01:03:36,696 --> 01:03:38,106 >> Yeah. So an associative array. 1638 01:03:38,106 --> 01:03:40,536 And JavaScript doesn't technically have 1639 01:03:40,536 --> 01:03:41,716 associative arrays. 1640 01:03:41,716 --> 01:03:43,486 However, you can -- at the end 1641 01:03:43,486 --> 01:03:45,356 of the day they're pretty much functionally the same. 1642 01:03:45,716 --> 01:03:48,686 So what do we have to convert a PHP associative array 1643 01:03:48,686 --> 01:03:52,206 to in order for JavaScript to understand it? 1644 01:03:53,476 --> 01:03:58,296 JavaScript really has two data structures of interest, 1645 01:03:58,386 --> 01:04:00,386 at least right now -- the array and the other one 1646 01:04:00,646 --> 01:04:03,246 which is the fairly generic -- 1647 01:04:04,856 --> 01:04:05,006 >> String. 1648 01:04:05,256 --> 01:04:07,256 >> String's good, but we needed some structure. 1649 01:04:07,256 --> 01:04:08,816 >> A variable bar? 1650 01:04:08,816 --> 01:04:10,896 >> A variable's just a variable, not a data structure. 1651 01:04:12,226 --> 01:04:12,556 Object. 1652 01:04:12,876 --> 01:04:15,016 >> You said [inaudible]. 1653 01:04:15,226 --> 01:04:16,346 >> An object is right. 1654 01:04:16,346 --> 01:04:18,106 Okay. I was hoping someone would pluck that out. 1655 01:04:18,276 --> 01:04:19,176 So just an object, right? 1656 01:04:19,176 --> 01:04:20,626 Recall the curly brace notation. 1657 01:04:20,916 --> 01:04:24,916 An object in JavaScript is just an arbitrary collection 1658 01:04:24,916 --> 01:04:29,336 of key value pairs whereby you can have a word like Price colon 1659 01:04:29,336 --> 01:04:32,786 and then a number comma, high colon and a number comma, 1660 01:04:33,156 --> 01:04:34,876 low colon and a number. 1661 01:04:34,876 --> 01:04:37,726 In other words we can still send back three values 1662 01:04:37,726 --> 01:04:40,896 that we care about, but we can tag them with keywords, 1663 01:04:40,936 --> 01:04:44,326 literally keys in the object, so that I can directly access any 1664 01:04:44,376 --> 01:04:47,006 of them, and the order in the object does not matter. 1665 01:04:47,386 --> 01:04:49,616 So let's see how we might go about doing this. 1666 01:04:49,616 --> 01:04:55,026 Let me open up, in this case, quote5.php, 1667 01:04:55,126 --> 01:04:58,266 which is a slight enhancement of what we did earlier. 1668 01:04:58,266 --> 01:05:00,296 Ah. Okay, wait. 1669 01:05:01,016 --> 01:05:02,456 I told the story in the wrong order. 1670 01:05:02,496 --> 01:05:05,756 Let me go to -- here's 9. 1671 01:05:05,886 --> 01:05:09,416 Let me just double-check. 1672 01:05:10,446 --> 01:05:12,016 Aha, I've got that. 1673 01:05:12,016 --> 01:05:12,856 Ah, HI. Okay. 1674 01:05:13,636 --> 01:05:19,806 We will do a -- let's see. 1675 01:05:20,056 --> 01:05:22,366 If quote9, quote5, quote4. 1676 01:05:22,736 --> 01:05:27,416 Okay. So let's fix this. 1677 01:05:28,086 --> 01:05:30,686 We'll use quote4.php, which currently is spitting 1678 01:05:30,686 --> 01:05:33,896 out this mess which is comingling Price and High 1679 01:05:33,896 --> 01:05:35,406 and Low with some HTML. 1680 01:05:35,686 --> 01:05:38,106 So previously I used JSon in code. 1681 01:05:38,336 --> 01:05:39,756 So let's at least start there. 1682 01:05:39,756 --> 01:05:42,996 Let me go back up here and in quote4 let me go ahead 1683 01:05:42,996 --> 01:05:47,796 and do print and then json encode data, 1684 01:05:47,956 --> 01:05:49,496 because data's already an array. 1685 01:05:49,496 --> 01:05:50,886 Let me delete this mess here. 1686 01:05:51,766 --> 01:05:55,886 And now let me go back to my browser and open up appliance, 1687 01:05:56,826 --> 01:06:01,796 and then quote4.php question mark symbol equals GOOG. 1688 01:06:02,296 --> 01:06:07,506 Oops, sorry. 1689 01:06:07,506 --> 01:06:12,126 Let's do this again -- quote4. 1690 01:06:12,126 --> 01:06:18,426 Quote4.php question mark symbol equals GOOG enter. 1691 01:06:18,916 --> 01:06:23,176 Why is it waiting? 1692 01:06:23,996 --> 01:06:26,556 Okay, there we -- oh, stupid 5-second delay. 1693 01:06:26,736 --> 01:06:27,096 All right. 1694 01:06:27,936 --> 01:06:29,586 Okay, goodbye. 1695 01:06:30,536 --> 01:06:30,976 All right. 1696 01:06:31,106 --> 01:06:32,136 That's why it was so slow. 1697 01:06:32,136 --> 01:06:34,186 Okay. So this is where we left off before break. 1698 01:06:34,186 --> 01:06:36,306 Not bad, but we can do better. 1699 01:06:36,476 --> 01:06:38,496 So we somehow have to retain the keys here. 1700 01:06:38,496 --> 01:06:39,856 But we don't have keys yet so we're going 1701 01:06:39,856 --> 01:06:40,986 to have to do this ourselves. 1702 01:06:41,326 --> 01:06:43,336 So one way I could do this is as follows. 1703 01:06:43,386 --> 01:06:47,946 In my PHP code it's apparently not sufficient just 1704 01:06:47,946 --> 01:06:51,296 to JSon encode data because the data variable, recall, 1705 01:06:51,296 --> 01:06:52,496 is returned by f gets csv, 1706 01:06:52,496 --> 01:06:55,226 and recall that f gets csv just returns a 1707 01:06:55,226 --> 01:06:56,216 numerically-indexed array. 1708 01:06:56,746 --> 01:07:01,406 So we can't change that behavior besides changing PHP itself. 1709 01:07:01,406 --> 01:07:03,796 But we could do something like this. 1710 01:07:04,406 --> 01:07:10,696 We could say array -- let's say, let's call this objectget -- 1711 01:07:10,846 --> 01:07:12,906 I don't want to conflate -- 1712 01:07:13,036 --> 01:07:16,116 let's just say results get array. 1713 01:07:16,116 --> 01:07:19,466 And now I'm going to prepare an array with some key values. 1714 01:07:19,466 --> 01:07:21,526 In PHP I can do this as follows. 1715 01:07:21,946 --> 01:07:27,746 Price and then equal sign arrow data, which is price. 1716 01:07:28,536 --> 01:07:32,546 It's one. And now I need two other such fields -- whoops -- 1717 01:07:33,386 --> 01:07:34,486 two other such fields. 1718 01:07:35,196 --> 01:07:40,276 So high and low 3 and 2. 1719 01:07:40,616 --> 01:07:41,996 So now I have a new array. 1720 01:07:41,996 --> 01:07:44,166 And what if I print out this results array? 1721 01:07:44,666 --> 01:07:47,596 So now notice I'm pretty much still just returning bracket 1, 1722 01:07:47,596 --> 01:07:48,546 bracket 2, bracket 3. 1723 01:07:48,546 --> 01:07:50,996 But I'm adding to it some keys so that 1724 01:07:50,996 --> 01:07:54,516 when this object is serialized it actually has those key value 1725 01:07:54,516 --> 01:07:55,666 pair associations. 1726 01:07:55,926 --> 01:07:58,776 So let me go back to my browser and reload 1727 01:07:58,776 --> 01:07:59,976 without the delay this time. 1728 01:08:00,316 --> 01:08:01,976 And voila, now we have this. 1729 01:08:02,936 --> 01:08:06,146 So it's a little verbose in that everything is quoted. 1730 01:08:06,146 --> 01:08:07,596 But that's what JSon encode is doing 1731 01:08:07,596 --> 01:08:08,926 for us just for safety's sake. 1732 01:08:09,276 --> 01:08:11,716 But this is a JavaScript object, right? 1733 01:08:11,716 --> 01:08:14,386 It might be written without much white space but there is a key 1734 01:08:14,386 --> 01:08:16,586 of Price and a value of 615.51. 1735 01:08:16,996 --> 01:08:19,386 There's a second key of High and a third key of low, 1736 01:08:19,386 --> 01:08:21,926 and each of these have their respective prices. 1737 01:08:22,296 --> 01:08:23,426 So why is this useful? 1738 01:08:23,426 --> 01:08:27,056 Because now it's going to be so much easier to actually dive in 1739 01:08:27,056 --> 01:08:31,746 and get individual values from this JSon data, all right? 1740 01:08:31,836 --> 01:08:37,656 So let's go ahead and take a look at one approach here. 1741 01:08:38,156 --> 01:08:39,676 Let me go back in here [inaudible]. 1742 01:08:40,436 --> 01:08:46,386 Let me go ahead an open up Ajax10.html 1743 01:08:46,506 --> 01:08:48,326 which has this embodied. 1744 01:08:48,996 --> 01:08:53,776 I'm cheating slightly here. 1745 01:08:54,776 --> 01:08:58,396 Okay. So let's do this. 1746 01:08:59,756 --> 01:09:02,106 So this line of code here now is new. 1747 01:09:02,586 --> 01:09:04,716 At the very top we have the eval function. 1748 01:09:04,746 --> 01:09:06,226 In general, in most languages, 1749 01:09:06,226 --> 01:09:09,736 using the eval function bad tends to be the means 1750 01:09:09,736 --> 01:09:12,896 by which various programs are exploited. 1751 01:09:12,896 --> 01:09:16,276 For instance, I think WordPress, a popular blogging software, 1752 01:09:16,276 --> 01:09:18,806 has a habit of using eval all over the place which is one 1753 01:09:18,806 --> 01:09:21,316 of the primary reasons it gets hacked quite a bit. 1754 01:09:21,316 --> 01:09:24,566 Eval takes a string of code and executes it for you which means 1755 01:09:24,566 --> 01:09:28,796 if you can somehow trick the computer into evaling a string 1756 01:09:28,796 --> 01:09:30,426 that you, a bad guy, have inputted, 1757 01:09:30,426 --> 01:09:32,846 you can trick the server into executing any code you want. 1758 01:09:33,176 --> 01:09:36,326 However, for JSon, it's actually necessary in JavaScript. 1759 01:09:36,326 --> 01:09:37,496 And notice what we're doing here. 1760 01:09:37,886 --> 01:09:41,146 So in JSon when -- or rather, in JavaScript, 1761 01:09:41,146 --> 01:09:45,366 when you get back an xhr response text value that happens 1762 01:09:45,426 --> 01:09:47,456 to be JavaScript object notation. 1763 01:09:47,516 --> 01:09:50,056 In other words, the stuff we are spitting out at the moment. 1764 01:09:50,616 --> 01:09:53,146 You have to somehow convert that text 1765 01:09:53,566 --> 01:09:55,266 to an actual JavaScript object. 1766 01:09:55,556 --> 01:09:57,796 Unfortunately, there's no simple function of doing this, 1767 01:09:57,796 --> 01:09:59,736 so the way you do this is with the eval function. 1768 01:10:00,266 --> 01:10:03,506 So the eval function in this case is expecting a string. 1769 01:10:03,786 --> 01:10:06,286 And the fact that I'm putting 1770 01:10:06,506 --> 01:10:11,016 that string in-between parentheses means that I'm going 1771 01:10:11,016 --> 01:10:13,006 to converting this to an object, all right? 1772 01:10:13,006 --> 01:10:15,436 This is just -- I'm not going to be at risk 1773 01:10:15,436 --> 01:10:18,116 for executing a JavaScript function here in this case. 1774 01:10:18,626 --> 01:10:20,876 So by taking response text, prepending 1775 01:10:20,876 --> 01:10:23,416 and appending a parenthesis to both sides, 1776 01:10:23,626 --> 01:10:28,276 and then calling eval stores in the quote variable an object. 1777 01:10:28,276 --> 01:10:31,906 And how do you access keys in JavaScript objects? 1778 01:10:32,126 --> 01:10:33,606 If the object is called quote, 1779 01:10:33,606 --> 01:10:36,876 how do I get the price property of the quote object? 1780 01:10:37,936 --> 01:10:42,466 >> Quote and then a hard bracket and then price and harder. 1781 01:10:42,576 --> 01:10:43,296 >> Exactly. 1782 01:10:43,296 --> 01:10:45,646 So let me go back and do this. 1783 01:10:46,586 --> 01:10:51,766 Let me go in here and let's go into -- 1784 01:10:51,766 --> 01:10:53,826 let's see, this is quote4. 1785 01:10:53,826 --> 01:10:54,426 That's good. 1786 01:10:54,956 --> 01:10:57,756 Let's go into Ajax9.html. 1787 01:10:58,046 --> 01:11:03,176 Let's see, quote4 not 9. 1788 01:11:03,176 --> 01:11:03,936 Where were we? 1789 01:11:03,936 --> 01:11:06,806 Seven. Not sevens. 1790 01:11:07,616 --> 01:11:11,386 Okay. So version 8 here. 1791 01:11:11,676 --> 01:11:14,816 So I want this connecting to quote5.xml. 1792 01:11:14,816 --> 01:11:15,426 Let's see. 1793 01:11:15,426 --> 01:11:15,946 [Inaudible] program. 1794 01:11:15,946 --> 01:11:24,186 So I want to connect to version 4, which I've just updated, 1795 01:11:24,556 --> 01:11:27,046 and I want to go ahead 1796 01:11:27,046 --> 01:11:30,346 and change the behavior here in Price. 1797 01:11:30,516 --> 01:11:33,126 So let me first temporarily delete some stuff here, 1798 01:11:33,676 --> 01:11:36,706 and let's do this. 1799 01:11:36,706 --> 01:11:37,526 Parse JSon. 1800 01:11:37,526 --> 01:11:42,326 So let me zoom in and I'm going to say var quote gets eval 1801 01:11:42,326 --> 01:11:47,606 of quote/unquote xhr.response text. 1802 01:11:49,246 --> 01:11:56,946 Okay. And now I need to insert Price, High, Low, into DOM. 1803 01:11:56,946 --> 01:11:57,706 How can I do this? 1804 01:11:58,256 --> 01:12:02,006 Well, I can do document.getElementById 1805 01:12:02,356 --> 01:12:03,726 of quote/unquote Price. 1806 01:12:03,726 --> 01:12:06,206 And then how do I update its contents? 1807 01:12:06,306 --> 01:12:07,816 Dot Value or? 1808 01:12:07,816 --> 01:12:07,986 Recall -- 1809 01:12:08,586 --> 01:12:09,866 >> What is it? 1810 01:12:09,866 --> 01:12:15,566 What's the price? 1811 01:12:15,706 --> 01:12:16,236 Also -- 1812 01:12:16,236 --> 01:12:16,776 >> It's a span. 1813 01:12:17,256 --> 01:12:21,206 >> Either in your HTML or text content [inaudible]. 1814 01:12:21,206 --> 01:12:21,736 >> Okay. Good. 1815 01:12:21,736 --> 01:12:23,846 So let's go with enter HTML here. 1816 01:12:23,846 --> 01:12:27,766 Let me scroll down to where we were. 1817 01:12:28,086 --> 01:12:33,636 So here we have document dot get [inaudible] id.price.innerHTML 1818 01:12:34,056 --> 01:12:38,546 equals -- and then, as Axle proposed, quote bracket price. 1819 01:12:39,656 --> 01:12:41,166 So let's see if this actually works. 1820 01:12:41,166 --> 01:12:43,056 So this is version 8. 1821 01:12:43,456 --> 01:12:44,926 Let's go back to my browser. 1822 01:12:45,636 --> 01:12:46,526 Go over here. 1823 01:12:47,586 --> 01:12:48,306 Version 8. 1824 01:12:48,996 --> 01:12:49,606 It's Goog. 1825 01:12:49,896 --> 01:12:50,536 Get quote. 1826 01:12:51,166 --> 01:12:52,146 Whoo, it worked. 1827 01:12:52,706 --> 01:12:53,926 Okay. Why is High and Low not working? 1828 01:12:53,926 --> 01:12:57,046 >> You didn't code them. 1829 01:12:57,106 --> 01:12:57,476 >> Correct. 1830 01:12:57,476 --> 01:12:58,116 I didn't write it. 1831 01:12:58,116 --> 01:12:59,716 So, good. A little sanity check. 1832 01:13:00,276 --> 01:13:01,666 Copy, paste in help here, 1833 01:13:01,666 --> 01:13:04,006 at least with this particular example. 1834 01:13:04,006 --> 01:13:06,036 So let's now change this to High. 1835 01:13:06,226 --> 01:13:07,466 Let's change this to Low. 1836 01:13:07,466 --> 01:13:10,316 Let's change this to Low; this to High. 1837 01:13:10,566 --> 01:13:12,166 So now I'm updating at three different places, 1838 01:13:12,166 --> 01:13:14,346 and maybe we can do this with an array and somehow clean 1839 01:13:14,346 --> 01:13:15,146 up this code a little bit. 1840 01:13:15,146 --> 01:13:16,166 But for now, it's just three. 1841 01:13:16,206 --> 01:13:17,426 So that's not too unreasonable. 1842 01:13:17,696 --> 01:13:18,416 Let's reload. 1843 01:13:18,416 --> 01:13:19,386 Type in GOOG again. 1844 01:13:19,776 --> 01:13:20,476 Get quote. 1845 01:13:20,756 --> 01:13:21,276 And voila. 1846 01:13:21,396 --> 01:13:23,736 Now we have those three separate values. 1847 01:13:24,126 --> 01:13:26,156 And what more can we do here? 1848 01:13:26,156 --> 01:13:27,796 This is a little verbose. 1849 01:13:28,216 --> 01:13:29,796 In fact, I can simplify this, 1850 01:13:30,316 --> 01:13:33,336 and I don't strictly need the square bracket notation. 1851 01:13:33,616 --> 01:13:38,766 I can instead do just that which is even nicer syntax perhaps. 1852 01:13:38,766 --> 01:13:40,596 So the quote is an object. 1853 01:13:40,856 --> 01:13:42,236 Objects' properties can be accessed 1854 01:13:42,236 --> 01:13:44,746 with dot notation unless they have funky characters in them 1855 01:13:44,746 --> 01:13:45,756 like spaces and the like. 1856 01:13:46,096 --> 01:13:48,626 So, in this case, I'd argue this is a bit more readable. 1857 01:13:48,916 --> 01:13:52,426 And if I go back to Ajax 8, type in GOOG, get quote, 1858 01:13:52,676 --> 01:13:55,326 I get the exact same behavior as I did before. 1859 01:13:56,206 --> 01:13:57,746 So, much nicer, right? 1860 01:13:58,296 --> 01:14:00,776 So, this is JavaScript object notation 1861 01:14:00,776 --> 01:14:03,846 and it's the JSon behind Ajax these days. 1862 01:14:03,846 --> 01:14:06,516 And it's a very, very common data format 1863 01:14:06,576 --> 01:14:09,376 for exchanging information between systems because it's 1864 01:14:09,376 --> 01:14:10,976 so relatively simple to generate, 1865 01:14:10,976 --> 01:14:13,596 as we did with just a couple of lines of PHP code, 1866 01:14:13,596 --> 01:14:15,106 and it's also simple to parse 1867 01:14:15,356 --> 01:14:17,686 because all you do is the equivalent of this eval call, 1868 01:14:17,686 --> 01:14:20,626 and then you have right then and there a JavaScript object. 1869 01:14:21,186 --> 01:14:23,936 So, by contrast, let's actually take a quick look 1870 01:14:24,236 --> 01:14:28,826 at how you would have done this if you'd used the x in Ajax, 1871 01:14:28,976 --> 01:14:30,556 an XML-based approach. 1872 01:14:30,936 --> 01:14:34,896 So let me go back to these files here and let me open 1873 01:14:34,896 --> 01:14:40,156 up example 8 as it currently is and demonstrate the following. 1874 01:14:40,156 --> 01:14:43,576 So, in example 8, recall that we have these three spans 1875 01:14:43,576 --> 01:14:45,076 for Price, High, and Low. 1876 01:14:45,346 --> 01:14:50,226 And suppose that we instead use quote5.php to spit 1877 01:14:50,226 --> 01:14:51,736 out the following results. 1878 01:14:51,736 --> 01:14:54,866 Let me go up to quote5.php and hit enter. 1879 01:14:55,396 --> 01:14:58,736 And this is what I propose quote5.php should output. 1880 01:14:59,086 --> 01:15:00,006 It's using XML. 1881 01:15:00,706 --> 01:15:03,456 So what's the advantage here or what are some 1882 01:15:03,456 --> 01:15:04,796 of the advantages here, if any? 1883 01:15:05,276 --> 01:15:06,986 What do you like about this representation 1884 01:15:06,986 --> 01:15:08,486 of the exact same results? 1885 01:15:08,486 --> 01:15:08,576 Ben. 1886 01:15:09,026 --> 01:15:12,446 >> It's more obvious to the reader what's being shown. 1887 01:15:12,506 --> 01:15:13,396 >> Good. It's more obvious 1888 01:15:13,396 --> 01:15:14,846 to the reader what's being shown, right? 1889 01:15:14,976 --> 01:15:16,856 It's much more straightforward. 1890 01:15:16,856 --> 01:15:18,646 There's the Price; there's the High; there's the Low. 1891 01:15:18,796 --> 01:15:21,466 There's the symbol just as a reminder to myself, perhaps, 1892 01:15:21,466 --> 01:15:23,826 of what I searched for, and it's all very nice 1893 01:15:23,826 --> 01:15:25,146 and user-friendly in this sense. 1894 01:15:25,336 --> 01:15:26,556 But what's a downside here? 1895 01:15:27,626 --> 01:15:27,766 Yeah. 1896 01:15:28,256 --> 01:15:30,166 >> Well, you're sending a lot more data 1897 01:15:30,166 --> 01:15:31,856 since you have open tag [inaudible] 1898 01:15:31,856 --> 01:15:34,706 and then closed tag [inaudible] which is really not necessary -- 1899 01:15:34,736 --> 01:15:34,866 >> Yeah. 1900 01:15:35,016 --> 01:15:35,926 >> -- so much as the [inaudible]. 1901 01:15:36,336 --> 01:15:38,666 >> Good. So, it's just -- it's kind of unnecessarily verbose, 1902 01:15:38,666 --> 01:15:41,166 whereas the JSon version says the word Price once 1903 01:15:41,296 --> 01:15:43,236 and High once and Low once. 1904 01:15:43,596 --> 01:15:45,856 This time this version's literally saying those words 1905 01:15:45,856 --> 01:15:47,826 twice, and it's adding the Quote element, 1906 01:15:47,956 --> 01:15:50,336 and it's reminding you of the symbol GOOG. 1907 01:15:50,336 --> 01:15:53,146 And that is -- we could have still added the symbol GOOG 1908 01:15:53,146 --> 01:15:55,856 to the JSon data but it's just arguably unnecessary. 1909 01:15:55,856 --> 01:15:57,726 If you've requested GOOG, you're going to get back GOOG 1910 01:15:57,726 --> 01:15:59,446 in this case, so that's just wasting some space. 1911 01:15:59,636 --> 01:16:00,466 But it's not bad. 1912 01:16:00,696 --> 01:16:02,716 This is not a bad way of exchanging data. 1913 01:16:02,716 --> 01:16:04,676 It's a little verbose but, frankly, most browsers 1914 01:16:04,676 --> 01:16:06,056 and servers compress information 1915 01:16:06,056 --> 01:16:08,446 with a tool called gzip automatically. 1916 01:16:08,736 --> 01:16:10,856 And so this is not such a big deal, 1917 01:16:10,856 --> 01:16:12,056 the bandwidth savings here. 1918 01:16:12,056 --> 01:16:14,286 But what is, I think, more compelling 1919 01:16:14,396 --> 01:16:16,046 about the JSon approach is when you look 1920 01:16:16,046 --> 01:16:17,656 at how you implement the XML. 1921 01:16:17,966 --> 01:16:23,226 So let's look at here our handler function this time 1922 01:16:23,626 --> 01:16:25,356 for the XML-based version. 1923 01:16:25,606 --> 01:16:28,146 And here's how you can go about parsing XML. 1924 01:16:28,146 --> 01:16:32,036 And I tried to do this as pretty straightforwardly as I could. 1925 01:16:32,386 --> 01:16:33,856 So I'm getting the XML. 1926 01:16:33,856 --> 01:16:36,256 This time I'm getting response.xml instead 1927 01:16:36,256 --> 01:16:37,086 of responseText. 1928 01:16:37,086 --> 01:16:39,356 What was the key difference between responseText 1929 01:16:39,356 --> 01:16:42,726 and response.xml if the server's indeed spitting out XML? 1930 01:16:43,116 --> 01:16:46,006 >> Well, the responseText only gets the actual text that's 1931 01:16:46,096 --> 01:16:47,386 in the webpage. 1932 01:16:47,386 --> 01:16:50,526 The XML gets the actual XML structure, the -- 1933 01:16:50,766 --> 01:16:51,296 >> Okay, good. 1934 01:16:51,296 --> 01:16:53,376 So whereas responseText literally contains text. 1935 01:16:53,656 --> 01:16:56,776 It might look like XML, but then it would be up to me to parse 1936 01:16:56,846 --> 01:16:59,326 that and figure out what's the open tag, what's the close tag, 1937 01:16:59,326 --> 01:17:00,756 what's the attribute, what's the value. 1938 01:17:01,056 --> 01:17:04,626 Response.xml is the result of taking responseText 1939 01:17:04,676 --> 01:17:07,526 and building a DOM out of it, building a tree out of it. 1940 01:17:07,746 --> 01:17:10,456 That's much nicer because now I can just navigate a tree 1941 01:17:10,456 --> 01:17:11,746 that someone else built for me. 1942 01:17:12,046 --> 01:17:15,776 The catch is that now they're getting DOM using DOM functions 1943 01:17:15,776 --> 01:17:19,586 as they're called is not the easiest task in the world. 1944 01:17:19,856 --> 01:17:21,346 Here, for instance, is how we could go 1945 01:17:21,346 --> 01:17:22,336 about updating the price. 1946 01:17:22,806 --> 01:17:26,686 First, I have to search through the XML looking 1947 01:17:26,686 --> 01:17:28,206 for the price elements. 1948 01:17:28,566 --> 01:17:30,276 I didn't have a unique identifier in this case. 1949 01:17:30,276 --> 01:17:31,736 I just had a price element which is kind 1950 01:17:31,736 --> 01:17:33,096 of the right way to do it in XML. 1951 01:17:33,406 --> 01:17:35,276 So I call a get elements by tag name. 1952 01:17:35,276 --> 01:17:37,576 We used that function last week for the blink example. 1953 01:17:38,096 --> 01:17:40,106 The catch here is, that returns an array. 1954 01:17:40,566 --> 01:17:42,196 So I have to have minimally a check 1955 01:17:42,196 --> 01:17:44,606 like if price is dot length equals equals 1, 1956 01:17:44,666 --> 01:17:46,686 that means I have a price element in this DOM. 1957 01:17:47,096 --> 01:17:50,176 If I now do have a price element in this DOM, what do I do? 1958 01:17:50,516 --> 01:17:53,526 Well, I first go into price is bracket zero. 1959 01:17:53,526 --> 01:17:56,036 So give me the zeroth price element in the array 1960 01:17:56,036 --> 01:17:57,506 that happens to be of size one, 1961 01:17:57,506 --> 01:17:59,506 because there's only one price element, hopefully. 1962 01:17:59,936 --> 01:18:01,596 Then I call first child. 1963 01:18:01,896 --> 01:18:03,376 Then I call node value. 1964 01:18:03,966 --> 01:18:05,386 Now why is this? 1965 01:18:05,446 --> 01:18:07,876 Well, if you look back at the XML, 1966 01:18:08,916 --> 01:18:14,436 how many children does the price element have in terms 1967 01:18:14,436 --> 01:18:15,886 of the hierarchy depicted here? 1968 01:18:16,456 --> 01:18:20,916 How many children does the price element have? 1969 01:18:21,456 --> 01:18:21,646 Isaac. 1970 01:18:22,536 --> 01:18:23,726 >> None. 1971 01:18:23,726 --> 01:18:26,776 >> That's, I think, a reasonable takeaway, 1972 01:18:26,776 --> 01:18:27,876 but it's not quite true. 1973 01:18:27,876 --> 01:18:28,766 >> Any -- the actual content 1974 01:18:28,766 --> 01:18:32,016 within it would be a child, right? 1975 01:18:32,016 --> 01:18:32,206 So, one. 1976 01:18:32,206 --> 01:18:33,276 >> It does have one child. 1977 01:18:33,566 --> 01:18:35,476 So the catch is, and if you think way back 1978 01:18:35,476 --> 01:18:36,796 to when we first looked at DOM 1979 01:18:36,856 --> 01:18:39,706 and we actually showed the white space characters backslash n, 1980 01:18:39,706 --> 01:18:42,626 backslash t, and so forth, the reality is in DOM 1981 01:18:42,916 --> 01:18:44,226 that there's more hierarchy 1982 01:18:44,226 --> 01:18:45,776 than you really see here with your eyes. 1983 01:18:45,856 --> 01:18:47,216 The quote element is the root. 1984 01:18:47,826 --> 01:18:50,056 The quote element has at least three children -- 1985 01:18:50,056 --> 01:18:51,546 Price, High, and Low. 1986 01:18:51,856 --> 01:18:53,676 But the price element has a child. 1987 01:18:53,966 --> 01:18:56,006 The child happens to be of type text. 1988 01:18:56,426 --> 01:18:58,446 It's a text node so to speak. 1989 01:18:58,786 --> 01:19:00,276 But it is in fact a child. 1990 01:19:00,586 --> 01:19:03,136 So if we were to draw this tree you would have the quote 1991 01:19:03,136 --> 01:19:05,346 element, you would have a price element, 1992 01:19:05,406 --> 01:19:08,846 and you would have the text node as a child of the latter. 1993 01:19:09,276 --> 01:19:12,766 And that node, the text node itself has a value. 1994 01:19:13,206 --> 01:19:16,526 So when you actually translate that mental model 1995 01:19:16,526 --> 01:19:18,716 to actual code, the catch is 1996 01:19:18,716 --> 01:19:21,646 that you can't just get at the price element. 1997 01:19:21,946 --> 01:19:24,296 You have to get at the price element's first child -- 1998 01:19:24,296 --> 01:19:27,036 it happens to be its only child -- dot node value. 1999 01:19:27,266 --> 01:19:29,106 That is how you actually get that text. 2000 01:19:29,496 --> 01:19:32,136 Then we can go about updating the inner HTML. 2001 01:19:32,436 --> 01:19:34,786 As for the rest of this file, it's pretty much identical. 2002 01:19:34,786 --> 01:19:37,916 The code is the same for Low, the same for High, 2003 01:19:37,916 --> 01:19:40,956 and one of the reasons that XML never quite became 2004 01:19:40,956 --> 01:19:42,666 as popular these days as JSon. 2005 01:19:42,666 --> 01:19:44,806 It's just way too many hoops to jump through, right? 2006 01:19:44,806 --> 01:19:48,086 It's so much easier to say price dot -- rather quote dot price, 2007 01:19:48,086 --> 01:19:50,396 quote dot high, quote dot low, and you're done. 2008 01:19:50,446 --> 01:19:52,616 There's none of this crazy DOM manipulation. 2009 01:19:52,966 --> 01:19:56,336 So it's a well-designed API in that everything's very clean 2010 01:19:56,336 --> 01:19:58,636 and there's a nice model for children and parents 2011 01:19:58,636 --> 01:19:59,956 and ancestors and so forth. 2012 01:20:00,266 --> 01:20:01,156 But it means you have to jump 2013 01:20:01,156 --> 01:20:02,636 through more hoops programmatically 2014 01:20:02,636 --> 01:20:03,846 to actually get at the data. 2015 01:20:03,846 --> 01:20:05,066 Plus it's more verbose. 2016 01:20:05,426 --> 01:20:07,926 So, in short, JSon has very much come into vogue 2017 01:20:07,926 --> 01:20:10,816 as really the preferred transport mechanism for Ajax 2018 01:20:10,886 --> 01:20:13,666 because it's just a little simpler all around. 2019 01:20:15,156 --> 01:20:20,826 Any questions on the XML or the JSon variants? 2020 01:20:22,116 --> 01:20:22,806 All right. 2021 01:20:22,806 --> 01:20:25,666 So let's take things a little further here. 2022 01:20:25,666 --> 01:20:27,336 Let me open up this example 2023 01:20:27,626 --> 01:20:30,876 and show really the true JavaScript way to do this. 2024 01:20:30,876 --> 01:20:33,646 So, for now, let's look first at the HTML. 2025 01:20:33,996 --> 01:20:35,406 Notice I have a symbol 2026 01:20:35,626 --> 01:20:38,896 and notice now I have a Submit button. 2027 01:20:38,896 --> 01:20:40,286 But what do I not have -- 2028 01:20:40,346 --> 01:20:41,736 or what do I have now at the bottom? 2029 01:20:42,076 --> 01:20:44,706 A div id of quotes at the very bottom. 2030 01:20:44,706 --> 01:20:47,076 So somehow I want to put in my Price, or my High, 2031 01:20:47,076 --> 01:20:49,616 or my Low into that development as before. 2032 01:20:49,976 --> 01:20:52,886 So earlier I said that the inner HTML property work. 2033 01:20:52,966 --> 01:20:55,186 It's nice and simple but it's not really the right way 2034 01:20:55,186 --> 01:20:55,796 to do things. 2035 01:20:55,796 --> 01:20:57,896 If you really want to use JavaScript 2036 01:20:58,446 --> 01:21:03,236 to create new DOM nodes the right way you have to jump 2037 01:21:03,236 --> 01:21:04,436 through a few more hoops. 2038 01:21:04,566 --> 01:21:06,436 And those hoops look as follows. 2039 01:21:06,436 --> 01:21:08,846 Let me scroll up to my quote function, 2040 01:21:09,176 --> 01:21:11,846 and notice that this quote function is pretty much -- 2041 01:21:11,846 --> 01:21:15,166 whoops, is pretty much the same as my very first version. 2042 01:21:15,656 --> 01:21:17,436 But I'm going to make a couple of changes here. 2043 01:21:17,836 --> 01:21:21,316 One, notice what I'm doing with onreadystatechange? 2044 01:21:21,376 --> 01:21:24,186 What am I doing this time that I didn't do in previous examples? 2045 01:21:24,736 --> 01:21:24,886 Axle? 2046 01:21:26,276 --> 01:21:28,356 >> Well, you have an anonymous function [inaudible] what 2047 01:21:28,356 --> 01:21:34,446 actually happens when you change the state is that I'm saying -- 2048 01:21:34,446 --> 01:21:35,576 is that I'm calling function. 2049 01:21:35,766 --> 01:21:36,466 >> Yeah, exactly. 2050 01:21:36,466 --> 01:21:38,416 Rather than saying onreadystatechange equals 2051 01:21:38,416 --> 01:21:40,966 handler and then defining handler elsewhere, 2052 01:21:41,196 --> 01:21:43,886 this time I'm just assigning onreadystatechange 2053 01:21:43,886 --> 01:21:45,756 to an anonymous function, anonymous in the sense 2054 01:21:45,756 --> 01:21:48,066 that there's clearly no name for this function given. 2055 01:21:48,336 --> 01:21:50,336 I just say function open paren, close paren. 2056 01:21:50,726 --> 01:21:54,156 Now why is this a reasonable if not compelling thing to do? 2057 01:21:54,846 --> 01:21:58,016 Why make the handler function anonymous function as opposed 2058 01:21:58,016 --> 01:21:59,376 to giving it a name like handler? 2059 01:21:59,876 --> 01:22:03,356 [Inaudible]. 2060 01:22:03,856 --> 01:22:07,356 >> Because you didn't want to -- 2061 01:22:07,546 --> 01:22:09,146 you wanted to avoid calling handler 2062 01:22:09,146 --> 01:22:11,256 and you have to [inaudible]. 2063 01:22:11,486 --> 01:22:14,166 >> Yeah. No, it's just cleaner design 2064 01:22:14,166 --> 01:22:17,166 because in all previous examples I have this function called 2065 01:22:17,166 --> 01:22:19,346 handler, but I'm never calling it directly. 2066 01:22:19,346 --> 01:22:22,696 In fact, all I'm doing is assigning its name as the value 2067 01:22:22,696 --> 01:22:23,676 of onreadystatechange. 2068 01:22:23,676 --> 01:22:26,646 And the only reason handler exists is so that guy, 2069 01:22:26,646 --> 01:22:29,646 the onreadystatechange property, can have a value. 2070 01:22:29,996 --> 01:22:32,796 So in this sense it's just better design arguably 2071 01:22:32,796 --> 01:22:34,966 to eliminate the name of the function altogether so, one, 2072 01:22:34,966 --> 01:22:37,476 you don't accidentally call it, and that's maybe unlikely. 2073 01:22:37,716 --> 01:22:40,676 But there's just no need to have an additional name like handler 2074 01:22:40,946 --> 01:22:42,296 if you can just assign it directly 2075 01:22:42,296 --> 01:22:43,416 to the property as follows. 2076 01:22:43,606 --> 01:22:45,566 And the white space I've put here is meaningless. 2077 01:22:45,836 --> 01:22:47,716 In fact, a very common paradigm is 2078 01:22:47,776 --> 01:22:49,266 to do this all in the same line. 2079 01:22:49,266 --> 01:22:55,356 So if I scroll back to this properties initialization doing 2080 01:22:55,356 --> 01:22:59,346 something like this is quite common as well, 2081 01:22:59,346 --> 01:23:01,206 where you just do that all on one line. 2082 01:23:01,206 --> 01:23:03,856 And then even sometimes putting the open curly brace, whoops, 2083 01:23:04,246 --> 01:23:06,246 the open curly brace on that line as well. 2084 01:23:06,796 --> 01:23:11,216 So scrolling down now, these are actual other DOM functions. 2085 01:23:11,546 --> 01:23:15,276 So if instead of just plugging stuff into inner HTML I want 2086 01:23:15,276 --> 01:23:16,886 to truly update the DOM. 2087 01:23:16,886 --> 01:23:19,266 And by that I mean create a new node for the Price. 2088 01:23:19,686 --> 01:23:21,746 Create a new child for the Price's value. 2089 01:23:22,066 --> 01:23:23,426 We have to do things as follows. 2090 01:23:23,796 --> 01:23:26,476 One, once I'm sure that readystate is 4 2091 01:23:26,476 --> 01:23:29,536 and status is 200, I'm going to go ahead and create a div, 2092 01:23:29,706 --> 01:23:31,456 literally create a div by way 2093 01:23:31,456 --> 01:23:34,126 of document.createElement quote/unquote div. 2094 01:23:34,656 --> 01:23:35,576 So what is this doing? 2095 01:23:35,756 --> 01:23:37,596 This is creating in memory one 2096 01:23:37,596 --> 01:23:39,916 of those rectangles we keep drawing as pictures, 2097 01:23:40,266 --> 01:23:43,546 and it's of type -- it's an element of type div, 2098 01:23:43,796 --> 01:23:45,056 but it's not in my Dom yet. 2099 01:23:45,106 --> 01:23:48,246 It just exists somewhere in RAM and I have access 2100 01:23:48,246 --> 01:23:49,726 to it via a variable called div. 2101 01:23:49,876 --> 01:23:52,096 So it's just creating one of those rectangles we keep drawing 2102 01:23:52,226 --> 01:23:54,156 in RAM, and it's a div. 2103 01:23:54,566 --> 01:23:55,386 One am I next doing? 2104 01:23:55,386 --> 01:23:58,716 I'm creating a text node whose value is apparently -- 2105 01:23:58,776 --> 01:24:01,236 and let me go over -- scroll over to the right a bit more. 2106 01:24:01,826 --> 01:24:05,166 A little hackish at the moment, but the value 2107 01:24:05,166 --> 01:24:06,466 of this text node is going 2108 01:24:06,466 --> 01:24:10,386 to be symbol plus colon plus response text. 2109 01:24:10,756 --> 01:24:12,206 So it's just a concatenation of strings. 2110 01:24:12,206 --> 01:24:13,956 So we'll see what that looks like in just a moment. 2111 01:24:14,326 --> 01:24:16,376 But create text node takes an argument. 2112 01:24:16,756 --> 01:24:19,486 A text node doesn't have a name like an element has a name. 2113 01:24:19,756 --> 01:24:21,626 An example name for an element is div. 2114 01:24:21,766 --> 01:24:23,926 But text nodes are just text so they do have values. 2115 01:24:24,396 --> 01:24:25,226 So the argument 2116 01:24:25,226 --> 01:24:29,276 to a CreateTextNode function call is what value do you want 2117 01:24:29,276 --> 01:24:30,156 to give that text node. 2118 01:24:30,606 --> 01:24:31,286 All right. 2119 01:24:31,426 --> 01:24:33,256 So now what do I do in my third line? 2120 01:24:33,436 --> 01:24:35,036 Well, now I have a div in memory. 2121 01:24:35,236 --> 01:24:36,716 I also have a text node in memory. 2122 01:24:36,906 --> 01:24:39,666 I need to start creating some hierarchy so I'm going 2123 01:24:39,666 --> 01:24:42,156 to call div.appendchildtext. 2124 01:24:43,556 --> 01:24:44,956 So if this is my div element, 2125 01:24:45,096 --> 01:24:47,656 this is my text node, what am I doing? 2126 01:24:48,096 --> 01:24:49,646 How should I move my hands to represent this? 2127 01:24:49,646 --> 01:24:49,926 Axle? 2128 01:24:50,286 --> 01:24:54,496 >> Well, the text becomes a child of the div. 2129 01:24:54,496 --> 01:24:55,086 >> Exactly. 2130 01:24:55,086 --> 01:24:58,746 So we're taking two separate nodes which exist 2131 01:24:58,746 --> 01:25:01,316 as separate variables, separately in RAM right now, 2132 01:25:01,316 --> 01:25:04,476 a div and a text node, and I'm connecting them effectively 2133 01:25:04,476 --> 01:25:04,836 like this. 2134 01:25:05,146 --> 01:25:07,956 Now I have a tree of sorts, a tree with two nodes. 2135 01:25:07,956 --> 01:25:10,766 But where do I want to put this mini little tree 2136 01:25:10,766 --> 01:25:11,796 that I've just constructed? 2137 01:25:11,986 --> 01:25:14,586 I want to cram it into the actual DOM of the page. 2138 01:25:14,846 --> 01:25:18,066 So my last call there, document.getElementById, 2139 01:25:18,066 --> 01:25:21,396 of quotes -- that's the div that had nothing in it. 2140 01:25:21,856 --> 01:25:23,106 I call appendChild. 2141 01:25:23,366 --> 01:25:25,786 Now that div at the moment has no children. 2142 01:25:25,786 --> 01:25:27,696 Recall that it was open div. 2143 01:25:27,696 --> 01:25:30,006 ID equals quotes, close div. 2144 01:25:30,036 --> 01:25:31,406 There is nothing in-between it. 2145 01:25:31,716 --> 01:25:35,086 So what appendChild is doing here is it's cramming inside 2146 01:25:35,086 --> 01:25:38,416 of that open div tag and the close div tag this new div 2147 01:25:38,656 --> 01:25:39,686 that has a text element. 2148 01:25:40,486 --> 01:25:42,336 So let's see this in the browser 2149 01:25:42,336 --> 01:25:45,166 and then see this in the debugger. 2150 01:25:45,826 --> 01:25:47,946 Let's go to Ajax9 here. 2151 01:25:48,976 --> 01:25:50,906 Type in GOOG, enter. 2152 01:25:51,156 --> 01:25:53,666 And sure enough, I get this arbitrary string down here. 2153 01:25:53,666 --> 01:25:54,526 It's not elegant. 2154 01:25:54,526 --> 01:25:56,126 We've kind of taken a step backwards in terms 2155 01:25:56,126 --> 01:25:57,556 of formatting, but that's fine. 2156 01:25:57,556 --> 01:25:59,296 I just wanted to plug in some value there. 2157 01:25:59,686 --> 01:26:09,356 Let me now open up the inspector and go to the DOM view. 2158 01:26:09,706 --> 01:26:12,796 And let me scroll down to this guy here. 2159 01:26:12,796 --> 01:26:14,676 So notice that's what that looks like at the moment. 2160 01:26:14,676 --> 01:26:15,616 It has no children. 2161 01:26:16,026 --> 01:26:20,386 So if I go up here and submit this form and click Get Quote, 2162 01:26:20,926 --> 01:26:23,676 now notice what just appeared in the debugger here. 2163 01:26:24,186 --> 01:26:27,626 A little arrow which suggests now it does have children. 2164 01:26:27,906 --> 01:26:30,976 Open it up and there's the div we just created. 2165 01:26:31,516 --> 01:26:31,676 Axle. 2166 01:26:32,156 --> 01:26:32,396 >> Question. 2167 01:26:32,476 --> 01:26:43,286 If quotes is already in div, why would you need to append text 2168 01:26:43,356 --> 01:26:48,156 to a div instead of appending text directly to the quotes. 2169 01:26:48,156 --> 01:26:48,796 >> Good question. 2170 01:26:48,796 --> 01:26:52,716 Why do -- if quotes is already a div, why do I need 2171 01:26:53,366 --> 01:26:54,816 to put a div in a div? 2172 01:26:54,816 --> 01:26:57,256 Absolutely no reason at all. 2173 01:26:57,256 --> 01:27:05,626 I simply wanted my code example to create a mini hierarchy first 2174 01:27:05,626 --> 01:27:08,436 and then plug it in somewhere. 2175 01:27:08,436 --> 01:27:13,416 So to do that I just created a div placeholder. 2176 01:27:13,416 --> 01:27:16,926 I could have technically -- notice what the DOM looks like. 2177 01:27:17,136 --> 01:27:18,106 Let me zoom in on this. 2178 01:27:18,106 --> 01:27:22,036 Notice that technically if I really wanted 2179 01:27:22,036 --> 01:27:25,266 to be fancy I could omit that placeholder, 2180 01:27:25,266 --> 01:27:27,226 the div with an ID of quotes altogether. 2181 01:27:27,226 --> 01:27:29,296 And I could just remove this altogether, 2182 01:27:29,296 --> 01:27:30,046 and then I could just use -- 2183 01:27:30,046 --> 01:27:32,496 in JavaScript I could get the body element 2184 01:27:32,496 --> 01:27:34,926 and then append a new child to the body 2185 01:27:34,926 --> 01:27:37,726 so that it would similarly end up all the way 2186 01:27:37,836 --> 01:27:40,536 at the bottom of the page. 2187 01:27:40,536 --> 01:27:41,296 All right. 2188 01:27:41,296 --> 01:27:43,566 So, if I somehow access document.body, 2189 01:27:43,566 --> 01:27:46,206 appended it to the body, it would end 2190 01:27:46,206 --> 01:27:47,766 up in the same location. 2191 01:27:48,386 --> 01:27:54,826 So if you think about now a chat client for Facebook or the like, 2192 01:27:54,826 --> 01:28:01,136 generally the chat messages show up at the bottom of the screen. 2193 01:28:01,426 --> 01:28:03,756 You get another [inaudible] at the bottom, 2194 01:28:03,756 --> 01:28:05,676 at the bottom, at the bottom. 2195 01:28:05,676 --> 01:28:07,806 This is exactly what's going on. 2196 01:28:08,046 --> 01:28:10,556 The Facebook JavaScript code is essentially adding 2197 01:28:10,866 --> 01:28:14,576 to whatever your little chat window looks 2198 01:28:14,846 --> 01:28:21,046 like to the very end of the document another node, 2199 01:28:21,046 --> 01:28:24,466 another node, another node, and that's what's putting all 2200 01:28:24,466 --> 01:28:26,686 of the various chats in the screen. 2201 01:28:26,686 --> 01:28:30,926 So if you are a Facebook user or a Google G-chat or anything 2202 01:28:31,496 --> 01:28:34,836 like that, you can actually watch this. 2203 01:28:34,836 --> 01:28:41,556 Like tonight, the next time you're chatting with someone, 2204 01:28:41,556 --> 01:28:46,796 or right now if you're chatting with someone in class, go ahead 2205 01:28:46,796 --> 01:28:50,226 and open up Chrome's Inspector or whatever browser you're using 2206 01:28:50,336 --> 01:28:54,476 and watch the DOM actually get updated everytime a friend sends 2207 01:28:54,476 --> 01:28:55,866 you an instant message. 2208 01:28:56,326 --> 01:29:00,166 You'll likely see that new spans or new divs 2209 01:29:00,166 --> 01:29:02,286 or new somethings are being added and added and added 2210 01:29:02,286 --> 01:29:04,456 to the DOM based on code quite like this. 2211 01:29:04,456 --> 01:29:07,206 So the biggest downside here, arguably, 2212 01:29:07,206 --> 01:29:09,536 is the fact that this is a lot of code to be writing, right? 2213 01:29:09,536 --> 01:29:11,746 In version 9 we've just kind 2214 01:29:11,746 --> 01:29:13,726 of made our lives even more difficult by having 2215 01:29:13,726 --> 01:29:15,256 to introduce all of these DOM functions. 2216 01:29:15,256 --> 01:29:17,966 So let's actually take a look at a slightly cleaner version. 2217 01:29:17,966 --> 01:29:21,836 Oh, as an aside, we did things out of order. 2218 01:29:21,836 --> 01:29:26,186 The JSon examples that we introduced a moment ago 2219 01:29:26,216 --> 01:29:27,886 when I was doing it on the fly, 2220 01:29:28,516 --> 01:29:30,996 there are canonical examples in Ajax 10 and 11. 2221 01:29:31,026 --> 01:29:32,346 So, if you want to actually see clean code versions 2222 01:29:32,376 --> 01:29:33,696 that we didn't do on the fly, in 10 and 11. 2223 01:29:33,726 --> 01:29:34,986 But in 12 I offer something that's even sexier. 2224 01:29:35,016 --> 01:29:36,396 So down here I again have some HTML that looks like this. 2225 01:29:36,426 --> 01:29:37,146 What's nice about this HTML is 2226 01:29:37,176 --> 01:29:38,136 that I have three separate placeholders 2227 01:29:38,166 --> 01:29:38,826 for Price, for High, and Low. 2228 01:29:38,856 --> 01:29:39,636 So this is, at least in design, 2229 01:29:39,666 --> 01:29:40,866 probably the best approach we've taken thus far. 2230 01:29:40,896 --> 01:29:41,316 The HTML is ugly. 2231 01:29:41,346 --> 01:29:42,306 It looks like a black and white window. 2232 01:29:42,336 --> 01:29:43,926 But at least we have deliberate placeholders for this text. 2233 01:29:43,956 --> 01:29:45,366 But now what's going to be different is my JavaScript. 2234 01:29:45,396 --> 01:29:46,686 All of that code we've been writing, the quote function, 2235 01:29:46,716 --> 01:29:48,096 the handler function, the try, the catch, all of that stuff, 2236 01:29:48,126 --> 01:29:49,176 I propose we can simplify down to this. 2237 01:29:49,206 --> 01:29:50,556 So this is an example of a library called JQuery. 2238 01:29:50,586 --> 01:29:51,966 You might have used this already for various projects, 2239 01:29:51,996 --> 01:29:53,106 but what this particular function is doing, 2240 01:29:53,136 --> 01:29:54,546 in this case the Ajax function, is simplifying a lot 2241 01:29:54,576 --> 01:29:55,746 of the stuff we just wrote and taking away all 2242 01:29:55,776 --> 01:29:56,826 of the common code, all of the try, the catch, 2243 01:29:56,856 --> 01:29:58,176 the Microsoft stuff, and just hiding that from you 2244 01:29:58,206 --> 01:29:58,926 so that you can focus really 2245 01:29:58,956 --> 01:30:00,066 on doing the interesting part of the coding. 2246 01:30:00,096 --> 01:30:01,536 So let's see if we can't tease apart what's going on here. 2247 01:30:01,566 --> 01:30:02,976 So in JQuery a very common paradigm is the dollar sign. 2248 01:30:03,396 --> 01:30:05,616 Does anyone know what the dollar sign is or represents? 2249 01:30:05,616 --> 01:30:13,216 So it's kind of -- whereas PHP, 2250 01:30:13,216 --> 01:30:15,186 the dollar sign has special meaning. 2251 01:30:15,186 --> 01:30:16,546 It's used at the beginning of variables. 2252 01:30:16,826 --> 01:30:19,886 In JavaScript the dollar sign is a perfect valid symbol 2253 01:30:19,886 --> 01:30:20,656 for a variable. 2254 01:30:20,926 --> 01:30:25,296 So it turns out in the JQuery library, which lives at URLs 2255 01:30:25,296 --> 01:30:28,576 like this -- code.JQuery.com or Google hosts it also, 2256 01:30:28,576 --> 01:30:31,146 and it's available for download, for free, elsewhere, 2257 01:30:31,506 --> 01:30:34,166 there exists an object called JQuery. 2258 01:30:34,746 --> 01:30:37,046 So there is essentially the equivalent of this, 2259 01:30:37,106 --> 01:30:38,796 of var JQuery gets this, 2260 01:30:39,206 --> 01:30:41,486 and someone has implemented the dot-dot-dot. 2261 01:30:41,626 --> 01:30:43,916 The JQuery object is a big library with lots 2262 01:30:43,916 --> 01:30:46,346 of functionality and the variable is typically 2263 01:30:46,346 --> 01:30:47,196 called JQuery. 2264 01:30:47,606 --> 01:30:50,696 All someone has done in the JQuery library is this -- 2265 01:30:51,076 --> 01:30:53,346 var dollar sign gets JQuery, 2266 01:30:53,666 --> 01:30:57,096 thereby making an alias called dollar sign for JQuery. 2267 01:30:57,466 --> 01:31:01,196 So even though the dollar sign in JQuery code looks 2268 01:31:01,196 --> 01:31:05,156 like of syntactically new, it's just the word JQuery. 2269 01:31:05,466 --> 01:31:09,146 So it's as though you have -- 2270 01:31:10,746 --> 01:31:12,136 let's see if I can do this properly 2271 01:31:12,136 --> 01:31:13,396 without breaking everything. 2272 01:31:13,936 --> 01:31:16,846 Do this. JQuery. 2273 01:31:17,896 --> 01:31:19,786 Okay. So this is really what we're doing. 2274 01:31:20,166 --> 01:31:22,876 There is a JQuery function that someone wrote that is -- 2275 01:31:22,876 --> 01:31:23,936 that's the dot-dot-dot. 2276 01:31:24,476 --> 01:31:26,976 And you're just calling JQuery all over the place. 2277 01:31:27,346 --> 01:31:29,146 But the dollar sign, they just look sexier. 2278 01:31:29,276 --> 01:31:29,826 That's why. 2279 01:31:30,136 --> 01:31:32,916 Other libraries -- there's a JavaScript library called 2280 01:31:32,916 --> 01:31:36,266 underscore where all of the functions are prefixed 2281 01:31:36,386 --> 01:31:38,026 with an underscore character. 2282 01:31:38,026 --> 01:31:39,316 So they've laid claim to that one. 2283 01:31:39,756 --> 01:31:40,086 All right. 2284 01:31:40,226 --> 01:31:41,556 So what is going on here? 2285 01:31:41,806 --> 01:31:45,346 Well, in JQuery you have the ability 2286 01:31:45,346 --> 01:31:49,186 to wrap certain standard JavaScript objects 2287 01:31:49,796 --> 01:31:51,226 to give them more functionality. 2288 01:31:51,456 --> 01:31:55,236 So, for instance, dollar sign open paren document close paren 2289 01:31:55,596 --> 01:31:58,496 is clearly passing the document, global object, 2290 01:31:58,946 --> 01:32:00,346 into the JQuery function. 2291 01:32:00,816 --> 01:32:01,776 And what's that doing? 2292 01:32:01,926 --> 01:32:04,216 Well, it's returning to a special JQuery object 2293 01:32:04,216 --> 01:32:05,656 that has additional functionality. 2294 01:32:05,876 --> 01:32:06,986 We've seen some functionality 2295 01:32:06,986 --> 01:32:11,006 like document .getGetElementById, 2296 01:32:11,746 --> 01:32:16,776 document.getElement ByTagName, and so forth. 2297 01:32:17,256 --> 01:32:20,286 This is just returning to me a document object 2298 01:32:20,376 --> 01:32:21,426 with more functionality. 2299 01:32:21,486 --> 01:32:22,406 For instance, one piece 2300 01:32:22,406 --> 01:32:25,636 of functionality is apparently a new method called ready. 2301 01:32:25,966 --> 01:32:30,776 The ready method is an event handler that comes with JQuery 2302 01:32:31,236 --> 01:32:34,306 that allows you to specify a chunk of code 2303 01:32:34,476 --> 01:32:37,556 that should be called as soon as your DOM is ready. 2304 01:32:37,926 --> 01:32:40,756 In other words, as soon as your very big HTML page has been 2305 01:32:40,756 --> 01:32:42,326 loaded top to bottom, left to right, 2306 01:32:42,586 --> 01:32:44,066 and the entire thing has been parsed, 2307 01:32:44,376 --> 01:32:46,416 and your DOM is therefore ready. 2308 01:32:46,976 --> 01:32:48,586 Why is this relevant? 2309 01:32:48,586 --> 01:32:52,866 Well, recall that you can put script tags in the head 2310 01:32:52,996 --> 01:32:54,646 of what -- your webpage, right. 2311 01:32:54,646 --> 01:32:56,156 We're doing so here, in fact. 2312 01:32:56,156 --> 01:32:58,246 You can put script tags in the head of your webpage. 2313 01:32:58,586 --> 01:33:02,016 The problem is that HTML files are read top to bottom 2314 01:33:02,266 --> 01:33:04,916 which means when the browser encounters a script tag 2315 01:33:05,226 --> 01:33:07,926 and it mentions a JavaScript file or a JavaScript function, 2316 01:33:07,926 --> 01:33:09,366 it's going to execute right then and there. 2317 01:33:10,006 --> 01:33:13,306 However, in the head of your webpage what does not yet exist 2318 01:33:13,306 --> 01:33:16,476 in memory when the HTML file is being read top to bottom? 2319 01:33:16,966 --> 01:33:17,436 >> Well, the body. 2320 01:33:17,546 --> 01:33:19,786 So if you reference say an element with an id, 2321 01:33:19,786 --> 01:33:21,786 it's not going to exist yet. 2322 01:33:21,926 --> 01:33:24,666 >> Exactly, because webpages are read and parsed 2323 01:33:24,666 --> 01:33:26,246 and the Dom is built top to bottom, 2324 01:33:26,526 --> 01:33:28,646 if you execute JavaScript code in your head 2325 01:33:28,646 --> 01:33:32,396 and that JavaScript code assumes that your DOM has a body, well, 2326 01:33:32,396 --> 01:33:34,846 you've screwed up because at that point in time, 2327 01:33:35,216 --> 01:33:38,206 by nature of chronology, the body might not yet exist. 2328 01:33:38,206 --> 01:33:40,346 So you might try touching or changing 2329 01:33:40,346 --> 01:33:43,936 or accessing body elements -- divs, spans, whatever -- 2330 01:33:44,146 --> 01:33:45,856 that haven't yet been constructed in memory. 2331 01:33:46,116 --> 01:33:48,456 So a very common paradigm when writing JavaScript code 2332 01:33:48,456 --> 01:33:51,016 in general, if you've embedded it in your webpage 2333 01:33:51,016 --> 01:33:53,186 in particular, is to do something like this. 2334 01:33:53,646 --> 01:33:55,626 Calling document.ready. 2335 01:33:55,966 --> 01:33:58,376 Then passing an anonymous function and then 2336 01:33:58,376 --> 01:34:01,286 in that anonymous function writing the code that you want 2337 01:34:01,286 --> 01:34:03,736 to execute once the whole DOM has been loaded. 2338 01:34:04,146 --> 01:34:07,446 So the alternative to this to be clear would be 2339 01:34:08,136 --> 01:34:12,306 to just dive right in and kind of blindly say like la-la-la, 2340 01:34:12,306 --> 01:34:15,836 let's start calling this code right now. 2341 01:34:16,136 --> 01:34:18,606 But this is bad because if this code assumes 2342 01:34:19,166 --> 01:34:21,676 that you have a DOM already for the body, 2343 01:34:22,126 --> 01:34:24,096 it might be an incorrect assumption. 2344 01:34:24,506 --> 01:34:26,516 So, in short, these two lines -- 2345 01:34:26,676 --> 01:34:28,346 this first line specifies 2346 01:34:28,396 --> 01:34:30,706 when the document is ready, do the following. 2347 01:34:31,016 --> 01:34:32,326 Well, what do we do first? 2348 01:34:32,496 --> 01:34:35,396 Even if you don't know JQuery, what does the second line 2349 01:34:35,396 --> 01:34:37,476 of code here appear to be doing? 2350 01:34:37,826 --> 01:34:40,786 Dollar sign form.submitfunction. 2351 01:34:42,186 --> 01:34:42,796 What's this doing? 2352 01:34:43,146 --> 01:34:43,246 Yeah. 2353 01:34:43,856 --> 01:34:45,636 >> Well, it adds an event handler 2354 01:34:45,736 --> 01:34:46,956 for submit to the fourth. 2355 01:34:47,116 --> 01:34:49,326 And you showed us also the form 2356 01:34:49,326 --> 01:34:52,266 that you had deleted all the actions and all the on submit -- 2357 01:34:52,266 --> 01:34:52,526 >> Good. 2358 01:34:52,526 --> 01:34:52,766 >> -- forms. 2359 01:34:52,766 --> 01:34:54,776 JQuery does that for you. 2360 01:34:54,776 --> 01:34:57,936 So when you submit the form you have another anonymous function. 2361 01:34:58,456 --> 01:34:58,996 >> Exactly. 2362 01:34:58,996 --> 01:35:01,836 So recall in every previous example we took the sort 2363 01:35:01,836 --> 01:35:05,096 of quick and dirty approach of having an on submit attribute 2364 01:35:05,306 --> 01:35:08,836 on my form and we said on submit equals quote/unquote the 2365 01:35:08,836 --> 01:35:09,596 quote function. 2366 01:35:09,596 --> 01:35:11,576 Quote, open paren, close paren, return false. 2367 01:35:11,946 --> 01:35:12,506 So that's fine. 2368 01:35:12,506 --> 01:35:14,336 It's clearly worked for all of these examples. 2369 01:35:14,656 --> 01:35:17,326 But it's kind of bad design because it would be better 2370 01:35:17,326 --> 01:35:19,986 if our HTML is our HTML, our markup. 2371 01:35:20,146 --> 01:35:23,076 And all of our programming logic is in a JavaScript file, 2372 01:35:23,076 --> 01:35:24,876 or at least separated from our data. 2373 01:35:24,876 --> 01:35:26,246 So, again, there's this principal 2374 01:35:27,056 --> 01:35:29,256 of separating your data from your logic, 2375 01:35:29,476 --> 01:35:32,556 your data from your logic and from your presentation. 2376 01:35:32,556 --> 01:35:35,196 Think back to NVC, is very similar in spirit there. 2377 01:35:35,646 --> 01:35:40,136 So this second line, where we say dollar sign form.submit. 2378 01:35:40,416 --> 01:35:45,786 This is a way of saying attach to the element in my HTML 2379 01:35:46,206 --> 01:35:50,856 that has an ID of form the following on submit handler. 2380 01:35:51,166 --> 01:35:53,606 So it's a way of adding after the fact 2381 01:35:53,896 --> 01:35:57,316 to your DOM even listeners to various HTML elements 2382 01:35:57,316 --> 01:35:59,626 without having to resort to the messier approach 2383 01:35:59,626 --> 01:36:01,626 of on submit equals quote/unquote 2384 01:36:01,796 --> 01:36:03,016 and then some JavaScript code. 2385 01:36:03,356 --> 01:36:07,096 This approach allows us to keep our HTML beautifully pristine 2386 01:36:07,336 --> 01:36:10,046 with no JavaScript code comingled. 2387 01:36:10,256 --> 01:36:11,886 It's just HTML markup. 2388 01:36:11,886 --> 01:36:13,246 Couldn't be more uninteresting. 2389 01:36:13,626 --> 01:36:16,316 But, nonetheless, because I've given this form an ID, 2390 01:36:16,476 --> 01:36:18,886 arbitrarily of form, it means 2391 01:36:18,886 --> 01:36:22,376 that I can access it programmatically up top here 2392 01:36:23,146 --> 01:36:27,096 by saying dollar sign quote/unquote hash form. 2393 01:36:27,406 --> 01:36:29,136 So those of you who are comfortable with CSS know 2394 01:36:29,136 --> 01:36:31,946 that this hash symbols is actually quite common. 2395 01:36:32,376 --> 01:36:33,436 The has symbol in front 2396 01:36:33,436 --> 01:36:36,826 of a word means give me the element whose ID is form. 2397 01:36:36,826 --> 01:36:38,156 In CSS, if you have a period, 2398 01:36:38,156 --> 01:36:41,086 that means give me the element whose class is foo, 2399 01:36:41,086 --> 01:36:42,606 if it's dot foo, and so forth. 2400 01:36:42,856 --> 01:36:43,896 So, the same idea there. 2401 01:36:44,176 --> 01:36:45,066 Okay. So what's happened? 2402 01:36:45,686 --> 01:36:48,606 To recap. Line one says when the document is ready, 2403 01:36:48,606 --> 01:36:49,336 do the following. 2404 01:36:49,676 --> 01:36:53,376 Line two says, when that form is submitted, do the following. 2405 01:36:53,666 --> 01:36:55,776 So anonymous functions are helping us express 2406 01:36:55,776 --> 01:36:56,726 that programmatically. 2407 01:36:56,726 --> 01:36:59,256 Do the following means call the following function. 2408 01:36:59,256 --> 01:37:01,346 It doesn't need a name because I just need it done once. 2409 01:37:01,726 --> 01:37:02,986 But call the following function. 2410 01:37:03,336 --> 01:37:05,856 Now this one syntactically is a little different, 2411 01:37:06,346 --> 01:37:11,626 but dollar sign dot Ajax is apparently doing what? 2412 01:37:12,196 --> 01:37:17,306 This is calling a method called Ajax on an object called what? 2413 01:37:20,616 --> 01:37:22,986 Dollar sign dot Ajax. 2414 01:37:23,796 --> 01:37:25,606 This is really just calling -- 2415 01:37:26,016 --> 01:37:32,786 >> Well, the object is called nothing 2416 01:37:32,786 --> 01:37:34,516 because Ajax doesn't need an object. 2417 01:37:34,646 --> 01:37:35,856 That kind of just [inaudible]. 2418 01:37:35,926 --> 01:37:37,336 >> Not quite. 2419 01:37:37,336 --> 01:37:41,686 So, again, remember this dollar sign is just a synonym. 2420 01:37:41,686 --> 01:37:44,656 It's really calling an object called JQueries Ajax method. 2421 01:37:44,656 --> 01:37:45,966 So if we think of it -- foo. 2422 01:37:45,966 --> 01:37:47,586 It doesn't matter what the object is called. 2423 01:37:47,586 --> 01:37:48,986 But this is, in fact, an object. 2424 01:37:48,986 --> 01:37:51,306 So one of the learning curve aspects of JQuery initially is 2425 01:37:51,306 --> 01:37:55,376 that it looks like we're introducing a whole new syntax 2426 01:37:55,376 --> 01:37:58,026 here -- dollar signs and dots and whatnot. 2427 01:37:58,026 --> 01:37:58,716 None of this is new. 2428 01:37:58,716 --> 01:38:01,606 It's just the JQuery folks thought it would look cool, 2429 01:38:01,606 --> 01:38:04,536 and it kind of does, to just say dollar sign everywhere instead 2430 01:38:04,536 --> 01:38:07,006 of a more verbose J-Q-U-E-R-Y, and so forth. 2431 01:38:07,006 --> 01:38:08,396 So this is just a method call. 2432 01:38:08,396 --> 01:38:10,626 Call a method called Ajax on the JQuery object. 2433 01:38:10,626 --> 01:38:11,296 or more loosely. 2434 01:38:11,296 --> 01:38:14,966 call the Ajax method in the JQuery library, passing in what? 2435 01:38:14,966 --> 01:38:18,356 What type of argument does the Ajax function apparently take? 2436 01:38:19,416 --> 01:38:24,486 Or rather, how many arguments does it take? 2437 01:38:24,686 --> 01:38:24,776 Yeah? 2438 01:38:25,326 --> 01:38:25,436 >> Three? 2439 01:38:26,966 --> 01:38:29,366 >> It apparently take three. 2440 01:38:29,366 --> 01:38:30,706 And what are they? 2441 01:38:31,156 --> 01:38:34,966 >> URL, data, and -- oh -- oh, yeah. 2442 01:38:35,476 --> 01:38:37,236 URL, data, and success. 2443 01:38:37,836 --> 01:38:41,256 >> Okay. Close. 2444 01:38:42,106 --> 01:38:44,046 To the technical response is not right, 2445 01:38:44,596 --> 01:38:45,396 but you're on the right track. 2446 01:38:45,396 --> 01:38:45,586 Jack. 2447 01:38:45,856 --> 01:38:46,016 >> One. 2448 01:38:46,276 --> 01:38:46,836 >> It takes one. 2449 01:38:46,836 --> 01:38:49,166 Why does the Ajax method take one argument? 2450 01:38:49,306 --> 01:38:50,516 >> It's taking one array 2451 01:38:50,516 --> 01:38:53,146 that includes the URL, data, and success. 2452 01:38:53,146 --> 01:38:53,616 >> Oh, so close. 2453 01:38:53,676 --> 01:38:54,466 Not taking an array. 2454 01:38:55,116 --> 01:38:57,816 It's taking an? 2455 01:39:01,116 --> 01:39:01,896 >> Object? 2456 01:39:01,896 --> 01:39:03,206 >> Okay. Yeah, it's an object. 2457 01:39:03,526 --> 01:39:04,396 So how do we know this? 2458 01:39:04,396 --> 01:39:05,626 Again, it's just an irrigation. 2459 01:39:05,836 --> 01:39:11,306 The fact that it's dollar sign dot Ajax open paren curly brace, 2460 01:39:11,306 --> 01:39:12,716 means here comes an object, that's all. 2461 01:39:12,856 --> 01:39:15,006 If it were square brackets that would mean here comes an array. 2462 01:39:15,196 --> 01:39:17,086 Now, we could call it an associative array 2463 01:39:17,086 --> 01:39:18,466 but JavaScript programmers just don't. 2464 01:39:18,466 --> 01:39:21,076 It's an object, even though in PHP it's functionally equivalent 2465 01:39:21,076 --> 01:39:21,906 to an associative array. 2466 01:39:22,396 --> 01:39:26,516 So now what are the keys in this object? 2467 01:39:27,196 --> 01:39:29,436 Can someone rattle off what the several keys are? 2468 01:39:29,436 --> 01:39:30,706 Axle, you had this answer before. 2469 01:39:30,706 --> 01:39:31,576 What are the three keys? 2470 01:39:31,846 --> 01:39:33,256 >> Yeah. URL, data, and success. 2471 01:39:34,046 --> 01:39:34,586 >> Exactly. 2472 01:39:34,586 --> 01:39:34,756 Now -- 2473 01:39:34,756 --> 01:39:37,366 >> [Inaudible] is not a key because it's been in data. 2474 01:39:37,366 --> 01:39:37,826 >> Exactly. 2475 01:39:37,826 --> 01:39:39,846 In fact, this -- I just pretty printed this. 2476 01:39:39,846 --> 01:39:43,186 It's very common to write JSon code in this way where you ever 2477 01:39:43,186 --> 01:39:45,706 so slightly indent and you put your curly braces 2478 01:39:45,706 --> 01:39:46,926 on different lines like this. 2479 01:39:47,246 --> 01:39:48,326 But I could clean this up just 2480 01:39:48,326 --> 01:39:49,556 to make it a little more readable. 2481 01:39:49,756 --> 01:39:53,386 Now it's perhaps more clear that the object that's being passed 2482 01:39:53,616 --> 01:39:56,296 to the Ajax method contains, indeed, three keys. 2483 01:39:56,596 --> 01:39:57,266 So the first is URL. 2484 01:39:57,266 --> 01:39:58,836 You can probably guess what this does. 2485 01:39:58,936 --> 01:40:00,956 Open an Ajax request to this URL. 2486 01:40:01,406 --> 01:40:02,146 What's the next one? 2487 01:40:02,146 --> 01:40:05,456 Data. So, data is a way of sending key value pairs. 2488 01:40:05,456 --> 01:40:07,056 So with the JQuery library, 2489 01:40:07,246 --> 01:40:09,146 rather than take the somewhat hackish approach 2490 01:40:09,146 --> 01:40:11,446 of doing the question mark and then symbol equals -- 2491 01:40:11,656 --> 01:40:13,256 that felt a little unclean. 2492 01:40:13,526 --> 01:40:16,186 You can, instead, make it lot cleaner in the following way. 2493 01:40:16,416 --> 01:40:18,626 Data is literally the HTTP parameters 2494 01:40:18,626 --> 01:40:20,236 that you want to pass in. 2495 01:40:20,236 --> 01:40:21,886 Data itself is an object. 2496 01:40:22,176 --> 01:40:23,716 The key value pairs are going 2497 01:40:23,716 --> 01:40:26,656 to be the HTTP key value pairs that you pass in. 2498 01:40:26,896 --> 01:40:29,416 Foo equals bar; baz equals crux, and so forth. 2499 01:40:29,416 --> 01:40:33,766 Or, in this case, symbol equals -- now this string. 2500 01:40:34,026 --> 01:40:36,716 So this is slightly new syntax. 2501 01:40:36,786 --> 01:40:39,566 But just because we're using this library, so symbol is going 2502 01:40:39,566 --> 01:40:41,686 to be the name of the parameter that we pass in. 2503 01:40:41,886 --> 01:40:42,896 So that's right here. 2504 01:40:43,326 --> 01:40:45,626 Dollar sign quote/unquote hash symbol. 2505 01:40:46,046 --> 01:40:48,066 Can someone translate this part to English? 2506 01:40:48,066 --> 01:40:49,126 What is this doing here? 2507 01:40:49,686 --> 01:40:49,806 Isaac. 2508 01:40:50,596 --> 01:40:55,736 >> Well, you're getting the idea of symbol. 2509 01:40:55,806 --> 01:40:57,206 >> Good. Getting the idea of symbol. 2510 01:40:57,206 --> 01:40:59,036 >> And then you're finding its value. 2511 01:40:59,186 --> 01:40:59,796 >> Okay, good, so. 2512 01:40:59,796 --> 01:41:03,026 Or more specifically get the element whose idea is symbol, 2513 01:41:03,336 --> 01:41:04,806 and specifically get its value. 2514 01:41:05,146 --> 01:41:07,316 So notice what we don't have to care about here is, 2515 01:41:07,316 --> 01:41:09,636 is it an input element, where is it in the DOM? 2516 01:41:09,956 --> 01:41:13,646 So dollar sign paren quote/unquote hash symbol is the 2517 01:41:13,646 --> 01:41:16,676 equivalent of document.getElementById. 2518 01:41:16,926 --> 01:41:18,956 It's just a lot more concise to express. 2519 01:41:19,156 --> 01:41:19,776 So that's all. 2520 01:41:19,906 --> 01:41:21,046 It's identical functionally. 2521 01:41:21,346 --> 01:41:24,106 Dot val is equivalent to dot value. 2522 01:41:24,226 --> 01:41:26,296 So, arguably, this is not really a savings, 2523 01:41:26,566 --> 01:41:28,366 but at least it's a function that allows us 2524 01:41:28,366 --> 01:41:31,076 to generalize away from hard-coded properties. 2525 01:41:31,666 --> 01:41:34,146 So now, thirdly, success. 2526 01:41:34,486 --> 01:41:36,206 What do you think success is here? 2527 01:41:36,206 --> 01:41:36,976 What does it represent? 2528 01:41:37,016 --> 01:41:39,706 It's the third key in this object. 2529 01:41:40,126 --> 01:41:42,036 >> Maybe a state four. 2530 01:41:42,526 --> 01:41:42,906 And -- 2531 01:41:42,996 --> 01:41:43,846 >> State four, yeah. 2532 01:41:43,846 --> 01:41:45,016 That's -- actually that's it. 2533 01:41:45,016 --> 01:41:48,296 So it represents a function that should be called 2534 01:41:48,586 --> 01:41:51,046 when ready state is four, and one other detail. 2535 01:41:52,096 --> 01:41:52,776 >> Oh, 200. 2536 01:41:52,916 --> 01:41:54,636 >> And status is 200. 2537 01:41:54,816 --> 01:41:56,776 So, remember the if conditions we previously had 2538 01:41:56,776 --> 01:41:57,576 manually hardcoded? 2539 01:41:57,576 --> 01:42:00,716 If ready state equals equals four, and state equals equals - 2540 01:42:00,906 --> 01:42:06,266 rather status equals equals 200, success is a property inside 2541 01:42:06,266 --> 01:42:10,266 of this object whose value is apparently of what data type? 2542 01:42:10,706 --> 01:42:16,786 What's the value of the success key? 2543 01:42:17,026 --> 01:42:18,666 String, int, float. 2544 01:42:18,666 --> 01:42:21,776 >> It could be int. 2545 01:42:21,926 --> 01:42:22,296 >> What's that? 2546 01:42:22,296 --> 01:42:23,276 >> It could be int. 2547 01:42:23,276 --> 01:42:24,116 >> Not int here. 2548 01:42:24,116 --> 01:42:27,446 So notice we have three keys here -- URL, data, success. 2549 01:42:28,376 --> 01:42:30,256 The value of URL is a string. 2550 01:42:30,756 --> 01:42:35,206 The value of data is an object as implied by the curly braces. 2551 01:42:35,326 --> 01:42:36,886 So the value of success is? 2552 01:42:36,936 --> 01:42:37,646 >> A function? 2553 01:42:37,746 --> 01:42:38,276 >> It's a function. 2554 01:42:38,696 --> 01:42:41,596 So, again, we have a use for an anonymous function here. 2555 01:42:42,236 --> 01:42:44,306 A slightly new feature here. 2556 01:42:44,796 --> 01:42:47,306 Anonymous functions can take arguments even though I think 2557 01:42:47,306 --> 01:42:49,446 up until now we've not seen an anonymous function 2558 01:42:49,446 --> 01:42:50,246 that takes arguments. 2559 01:42:50,246 --> 01:42:51,216 But, totally legitimate. 2560 01:42:51,466 --> 01:42:52,716 The only thing you sacrifice 2561 01:42:52,716 --> 01:42:55,296 with an anonymous function is its name. 2562 01:42:55,626 --> 01:42:56,176 That's it. 2563 01:42:56,686 --> 01:42:58,226 So what is success? 2564 01:42:58,486 --> 01:43:01,346 Success is a key whose value is the function 2565 01:43:01,566 --> 01:43:05,236 that should be called when the Ajax request is successful. 2566 01:43:05,636 --> 01:43:08,966 So this is similar in spirit to our on ready state change. 2567 01:43:09,376 --> 01:43:12,196 But it's more specifically the function that should get called 2568 01:43:12,196 --> 01:43:15,956 when ready state, as Axle says, is four and status is 200. 2569 01:43:16,696 --> 01:43:18,356 So what code should I execute? 2570 01:43:18,566 --> 01:43:21,176 Well, when my Ajax request is successful, 2571 01:43:21,386 --> 01:43:24,416 I want to call dollar sign quote/unquote hash price. 2572 01:43:24,486 --> 01:43:27,486 Isaac, what does it mean to say that, the hash price code? 2573 01:43:27,946 --> 01:43:31,516 >> Well, it's looking for an element whose ID is price. 2574 01:43:31,616 --> 01:43:31,956 >> Perfect. 2575 01:43:31,956 --> 01:43:33,506 Looking for an element whose ID is price. 2576 01:43:34,096 --> 01:43:38,216 Dot HTML is pretty much equivalent to dot inner HTML. 2577 01:43:38,216 --> 01:43:39,446 But this is a function call. 2578 01:43:39,686 --> 01:43:41,836 The upside of calling the HTML function is -- 2579 01:43:41,836 --> 01:43:43,696 recall our brief discussion s thus far 2580 01:43:43,696 --> 01:43:45,056 of security and escaping. 2581 01:43:45,266 --> 01:43:48,246 Remember PHP has HTML special chars and all of that. 2582 01:43:48,956 --> 01:43:50,596 Here the HTML function will handle 2583 01:43:50,596 --> 01:43:51,776 that kind of mess for you. 2584 01:43:51,776 --> 01:43:56,006 If it's got open-angle brackets or ampersands and the like, 2585 01:43:56,286 --> 01:43:58,386 the HTML function will take care of that messiness 2586 01:43:58,386 --> 01:43:59,196 for you, which is nice. 2587 01:43:59,376 --> 01:44:02,386 So rather than do it manually with dot inner HTML, 2588 01:44:02,766 --> 01:44:04,446 this function call is a little cleaner. 2589 01:44:04,736 --> 01:44:05,766 So data.price? 2590 01:44:05,766 --> 01:44:12,246 Well, data is apparently similar to what in our manual examples? 2591 01:44:12,246 --> 01:44:12,356 Yeah. 2592 01:44:12,726 --> 01:44:17,496 >> It's probably the array that JQuery parsed automatically 2593 01:44:17,496 --> 01:44:20,156 for you with a JSon that it received. 2594 01:44:21,206 --> 01:44:21,796 >> Exactly. 2595 01:44:21,796 --> 01:44:24,526 So, recall that in our sort of homemade examples, 2596 01:44:24,526 --> 01:44:26,716 there was xhr.responsetext. 2597 01:44:27,106 --> 01:44:30,286 But if that was JSon, we first had to pass that to a val 2598 01:44:30,456 --> 01:44:33,036 in order to get back an actual object in memory. 2599 01:44:33,936 --> 01:44:35,976 Data, the argument that's passed 2600 01:44:35,976 --> 01:44:40,666 to the success handler function is already the in-memory 2601 01:44:40,796 --> 01:44:43,706 structure that was returned by the server. 2602 01:44:43,706 --> 01:44:46,726 So JQuery handles for you all 2603 01:44:46,726 --> 01:44:49,586 of the stuff involving the eval function, 2604 01:44:49,836 --> 01:44:51,286 the response text function. 2605 01:44:51,286 --> 01:44:52,696 You never have to touch that again. 2606 01:44:52,966 --> 01:44:55,116 You are just handed on a platter, so to speak, 2607 01:44:55,306 --> 01:44:58,026 data which -- or you can call it fubar bad. 2608 01:44:58,026 --> 01:44:59,346 It doesn't matter what you call the argument, 2609 01:44:59,346 --> 01:45:01,676 but you're handed an argument that contains all 2610 01:45:01,676 --> 01:45:02,856 of the data from the server. 2611 01:45:03,126 --> 01:45:06,036 And at this point we can say data.price, data.high, 2612 01:45:06,036 --> 01:45:10,396 data.low so long as the server is indeed returning JSon data. 2613 01:45:11,286 --> 01:45:13,746 It turns out you can have many other keys. 2614 01:45:13,746 --> 01:45:15,596 In fact, if we look up the documentation 2615 01:45:15,596 --> 01:45:17,236 for JQuery's Ajax function, 2616 01:45:17,646 --> 01:45:19,626 you'll see a little something like this. 2617 01:45:19,726 --> 01:45:25,196 Let me pull up a browser and go to JQuery Ajax. 2618 01:45:25,586 --> 01:45:27,736 This is representative of JQuery's manual. 2619 01:45:27,936 --> 01:45:29,616 It's somewhat easy to read. 2620 01:45:29,766 --> 01:45:33,856 Not quite as straightforward as PHP's, but you'll see here 2621 01:45:34,326 --> 01:45:36,286 that Ajax, the function, could be called 2622 01:45:36,286 --> 01:45:37,216 in a couple of different ways. 2623 01:45:37,216 --> 01:45:38,396 And notice they're being explicit. 2624 01:45:38,396 --> 01:45:40,616 JQuery.ajax, JQuery.ajax, 2625 01:45:40,616 --> 01:45:41,916 they're not even using the dollar sign 2626 01:45:41,916 --> 01:45:42,846 in their documentation. 2627 01:45:43,166 --> 01:45:44,396 That's just a common convention. 2628 01:45:44,756 --> 01:45:47,366 So notice Settings is a set of key value pairs 2629 01:45:47,366 --> 01:45:49,546 that configure the Ajax request, and it turns 2630 01:45:49,546 --> 01:45:50,866 out there's a huge number of keys -- 2631 01:45:50,866 --> 01:45:54,656 accepts, Async, before send, cache, complete, contents, 2632 01:45:54,656 --> 01:45:55,896 content type, context. 2633 01:45:56,106 --> 01:45:58,196 So I've really just plucked out the useful ones 2634 01:45:58,486 --> 01:46:01,526 and among those are -- let's scroll down to the bottom -- 2635 01:46:02,086 --> 01:46:04,196 URL, so we've used that one. 2636 01:46:04,556 --> 01:46:09,396 What was another key that we passed in? 2637 01:46:09,676 --> 01:46:11,946 Success. So there's this one here. 2638 01:46:12,176 --> 01:46:15,656 And, in fact, notice that the success handler can actually 2639 01:46:15,656 --> 01:46:17,146 take in three arguments. 2640 01:46:17,186 --> 01:46:18,506 I've left two of them off. 2641 01:46:18,506 --> 01:46:19,766 I've only used the data one. 2642 01:46:20,126 --> 01:46:22,676 But you can actually get back even more details 2643 01:46:22,676 --> 01:46:25,956 about the Ajax request if you want, by including a second 2644 01:46:25,956 --> 01:46:28,636 and third argument called text status and JQ XHR, 2645 01:46:28,636 --> 01:46:30,266 or really whatever you want. 2646 01:46:30,616 --> 01:46:31,886 But data was the one of interest. 2647 01:46:31,886 --> 01:46:33,466 And what was the last field? 2648 01:46:34,776 --> 01:46:35,566 The last key? 2649 01:46:35,976 --> 01:46:38,456 It was URL, success, and -- 2650 01:46:38,876 --> 01:46:38,996 >> Data. 2651 01:46:39,266 --> 01:46:39,536 >> -- data. 2652 01:46:39,706 --> 01:46:43,636 Exactly. So if I scroll up in the documentation to data, 2653 01:46:44,576 --> 01:46:46,056 data to be sent to the server. 2654 01:46:46,556 --> 01:46:50,796 So it handles the process of converting your object 2655 01:46:51,206 --> 01:46:55,426 to foo equals bar ampersand; baz equals quarks ampersand. 2656 01:46:55,426 --> 01:46:57,136 All of that gets take care of for you. 2657 01:46:57,476 --> 01:46:59,476 So, in short, JQuery thankfully has kind 2658 01:46:59,476 --> 01:47:02,246 of become the de facto library of choice 2659 01:47:02,356 --> 01:47:04,986 for JavaScript programmers, among some others. 2660 01:47:05,286 --> 01:47:09,076 But most people these days, daresay, think of JQuery 2661 01:47:09,076 --> 01:47:12,226 as JavaScript because it just simplifies a whole lot. 2662 01:47:12,406 --> 01:47:15,216 Now at the same time, we went through the exercise 2663 01:47:15,216 --> 01:47:17,306 of these various examples so that you see what's going 2664 01:47:17,306 --> 01:47:18,226 on underneath the hood. 2665 01:47:18,226 --> 01:47:20,666 You understand how Ajax is working from the ground up. 2666 01:47:20,846 --> 01:47:22,926 But, in reality, I would strongly encourage you, 2667 01:47:22,926 --> 01:47:24,346 when it comes time for Project Two 2668 01:47:24,346 --> 01:47:27,406 which we'll discuss briefly tonight, to take the approach 2669 01:47:27,406 --> 01:47:29,776 of using JQuery or some similar library 2670 01:47:29,776 --> 01:47:32,876 so that you're not writing 40 lines of code like we had been. 2671 01:47:33,196 --> 01:47:36,016 You can instead do it in just 10 or so lines of code. 2672 01:47:36,016 --> 01:47:37,806 And it's a lot more readable arguably 2673 01:47:38,056 --> 01:47:39,666 when there aren't the distractions of all 2674 01:47:39,666 --> 01:47:42,276 of the error checking we ourselves implemented again 2675 01:47:42,606 --> 01:47:43,316 and again and again. 2676 01:47:43,616 --> 01:47:47,736 So using something like JQuery is totally fine for Project Two. 2677 01:47:48,536 --> 01:47:51,176 Why do you think this function is returning false 2678 01:47:51,176 --> 01:47:52,606 at the very end? 2679 01:47:54,896 --> 01:47:57,786 Why is my anonymous function returning false? 2680 01:47:59,046 --> 01:47:59,206 Ben? 2681 01:47:59,406 --> 01:48:01,366 >> I think earlier [inaudible] we had, you know, 2682 01:48:01,606 --> 01:48:07,636 return function that had -- most of them actually [inaudible]. 2683 01:48:07,636 --> 01:48:08,036 >> Exactly. 2684 01:48:08,646 --> 01:48:09,536 Yeah. So we still want 2685 01:48:09,536 --> 01:48:11,236 to short-circuit the form submission 2686 01:48:11,346 --> 01:48:12,676 after the user has clicked the button. 2687 01:48:12,996 --> 01:48:14,906 So this return false, if you kind of line 2688 01:48:14,906 --> 01:48:18,716 up all the parentheses, actually is the last line in which 2689 01:48:18,716 --> 01:48:20,166 of my anonymous functions here? 2690 01:48:20,756 --> 01:48:22,196 >> The submit. 2691 01:48:22,336 --> 01:48:23,386 >> The submit handler. 2692 01:48:23,386 --> 01:48:25,426 So if you kind of line up the indentation, 2693 01:48:25,866 --> 01:48:28,456 that return false lines up with the anonymous function 2694 01:48:28,456 --> 01:48:29,986 that I'm passing to the submit handler. 2695 01:48:29,986 --> 01:48:32,816 And the fact that I'm returning false means do not submit this 2696 01:48:32,816 --> 01:48:35,886 form ever because I just hijacked its functionality 2697 01:48:35,886 --> 01:48:38,466 and implemented it myself using Ajax. 2698 01:48:39,186 --> 01:48:41,726 So in the end, this example does the exact same thing. 2699 01:48:41,726 --> 01:48:44,326 And the only thing you have to do in order to have access 2700 01:48:44,406 --> 01:48:47,746 to this kind of syntax and functionality is including a URL 2701 01:48:47,746 --> 01:48:52,286 like this one to get the latest version in this case of JQuery. 2702 01:48:52,356 --> 01:48:54,186 So wonderfully useful even though there is a bit 2703 01:48:54,186 --> 01:48:54,966 of a learning curve. 2704 01:48:55,266 --> 01:48:58,466 But realize again that even though this looks like sort 2705 01:48:58,466 --> 01:49:01,116 of a new language that we've just started using today, 2706 01:49:01,526 --> 01:49:03,446 it's syntactically a little different, 2707 01:49:04,746 --> 01:49:07,896 but only because we're taking advantage of some tricks 2708 01:49:07,896 --> 01:49:09,726 like using a dollar sign as the variable name 2709 01:49:09,726 --> 01:49:10,916 which is totally legitimate, 2710 01:49:11,126 --> 01:49:13,206 and calling JQuery specific functions. 2711 01:49:14,046 --> 01:49:15,496 Quite handy ultimately. 2712 01:49:16,266 --> 01:49:24,456 Any questions on Ajax itself or JQuery syntax or functionality? 2713 01:49:27,836 --> 01:49:28,506 All right. 2714 01:49:29,706 --> 01:49:32,326 So where does that leave us? 2715 01:49:32,326 --> 01:49:34,616 so there's one thing that's worthy of note here 2716 01:49:34,966 --> 01:49:37,126 when it comes to the return types from the server. 2717 01:49:37,586 --> 01:49:39,386 So we've done a few different return types. 2718 01:49:39,386 --> 01:49:41,146 We've spit out just text in some 2719 01:49:41,146 --> 01:49:43,316 of our earliest examples involving the stock prices. 2720 01:49:43,636 --> 01:49:45,046 We've spit out some HTML. 2721 01:49:45,186 --> 01:49:47,986 Recall when I inserted those br tags into the output. 2722 01:49:48,276 --> 01:49:49,686 We spit out XML certainly. 2723 01:49:49,686 --> 01:49:52,896 And we also spit out some JSon ultimately. 2724 01:49:53,246 --> 01:49:57,466 So it turns out there's this feature of web servers whereby, 2725 01:49:57,466 --> 01:49:58,726 when it returns a file, 2726 01:49:58,976 --> 01:50:01,896 it includes a header called content hyphen type. 2727 01:50:02,406 --> 01:50:05,106 So we've seen other HTTP headers like location colon, 2728 01:50:05,416 --> 01:50:07,336 set cookie colon, and so forth. 2729 01:50:07,636 --> 01:50:11,256 Well, the set content header actually specifies what data 2730 01:50:11,256 --> 01:50:12,216 type is this file? 2731 01:50:12,446 --> 01:50:13,906 And this doesn't always matter, 2732 01:50:13,906 --> 01:50:18,146 but realize that everytime we have pulled up a website 2733 01:50:18,146 --> 01:50:21,386 that uses Ajax and it's making subsequent HTTP requests, 2734 01:50:21,786 --> 01:50:24,786 you should generally ensure that your web server is spitting 2735 01:50:24,786 --> 01:50:26,586 out the right content type. 2736 01:50:26,986 --> 01:50:29,016 In other words, if you're spitting out HTML, 2737 01:50:29,196 --> 01:50:31,316 that's actually the default in PHP. 2738 01:50:31,316 --> 01:50:32,226 A PHP file always spits 2739 01:50:32,226 --> 01:50:34,906 out a content-type header of Text slash HTML. 2740 01:50:35,286 --> 01:50:37,106 However, if you want to spit out XML, 2741 01:50:37,106 --> 01:50:38,626 you need to manually override that. 2742 01:50:39,016 --> 01:50:41,896 So let me actually go into my example here earlier 2743 01:50:42,746 --> 01:50:48,436 where in my example I had in quote 5 -- 2744 01:50:48,726 --> 01:50:50,166 recall when we spit this out? 2745 01:50:50,816 --> 01:50:54,206 Price elements, High elements, low elements and so forth? 2746 01:50:54,586 --> 01:50:56,426 And then we had a Quote element up top. 2747 01:50:56,646 --> 01:50:58,226 Notice one thing I did up top 2748 01:50:58,226 --> 01:51:01,326 with the header is I used the PHP's header function 2749 01:51:01,566 --> 01:51:05,176 to send a header of content-type colon text xml. 2750 01:51:05,506 --> 01:51:06,536 So why is that useful? 2751 01:51:06,536 --> 01:51:11,546 We'll open this in a browser here, and this quote5.php. 2752 01:51:11,956 --> 01:51:13,056 Let me open this again. 2753 01:51:14,156 --> 01:51:17,456 And, first, let me remove this header. 2754 01:51:17,456 --> 01:51:20,676 So let me comment out that line of code and reload here. 2755 01:51:21,426 --> 01:51:24,016 So, if you don't specify a MIME type that's correct, 2756 01:51:24,586 --> 01:51:27,666 if you don't specify text XML, this is what I see 2757 01:51:28,186 --> 01:51:29,666 when I download this XML file. 2758 01:51:29,916 --> 01:51:32,736 Now this is clearly like weird-looking, right? 2759 01:51:32,736 --> 01:51:34,466 This is actually three prices 2760 01:51:34,466 --> 01:51:35,826 but it doesn't look that way to me. 2761 01:51:36,056 --> 01:51:38,016 But if I view the source of this page -- 2762 01:51:38,676 --> 01:51:43,366 let me go up and open up, let's say, view source. 2763 01:51:43,656 --> 01:51:44,716 There is XML in there. 2764 01:51:45,406 --> 01:51:49,186 So it is XML, but the browser doesn't show it as XML because, 2765 01:51:49,186 --> 01:51:51,776 if I open up the developer toolbar -- let's do that now. 2766 01:51:52,156 --> 01:51:55,966 Tools, developer tools, network tab, reload. 2767 01:51:56,786 --> 01:51:59,196 Now let me get the response here and look at the headers. 2768 01:51:59,576 --> 01:52:09,966 What content-type was sent back from the server in this case? 2769 01:52:10,166 --> 01:52:10,856 Yeah. Oh, Ben. 2770 01:52:11,136 --> 01:52:11,236 >> HTML? 2771 01:52:11,746 --> 01:52:12,896 >> Yeah, so text HTML. 2772 01:52:12,896 --> 01:52:13,856 And, again, that's the default. 2773 01:52:13,856 --> 01:52:16,396 All these weeks, when you've been writing PHP code, 2774 01:52:16,526 --> 01:52:18,936 you've never once had to spit out a content-type header 2775 01:52:18,936 --> 01:52:20,986 because the default in PHP is HTML 2776 01:52:20,986 --> 01:52:23,506 which is generally perfect for a PHP file. 2777 01:52:23,866 --> 01:52:26,296 But in this case, if we actually want to spit out XML, 2778 01:52:26,546 --> 01:52:28,356 you need to tell the browser as much. 2779 01:52:28,356 --> 01:52:30,626 Now the reality is this is not a big deal. 2780 01:52:30,626 --> 01:52:31,296 I am a human. 2781 01:52:31,296 --> 01:52:32,956 I don't really care about this XML. 2782 01:52:33,186 --> 01:52:36,836 But the fact that adding this header changes the browser's 2783 01:52:36,836 --> 01:52:40,206 interpretation of it can be important because you'll find 2784 01:52:40,206 --> 01:52:41,326 that certain libraries, 2785 01:52:42,036 --> 01:52:43,546 especially ones involving Ajax -- 2786 01:52:43,986 --> 01:52:46,656 if they are expecting JSon to come from the server 2787 01:52:46,806 --> 01:52:50,006 and the server's response does not contain the right MIME type, 2788 01:52:50,006 --> 01:52:51,616 it might not parse correctly. 2789 01:52:51,956 --> 01:52:57,456 And, in fact, this was necessary here for my XML example 2790 01:52:57,456 --> 01:53:01,156 because recall that we used XH.responseXML and recall 2791 01:53:01,156 --> 01:53:02,376 that that was a property 2792 01:53:02,456 --> 01:53:05,436 that hands you a DOM that's already been preparsed 2793 01:53:05,566 --> 01:53:07,266 and loaded into memory as a tree. 2794 01:53:07,656 --> 01:53:11,006 If I had not included that text SML header, 2795 01:53:11,336 --> 01:53:13,756 the browser would not have known it is even XML. 2796 01:53:13,756 --> 01:53:14,756 It might look like XML, 2797 01:53:14,756 --> 01:53:16,746 but it wasn't told explicitly that it's XML. 2798 01:53:16,956 --> 01:53:19,506 So response XML might not have been accessible to me. 2799 01:53:19,576 --> 01:53:21,806 I couldn't actually navigate that DOM. 2800 01:53:22,186 --> 01:53:24,456 So MIME types, as they're called, these content types, 2801 01:53:24,456 --> 01:53:26,246 are generally important. 2802 01:53:26,246 --> 01:53:30,296 And the one that you would typically use for JSon data is 2803 01:53:30,296 --> 01:53:33,356 to spit out a header of Application slash JSon. 2804 01:53:34,006 --> 01:53:37,166 Or Text slash JavaScript generally works. 2805 01:53:37,426 --> 01:53:39,546 But the right one is Applications slash JSon, 2806 01:53:39,546 --> 01:53:40,946 and you can spit it out with code just 2807 01:53:40,946 --> 01:53:43,896 like the header function call we had a moment ago. 2808 01:53:44,426 --> 01:53:46,376 So, as for JSon itself, this is meant 2809 01:53:46,376 --> 01:53:49,246 to be a deliberately unreadable list. 2810 01:53:49,516 --> 01:53:50,656 JSon support is huge. 2811 01:53:50,656 --> 01:53:54,006 So this is a list from JSon.org, one of the evangelist sites 2812 01:53:54,006 --> 01:53:56,306 for this mechanism called JSon. 2813 01:53:56,706 --> 01:53:59,006 Support for it exists in all sorts of libraries. 2814 01:53:59,166 --> 01:54:01,626 IOS for mobile IOS development, 2815 01:54:01,626 --> 01:54:03,356 and it finally has good JSon support. 2816 01:54:04,026 --> 01:54:11,786 Android and, in this case, OCaml, matlab, C Sharp, 2817 01:54:11,786 --> 01:54:14,976 C-Plus Plus, C and the like, as well as JavaScript PHP, 2818 01:54:14,976 --> 01:54:16,046 Python, Ruby, and the like. 2819 01:54:16,046 --> 01:54:18,676 All of your favorite languages these days have really good 2820 01:54:18,676 --> 01:54:21,356 support either built in or through libraries for JSon. 2821 01:54:21,356 --> 01:54:23,286 So it's become a de factor standard 2822 01:54:23,606 --> 01:54:26,836 for exchanging information between browsers and servers. 2823 01:54:27,026 --> 01:54:29,176 In PHP, we saw a couple of things here. 2824 01:54:29,856 --> 01:54:32,656 In PHP, we have a JSon encode function. 2825 01:54:32,706 --> 01:54:34,316 It turns out you can actually go the other way. 2826 01:54:34,316 --> 01:54:36,436 There is a JSon decode function sot 2827 01:54:36,436 --> 01:54:39,236 that even a PHP script could retrieve JSon data 2828 01:54:39,236 --> 01:54:39,876 from a server. 2829 01:54:39,986 --> 01:54:42,406 For instance, if Yahoo made their data available 2830 01:54:42,406 --> 01:54:46,026 in JSon format instead of CSC, PHP could parse that as well. 2831 01:54:46,286 --> 01:54:49,466 Eval, of course, is the function we looked at in JavaScript 2832 01:54:49,686 --> 01:54:52,126 that takes a string that happens to be JSon 2833 01:54:52,236 --> 01:54:56,106 and actually parses it and loads it into memory as an object. 2834 01:54:56,536 --> 01:54:58,846 So there's a key takeaway though, here, to keep in mind. 2835 01:54:59,146 --> 01:55:01,646 In all of our examples involving those stock prices, 2836 01:55:02,516 --> 01:55:07,466 realize that we had a proxy of sorts in play. 2837 01:55:07,826 --> 01:55:14,516 My JavaScript code talked to Quote1.php or Quote2.php. 2838 01:55:14,516 --> 01:55:16,896 And each of, excuse me, those files in turn talked 2839 01:55:16,896 --> 01:55:19,056 to download.yahoo.com. 2840 01:55:19,326 --> 01:55:21,196 Then the response came back to my PHP file. 2841 01:55:21,196 --> 01:55:23,226 Then my PHP file responded to the browser. 2842 01:55:23,286 --> 01:55:25,556 It feels like this is an unnecessary middleman. 2843 01:55:26,026 --> 01:55:28,126 Why not just have my browser 2844 01:55:28,336 --> 01:55:32,656 in my JavaScript code make an Ajax request directly to Yahoo 2845 01:55:33,046 --> 01:55:34,346 and get that CSV file? 2846 01:55:35,156 --> 01:55:37,156 >> I don't know if this is correct. 2847 01:55:37,156 --> 01:55:42,096 But I've tried that actually for the project. 2848 01:55:42,096 --> 01:55:47,036 And it turned out that they didn't allow -- 2849 01:55:47,036 --> 01:55:49,406 especially with Yahoo -- 2850 01:55:49,496 --> 01:55:51,586 they don't allow users to get their JSon as JSon [inaudible]. 2851 01:55:51,586 --> 01:55:55,256 >> True. Yahoo does not allow you to get their CSV as JSon. 2852 01:55:55,256 --> 01:55:58,006 But suppose I was willing in JavaScript to parse CSV, 2853 01:55:58,006 --> 01:55:58,836 which isn't that hard. 2854 01:55:58,836 --> 01:56:00,026 A little annoying, but not hard. 2855 01:56:00,026 --> 01:56:01,386 I still could not make that request. 2856 01:56:01,386 --> 01:56:03,526 So it turns out that browsers are governed 2857 01:56:03,526 --> 01:56:06,496 by something called the Same Origin Policy whereby you are 2858 01:56:06,566 --> 01:56:08,526 generally not allowed in JavaScript to load content 2859 01:56:08,526 --> 01:56:12,986 from another domain name into the current DOM of the webpage. 2860 01:56:13,346 --> 01:56:16,246 In other words, it's find if I want to fetch content 2861 01:56:16,296 --> 01:56:19,046 from JavaScript from Quote1.php 2862 01:56:19,046 --> 01:56:21,066 because on what server does Quote1.php live? 2863 01:56:21,836 --> 01:56:22,126 >> Yours. 2864 01:56:22,326 --> 01:56:22,886 >> Mine, right. 2865 01:56:22,886 --> 01:56:23,536 Same origin. 2866 01:56:23,536 --> 01:56:25,926 It's in my appliance, my web server, same origin. 2867 01:56:26,156 --> 01:56:29,046 However, if I wrote JavaScript code to make an Ajax request 2868 01:56:29,426 --> 01:56:32,956 to Yahoo.com, I could get the response 2869 01:56:32,956 --> 01:56:34,596 but I could not do anything with it. 2870 01:56:34,596 --> 01:56:36,726 I could not embed it into my existing DOM 2871 01:56:36,726 --> 01:56:38,376 because that violates this constraint known 2872 01:56:38,376 --> 01:56:39,796 as the Same Origin Policy. 2873 01:56:40,106 --> 01:56:41,726 This is generally a good thing 2874 01:56:41,726 --> 01:56:44,056 because it means you can't accidentally be tricked 2875 01:56:44,056 --> 01:56:45,796 into like doing a denial of service attack 2876 01:56:45,796 --> 01:56:46,806 on someone else's server 2877 01:56:46,806 --> 01:56:49,026 and integrating data you're not supposed to in the current DOM. 2878 01:56:49,456 --> 01:56:51,966 But it's also kind of a headache for reasons like this. 2879 01:56:51,966 --> 01:56:56,136 I now need a whole frikking web server plus PHP support just 2880 01:56:56,136 --> 01:56:59,496 to implement my Quote1.php, which is like 10 lines of code 2881 01:56:59,496 --> 01:57:01,506 to talk to Yahoo as a proxy. 2882 01:57:01,716 --> 01:57:04,016 So it turns out there's ways around this. 2883 01:57:04,056 --> 01:57:07,236 One, the web server like Yahoo can support something called 2884 01:57:07,236 --> 01:57:10,616 CORS, C-O-R-S, which essentially means their web server spits 2885 01:57:10,616 --> 01:57:13,416 out some HTTP headers that says it's okay if you want 2886 01:57:13,416 --> 01:57:15,086 to integrate our data into your DOM. 2887 01:57:15,366 --> 01:57:16,176 So that's one thing. 2888 01:57:16,176 --> 01:57:19,316 But not many web servers support that, Yahoo among them. 2889 01:57:19,316 --> 01:57:22,796 Or you can use something like YQL, well, Yahoo Query Language, 2890 01:57:22,796 --> 01:57:25,386 which is actually a neat service that you can Google, 2891 01:57:25,646 --> 01:57:29,146 if of interest, that acts as a proxy server for you. 2892 01:57:29,146 --> 01:57:31,716 It will fetch CSV, for instance, from Yahoo. 2893 01:57:31,716 --> 01:57:33,266 And it will even convert it for you 2894 01:57:33,266 --> 01:57:35,126 to something like JSon or XML. 2895 01:57:35,426 --> 01:57:37,576 So, YQL, Yahoo Query Language, 2896 01:57:37,576 --> 01:57:40,686 is a nice third-party free service that can help with this. 2897 01:57:41,076 --> 01:57:44,366 But, in general, this is not something that's possible. 2898 01:57:44,366 --> 01:57:46,006 Hence, our PHP examples. 2899 01:57:46,406 --> 01:57:48,236 So we already looked at a couple of progress bars. 2900 01:57:48,236 --> 01:57:49,596 We looked at the Ajax function. 2901 01:57:49,596 --> 01:57:51,726 So, lastly, Project Two. 2902 01:57:52,186 --> 01:57:55,296 So in Project Two you'll have the opportunity 2903 01:57:55,596 --> 01:57:57,386 to implement a mash-up of sorts, 2904 01:57:57,386 --> 01:57:59,536 whereby you take your new-found JavaScript skills 2905 01:57:59,856 --> 01:58:03,686 and build a dynamic website, largely in JavaScript and HTML 2906 01:58:03,786 --> 01:58:07,896 and CSS that allows users to navigate the map 2907 01:58:08,306 --> 01:58:10,286 and the schedule of the BART. 2908 01:58:10,506 --> 01:58:17,056 This is the subway system and train system of San Francisco. 2909 01:58:17,056 --> 01:58:18,136 So it's very big. 2910 01:58:18,136 --> 01:58:20,616 It's a very well-known public transit system. 2911 01:58:20,616 --> 01:58:23,776 And what's really nice about San Francisco is that they make all 2912 01:58:23,776 --> 01:58:25,726 of their data available via various 2913 01:58:25,726 --> 01:58:26,956 machine-readable formats. 2914 01:58:26,956 --> 01:58:28,576 So you'll see in the PDF of Project Two, 2915 01:58:28,576 --> 01:58:30,626 which is already online, that you have the ability 2916 01:58:30,626 --> 01:58:33,006 to download, for instance a zip file containing all 2917 01:58:33,006 --> 01:58:34,556 of their various schedules and routes, 2918 01:58:34,866 --> 01:58:37,786 or you can access an RSS feed, an XML feed, 2919 01:58:37,786 --> 01:58:41,086 and access real time arrival and departure information. 2920 01:58:41,276 --> 01:58:44,846 In short, you can access via various text files and URLs all 2921 01:58:44,846 --> 01:58:47,296 of the data that you need to build your own system 2922 01:58:47,366 --> 01:58:51,136 for navigating a transit system like the BART. 2923 01:58:51,136 --> 01:58:53,576 And so what you'll do in this project is use Google Maps, 2924 01:58:53,576 --> 01:58:56,146 version 3 of their API, which will allow you 2925 01:58:56,146 --> 01:58:57,926 to embed a Google Map in your own website. 2926 01:58:57,926 --> 01:59:02,216 You'll use Google's JavaScript API to draw lines on your map 2927 01:59:02,316 --> 01:59:04,036 that represent the various routes 2928 01:59:04,036 --> 01:59:05,266 for the various train lines. 2929 01:59:05,266 --> 01:59:08,036 So you'll get nice pretty lines drawn literally on top 2930 01:59:08,036 --> 01:59:09,076 of a San Francisco map. 2931 01:59:09,416 --> 01:59:12,266 And you'll enable a user to click around and see 2932 01:59:12,266 --> 01:59:15,686 when is the next train arriving at this location? 2933 01:59:15,786 --> 01:59:18,586 And where can I get go from this location to another? 2934 01:59:18,896 --> 01:59:20,896 So you'll see ultimately this is an opportunity 2935 01:59:20,896 --> 01:59:23,236 to synthesize some of the ideas that we've played 2936 01:59:23,236 --> 01:59:27,256 with with Project Zero, Project One, getting XML and/or CSV data 2937 01:59:27,256 --> 01:59:28,526 from some third party source, 2938 01:59:28,856 --> 01:59:31,196 building your own interactive websites 2939 01:59:31,516 --> 01:59:35,176 that uses now JavaScript syntax and Ajax functionality 2940 01:59:35,176 --> 01:59:37,566 to get more and more data from the server as needed 2941 01:59:37,776 --> 01:59:40,796 to report things like the next train schedule or the GPS 2942 01:59:40,796 --> 01:59:41,616 of the coordinates 2943 01:59:42,016 --> 01:59:43,736 of the various pieces of the train line. 2944 01:59:43,776 --> 01:59:44,836 So that will be one of the topics 2945 01:59:44,876 --> 01:59:46,936 that Elan [assumed spelling] covers in tonight's walkthrough 2946 01:59:46,936 --> 01:59:48,576 in section of Project Two. 2947 01:59:48,846 --> 01:59:51,096 But you'll find that this is, hopefully, a nice culmination 2948 01:59:51,096 --> 01:59:52,636 that moves away from MySQL, 2949 01:59:52,636 --> 01:59:54,206 so there's no MySQL component to this. 2950 01:59:54,556 --> 01:59:56,696 There's not necessarily a PHP aspect 2951 01:59:56,696 --> 01:59:59,726 but it will be an opportunity to really dabble client-side 2952 01:59:59,806 --> 02:00:01,976 with some dynamic code in Ajax. 2953 02:00:02,736 --> 02:00:06,856 Any questions about what awaits or where we've been? 2954 02:00:06,856 --> 02:00:07,526 All right. 2955 02:00:08,536 --> 02:00:10,286 So there's not that much ahead. 2956 02:00:10,286 --> 02:00:13,126 We'll focus in the remaining lectures of the class 2957 02:00:13,126 --> 02:00:16,206 on scalability, on security, trying to tie together some 2958 02:00:16,206 --> 02:00:17,856 of the ideas and the teasers we've had 2959 02:00:17,856 --> 02:00:20,166 over the past few weeks on what you should do, 2960 02:00:20,166 --> 02:00:21,666 what you shouldn't do, and also thinking 2961 02:00:21,666 --> 02:00:23,866 about how you can scale your website from just you 2962 02:00:23,866 --> 02:00:26,566 on a laptop or you on a desktop computer to you for hundreds 2963 02:00:26,566 --> 02:00:28,866 of people or for thousands of people, and the kinds 2964 02:00:28,866 --> 02:00:30,236 of design decisions you might want to make 2965 02:00:30,236 --> 02:00:32,946 for your next real-world project so that you don't paint yourself 2966 02:00:32,946 --> 02:00:35,896 into a corner with an amazing website that supports 100 people 2967 02:00:36,166 --> 02:00:38,486 when you could really, with some smarter decision-making 2968 02:00:38,486 --> 02:00:42,006 up front, make it support 1000 or 10,000 right out of the gate. 2969 02:00:42,626 --> 02:00:43,656 So why don't we call it a night here. 2970 02:00:43,656 --> 02:00:44,906 I'll stick around for one-on-one questions. 2971 02:00:44,906 --> 02:00:47,476 And Elan will be up shortly with Project Two in Ajax.