 Hi folks, good morning, Wednesday, Wednesday is the 13th today. Alright, we are going to get right into it because I want to make sure we cover the web vulnerability. We are going to pick up the rivalry laptop on Monday. So, we looked at, we've now seen at this point, we've seen web applications, we've seen some server-side web technologies like PHP. Now we need to look at how do we store state on our web application. And we saw that a lot of times the state is really a database, and one of the most prominent ways of how to query and interact with the database is through SQL, which is the structured query language. So, it's essentially a special-purpose language to interact with a relational database. There are multiple commands, the ones that are really important are select, which fetches data from the database. Update, which allows us to change data that's stored in the database. Insert, which allows us to put new data in the database. And delete, which is the other one. There are sometimes slight differences between SQL implementations. Every database engine has its own, basically, sort of looking for a SQL. That's what I meant. Dialect, yeah, its own dialect of SQL. So, there are some variations between that. So, some examples. So, this would, this is a query. So, select all columns, the star's columns, from the table of users, where the username is able to add them. Select all the columns from book, where price is greater than 100, 0.00, and order by title. This is, select the ISBN number, the title, the price from the book table, where price is less than the average price of the book. So, this is all the books that are less than the average price ordered by title. We can insert into there. So, here we specify the table that we want to insert to, which is an example. And we say we want columns field, field one, field two, field three, to have the values test and annul. Update, we can say update example table, set field one equal to update value where field two is equal to n. And then we can also, so SQL also allows us the ability to combine the results of two queries together. So, here this is a, what's called a union query. So, we're basically going to take the first query, and put it together with the results from the second query, and turn that into one result. So, we're going to get all of the a's from table one, where a is 10, and b is one, we'll get 10 of those, and we will add to that all of the a's from table two, where a is 11, and b is two. So, this allows us to extract information from different tables in a programmatic way. So, let's look at how PHP issues SQL queries. So, this is from the PHP manual. So, you first connect to the MySQL server, passing the user and the password. If there's an error, you stop and say, hey, I can't go any further. You select whatever database you want to use, and then let's say you have some first name and last name. These are just a real example, I mean real from their documentation. Then you do a query by doing an sprintf. So, we're going to select first last name address age from friends, where first name is single quote percent s, and last name is single quote percent s, and single quote first name, last name. So, what's sprintf doing? What's this going to be? Printing the output. What was that? Printing the combined output. What do you mean the combined output? Printing it. Pretty aware. Into the query. Into a string. Yeah, that's the s. So, it actually hasn't touched the database yet at this point, right? All we have is a query string, and this percent s is replaced by the first parameter, and this percent s is replaced by the second printf parameter. I actually just thought about it. I don't think I've looked at it, but I'm pretty sure PHP's printf functions do not support percent n, because that would be silly. But if anybody looks, that would be kind of cool to find out. And what happens if we pass more parameters than our parameters here? Okay, so at this point, so if we're going to talk about where could vulnerabilities exist, right? At this point there's no vulnerability. All we have is a string in the variable query that happens to be a SQL query. This variable never touched, if this doesn't get passed to a database, I think it's output to the user, right? There's no, it's just a value in memory. How we issue this query is we use this mySQL-underscore-query function to issue this SQL query to the database. And then if there's not a result, we say that there's some error. Otherwise we use other functions like mySQL-fetch-association, which fetches each of the resulting rows from this query as an associative PHP array and sets it into that variable row so we can access things like row-first-name, row-last-name. And we know we can access row-first-name or sorry, row-first-name and row-address because of this here. Questions on this? So this is a good fact of some of the PHP things. These mySQL functions, they're just global functions. That's why they all have mySQL-underscore prefix there. MySQL query is the actual function that pops to the database. Okay, so this is our little primer on SQL. We will come back to this when we need to to talk about SQL detection. Okay. So we saw the original HTML, right? Has images, tables. You can actually do font sizes. It has a lot of other things. But fundamentally, right? Anybody remember browsing the web in like the late 90s, early 2000s? Is it anything like it is now? And what's the big difference? What was it? It used to use frames. It used to use frames? For what? For dividing the page. Yeah, so you could have frames, actually a huge pane. Actually, I do not like frames. But what are that? So you can use that to divide the page. Was there a lot of, how did that page change? Yeah, so you click a link and then you can see a new page, right? And the page would change. But when you're looking at a page, the page would not change, right? Almost, I would say 99% of the content was static. You get a page and everything just looks static. Actually, if we go back and look at some of the home pages. So this is Yahoo's home page from 1996. So you can see it's just a page with links on this page, right? And yeah, there's an image. There's an image up top. There's a search bar. Whose search was terrible, by the way. There's what, oh, there's a, we have an Amazon's home page, one of the early, when Amazon launched in 1985. Now it's kind of weird to think about it now that Amazon was not in the cloud services business, right? They were just sold, sold books. This is all they did was books. And look at the page, right? It's just static page with links on the page to give you a click on things. This is Alta Vista from 1996. Also static page. And even, although actually I'd say, I guess it hasn't changed very much. So from 1998, Google's home page, or actually even before that it's called Backward Up. It's another search engine. So this was the early Google home page, right? And even this, although I guess I'd say it's actually very similar today, right? We have the Google search button and the I'm feeling lucky button. It's kind of crazy. Okay, so HTML was originally created, right? To describe a text document with hyperlinks to other text documents, right? This is the basis of HTML was we need a language to describe these hypertext documents. But as the web took off and as maybe you could argue as non-nerdy, non-technical people started to use and interact with the web, they thought, well hey, but how do I make fancy animations or pretty web pages, right? How do I actually make something that looks nice and doesn't just make me want to, like, throw up and never shop at this place ever again? Sorry, I know some of you are going to work in Amazon, but it's a good historical thing, right? So that's when this is really where JavaScript came in. So we think of now as, JavaScript is cool programming language of the web, you can run JavaScript on the server do all this crazy stuff. But it just started to solve this simple problem of, man, we wish web applications did, or web pages did fancier animations and were prettier. And so JavaScript is fundamentally a client-side scripting language for interacting and manipulating HTML pages. And that's really the genesis of JavaScript. It was created by one person at Netscape, Brendan and each, actually I don't know how to pronounce that, sorry, each. In 1995, and I don't think I have it here, I think he developed it in something like a week or two weeks. He was on a huge time crunch because Netscape wanted to get this out and show that they could do something like this. And it... It's actually really funny to think about names, right? So he created it as LiveScript, which actually is kind of a cool, it's a decent name, right? Netscape changed it to JavaScript. Anybody know why they changed it to JavaScript? Popularity of Java? Was that... You were in class. You didn't get answered. Yeah. So prior to this, there was another similar thing developed by a person. She called us Hot Java. And so when Hot Java wanted to make it official, they wanted to make their language official, these guys went to the conference at Europe somewhere and they got it named to JavaScript. And most of the functions that they have been defined have been taken from Java, for example, math and all those things because the Hot Java was primarily developed by a Java developer. Interesting. I actually have not heard that story. So from the press release, so they say that they're announcing JavaScript in an open cross-platform object scripting language for the creation and customization of applications on enterprise networks and the internet. Really good copy for whoever wrote that. And JavaScript from Wikipedia, it says it's a prototype-based scripting language with dynamic typing and first-class functions. Does this sound anything like Java, especially the Java of 95? Is Java a prototype-based language? Is Java a scripting language? Does Java have dynamic typing? Does Java have first-class functions? Not really, right? Yeah, so actually there are some questions over why the name to Java. Some people feel that it was a marketing ploy to try to like, because Java, believe it or not, at the time was like, right once, deploy everywhere. It was the hot programming language. Everybody was talking about Java, it had a huge buzz, so one of the theories is that they changed the name to take advantage of this buzz and basically piggyback on that. There's some collaboration between Sun and Netscape, so maybe somebody there was like, hey, you should call it something like Java. And so after this, in 1986, Microsoft added support for JavaScript to Internet Explorer. And there's this whole weird thing where the Microsoft changed the name of their language to JScript, so that way they wouldn't use it because Sun had a trademark on the name of programming languages, so they didn't want to call their thing JavaScript. Finally, this kind of all got settled a little bit when it was submitted to the ECMA, the International Standardization Body, which was finally standard as an ECMA script. So this is kind of like the classic traditional version. If you have a reference to that story, please send it to me. So I'd like to include that. That's really interesting. So JavaScript, love it, hate it, don't care about it, whatever your feelings, it is the language of the web. Every single browser, every single device now supports JavaScript. And so that it just is. We can't really change it although we're trying to move in that direction. It's eventually supported by all browsers and it evolved organically along the way from the original 1995 creation. And so to look at how, kind of mechanically how this works, is basically the ideal is you embed your code into your HTML page. So instead of just having a document that describes links and images and just basic text, you can actually specify to the browser, hey, here's some code, execute this code for me on your browser. It seemed like good from a security point of view. That seems crazy, right? Yeah, here, here. Browse my page, execute this code. How this looks. So inside the script tags, so start script tag and ending script tag, this is the way for the application developer to tell the browser, start executing JavaScript. So inside these script tags is my JavaScript code. And it used to be that not all browsers supported JavaScript, so you would actually have to put your JavaScript code inside an HTML comment because other browsers that didn't support JavaScript wouldn't show it and so you could actually be backwards and catable in a sense. So we can do things like we can declare a variable called name which is the result of calling some built-in function prompt and we can pass some values here. We would say if name is null then we can write welcome to my site, otherwise we can write out welcome to my site plus the name. There are two other ways to, or two. Yeah, one other way. Are there other ways to do this? Ah, sorry. The default for a script tag is JavaScript. You can also specify the language in either the type attribute or the language attribute of the HTML tag. This is a web page with this script tag. It looks something like this. We'll go to a page and it'll pop up a prompt. Just ask us to please enter our name. Type in something. If we click OK then we can click Adam and it'll say welcome to my site, Adam. So here we're actually building, and remember, none of this made any requests back to the server. This is all happening on the user's browser without any external requests. So here we have code that's executing and dynamically changing the HTML of the page based on the results of this code. That's kind of the core of JavaScript is it can, it can, it's running on your browser and it can change the content of that, of your page. And so, OK, so including JavaScript directly into every HTML page is kind of a pain, right? It's not the best practice from a software engineering standpoint, right? You'd have to duplicate your code everywhere that it's used, right? And so you can include JavaScript files, external JavaScript files in your HTML. So this is, so the previous one we saw is called inline JavaScript. So the JavaScript code is inline in the browser page, whereas these are external. So the idea is one's going to use the script tags, but here you set the source attribute to be either an absolute or a relative URL. And what happens is when the browser parses this element, it automatically fetches and executes that JavaScript before continuing to parse the rest of the HTML. And it's semantically equivalent, so it's exactly the same thing as if you took the contents of that JavaScript, whatever the result of making an HTTP request to that URL and putting it directly in the page there. So scoping rules, whatever, it still has exact, the exact semantics there. And so there's something important to keep in your mind. So yes, JavaScript is the basis, the history is a language to interact with HTML pages, right? But it doesn't mean that, so but there is a separation between the language of JavaScript and how JavaScript interacts with the HTML page, right? Similarly to maybe PHP is usually used to generate HTML pages and uses a web application. But you can actually use PHP as a command line tool if you're crazy. It doesn't have to actually output a web page, right? And so the document object model is a way to get it out from JavaScript. Okay, this is all the functions of JavaScript that deal with how to interact with the HTML document on the page which is separate from the language itself. So a lot of people, even people who've done JavaScript for a long time often conflate these two ideas. And now it's being even more important with being able to run JavaScript on a server to tease out these ideas. So the document object model is a programmatic, it's a way to manipulate the client-side content. And there's a globally accessible JavaScript object called document. And this is how you by interacting with this object is how you access and change the HTML content on the page. So you can traverse, query, manipulate, and change the browser's representation of the HTML page as well as set event handlers that say things like when the user clicks on this button it will go. So DOM 0 was released in 1995. It was incredibly basic. These kind of kept improving. The W3C stepped in and started to find standards. It's now a living standard. So it's continually evolving based on website developers and browser vendors. So let's look at an example. So here we have our HTML page. This is a valid HTML5 page. Here we have an H1 tag, a header tag that's a DOM example. And inside there is a div tag that has an idea of insert here. And so we have some super simple JavaScript code at the end here. That first is going to create, so it's using, so we know it's using the DOM since it's calling the document object. It's going to create an HR element, what's HR? Horizontal rule. Yeah, so it's just going to be a line. We're going to set that new element to be HR. To be in this variable HR. But notice we haven't done anything with it. We've just created this element. We haven't put it anywhere in the DOM. So if you do this, it will create this element but it's not going to do anything with it. So what we can do is we can access the DOM and we can say, okay document.find an HTML element that has the ID attribute of insert underscore here. Which is going to be this div right here. And add as a child this HR element. So this is exactly identical as, once this code runs, it will be identical as if there was in between this div tag, right? Inside there as a child will be an HR tag. And so we can look at this and we can go, yes we execute a run this, we'll see DOM example as the header and we'll see a line where that line actually came from the JavaScript code that executed. So this is how JavaScript is able to interact and change. And this is the fundamental mechanism that all of the fancy web applications change and manipulate your content of your page. Okay. So part of the problem is you would think that, well we have this DOM, we have this nice programmatic interface. We usually use this to do whatever we want. It turns out that browsers are horrible and the web is horrible and everything sucks because every browser has slightly different ways of accessing or different semantics of accessing the DOM. It's not quite the unified standard that we would all want and love. So some highlights from this awesome Stack Overflow question of what browser, cross browser issues Internet Explorer does not replace Ampersand NBSP so this would be NBSP is non-breaking space or HTML character code 160 you need to replace its unicode equivalent. So Internet Explorer for some reason has a bug or whatever that it does not do this. So you would have to do this yourself. In Firefox this is not to bash on any one particular browser they're all terrible. In Firefox it dynamically created input field inside a form created using document.createElement not when you create it in the HTML does not pass its value on forms of it. What? document.getElementById in Internet Explorer will return an element even if we're returning element even if the element name matches. So if there's a name attribute on a tag it will return that which is not what you would expect what happened in a function called getElementById not getElementById and also name. Mozilla will only return the element if the ID matches. What? That's crazy. So this is why if you've ever done web programming you probably faced these issues or maybe you were smart and just started but jQuery is so popular because it provides a uniform interface and it handles all these low level details of cross browser compatibility so you don't have to worry you don't stress about checking if you're using Internet Explorer and will get element by ID actually return when you want it to return jQuery will completely take care of that for you. I guess I should ask if you're doing JavaScript programming or decent amount jQuery among those it's almost like if you're doing the web and you're doing JavaScript that's something that's longer than even one or two lines you probably still want to use some jQuery because you're probably going to do it wrong for some fraction of browsers and there will be really weird problems. So the document object model is all about how to access the HTML of the page or essentially how do we modify and interact with the content of the page in contrast the browser object model allows in JavaScript to interact with the actual browser itself right so this doesn't have to do anything with the document but this is things outside of that and of course because it's the web there is no standard of what is standard for the browser object model and even this term browser object model is colloquial it's not a standard term so some examples you can set the name of your tab or your window to be new named by using window.name right so this has nothing to do with the content on the page right you're just changing the title of the HTML page in the browser you can close right so you can have your, I don't know what happens if you do it nowadays on a tabbed environment does it go out of that way at the check but it used to be so JavaScript code can just close that page that it's on we can set, we can actually do essentially a redirect within JavaScript here by setting the locations the location would be the location bar to be a new HTTP URL and the browser will automatically go there to that location just as if we were redirected there by the browser so you can do this all in JavaScript okay so just to reiterate JavaScript the language is different from the document object model and the browser object model DOM has its own specification the bomb is kind of specified in HTML5 they're used together so much but with JavaScript occurring everywhere it is important to separate these in your mind right we have server side code in Node.js you can use JavaScript to specify database queries in framework or I don't know the best way to call that but in MongoDB instead of using SQL to query you use JavaScript to query Flash ActionScript in Flash is actually essentially JavaScript but kind of different and it has its own DOM-like capabilities to manipulate Flash objects even Java applications you can use javax.script to script your Java applications Windows applications ah this is the name Windows RT so you can write Windows applications now that are I'm sure there's some maybe OS functionality they would re-write files or something like that that doesn't make sense in a web context even though it's still JavaScript okay so now we're going to kind of dig in a little bit more to JavaScript the language to see how weird things can get so Java is object-based which means almost everything is an object and objects are essentially associative arrays or hash tables of key values and properties and values can be added and deleted at runtime so these are not the traditional objects you think about when you think of classes and objects right where classes the fields are defined statically based on the definition of the class defined statically these are all done at runtime so for instance here I have a variable so if our keyword defines a local variable that says the name of this variable is object and it is an this object has one field called test which value is the string foo and one field called num whose value is an integer 50 and there can be crazy things like set object test foo is equal to object so here I am creating a new field in this object foo which contains the object itself and they can write out object object test so what is this going to do so object test is going to look in here and return foo and well actually object foo is what the object itself and it is going to JavaScript has automatic corrosion so it is going to try to if we ever try to use an object as a string it will try to call the two string method on that object to try to turn it into a string so this will automatically print out whatever this object itself is and then we can do things like set so this is the other type of syntax so we can access fields and objects with you know the bracket rate bracket notation and we can also do it with the dot notation so we can say object.num means access the num field of objects set to be 1000 and log that so these are going to reference the same field and so we can do this we can see here we have done the variable object we say object foo is object and the browser so this is inside the browser's development console where we are doing all this and then when we do object.log right here we see it's oh it's logging it right it's right here it's outputting the object here we said object.num equals to 1000 and we log object angle brackets num to be 1000 as well so other things about JavaScript so we can do recursion in JavaScript so we have a function factorial and we can set if n is triple equal to zero we return one why JavaScript people why are we using triple equals here because yeah because it's also terrible in that actually BFB does this too so 80% of the languages web users are terrible so if we just use a double equal sign JavaScript will try to turn n into an integer if it can so it's a string if you pass in the string zero it will double equals the integer zero which is could be what you want but 9 times out of 10 is not exactly what you want because that doesn't make sense so you use triple equal sign and say are they the same thing and the same type basically and then we're going to turn n times factorial of n minus 1 so we can do things we can log factorial of 5 and that will tell us that is 120 so we can do this but JavaScript actually so the first class functions gives us a lot of really cool features so we can actually have anonymous functions so these are functions with no name and we can create closures over those functions so we can return functions from a function that refer to local variables in the scope of that function so look at what we're talking about so this is so we saw the syntax here for defining a function so this defines a function named factorial what this is doing is on the right hand side of this equal sign is it is creating an anonymous function this function has no name it is setting that anonymous function to the variable create function and functions are objects in JavaScript just like everything else so you can call them and you can also access fields of that function so in here we can set some variable to be count and we can actually return from this function a new function which returns plus plus count so this is returning so this function create function actually returns itself a new function and that function that it returns refers to this variable count so we can create a function called ink an incrementer function and we can call ink which is this function here so that's going to be so now the count of what it's going to return it forgot the difference between plus plus before and afterwards it's a prefix so it's going to use it and then increment it that's why this operator said use and then increment or no increment and then use cool so this is going to output one this will output two, this will output three but we can create a brand new function and incrementer two and now what's this going to output what's this going to return one, right, exactly because there's a new count variable so this inner anonymous function closes over this count variable and so every time it's executed that that variable from that scope is being incremented but here we create a new function it creates a new variable count and a new function refers to actually a different instance of this variable count cool and we can see this in action do we say it right, yes we did, cool so we define this function we can say that increment is a new create function we call it returns one, two, three and then we call it a new create function and it returns one it's actually really fun if you ever want to play with this I'd recommend it okay JavaScript also has features it does this as well to do runtime evaluation it's used a lot more in JavaScript so the idea is the eval function or function or set time out or set interval all of these functions will take a string as their argument and we'll interpret that string as JavaScript code and execute that JavaScript code contained in that string oh also exact script so we can have a variable foo is equal to bar we can have a constant string right where it'll say foo is equal to add up and now if we print out the value of foo what's it going to print out add up is this very easy then to reason about what code is doing that has an eval in it oh it can completely change and do anything right what if this string came from the user probably not great right we know what it's going to do we could do anything we can even have a variable x so we can have console.log hello we can set that to be some new function x and then when we call this function test this is going to parse this variable even x is a string it's going to take that string as if it was a function definition and then it's going to call that function and execute that code inside that string so we can see here if we have foo as a bar we eval that and when we log foo it's going to say add them and here when we call this function test it's going to say hello so here's all different cases where we can actually turn this into we can turn strings into code okay so some of the actually classic use cases of JavaScript and to try to give you some feeling that it's not superfluous so JavaScript actually has a very common purpose on the web even without thinking about fancy animations and graphics and jQuery and Ajax applications the question is so how do you you're writing a web application how do you validate the user input that the user gives to your application how would you do it you're writing an application no JavaScript parser parser parser don't find if there is anything you need to validate the input but where do you do that the server the user has their browser they fill in some values they hit enter and it goes to your server then you can check it and you sell them hey those values have been passed by parsing that's not actually an email address you sent me but this requires a round trip to the server the server has to be able to check that the input is valid so a classic example this would be we check if there's a submit then we get this thing from the student we get we set a student variable we set a class variable based on the get parameters we get the grade we check we're doing some validation making sure that students not empty classes not empty or grades not empty otherwise we say hey there was an error otherwise if the grade is one of the proper things we say hey there's an error your grade has to be one of these then we say otherwise we say grade successfully submitted so here in the form the form has a name student a name class and name grade and we know that because the form does not have an action attribute it's going to submit to the same page default over a get request so if we have our form here we can fill in add and d grade a but we didn't fill in a class so we're going to do this it's going to say error you didn't fill out all of this form so I can fill out something in there but change the grade to be a g and it will tell me well actually the grade has to be one of these values this is classic input validation that you all do when you write any kind of application because users are terrible they can put in whatever they want to make sure what they put in makes sense then I can finally submit it but if we think about what just happened in that context it would be me typing things in what happened was my browser made a request to the form validation php page got the response the initial page and then I made another request with an empty class field and I got a response saying oh I made a class field I made another response with the wrong grade format and then I finally got another response back saying well that's the wrong grade format and then finally I had a correct submission so this caused what 1, 2, 3, 4 4 round trips to the server but we saw with TCP if I'm not keeping this connection open which doesn't necessarily always happen this is going to be 4 3 way handshakes in order to start to establish the connections there this is hugely inefficient just to know that well you really wanted me to put in the class field and the grade has a specific format so what we can use and one of the use cases of JavaScript is to do this validation on the client so we can have our form and we can have JavaScript here so the key thing here is that we have an on submit handler this handler says essentially run this JavaScript code return the check function a check form function and if that returns true let them submit if it returns false stop them from submitting and so inside that function that's defined above this use here we're going to find some check form and we can say hey get this form so use the get element by ID get this form on this page and if the values are empty then pop up an alert to the user that says hey you must fill out all the form and return false test the grade say hey the grade has to be one of these otherwise return true so now stepping through our other example we fill in a student without a grade and it pops up an error message immediately the JavaScript code does this automatically right when we click that button the JavaScript code is living, running on the browser on our machine it checks and then it pops up this window and then we say okay well change the class and change the grade and it pops up again that hey the grade wasn't right and then finding that and change that and successfully submit it and now it actually makes the request to the server so now I've gone from here to just correct submission cut out all those middle parts so if we do this if we're doing this on the client we're checking making sure that the input is correct then can we get rid of all that code in the PHP side because the less code we have the less bugs we're going to have so we've already done that check in the JavaScript code can't we just get rid of that on the server side code? no now yeah the users can disable JavaScript right there's nothing that tells us that the user actually went through and the JavaScript code verified that everything is in order the user can disable JavaScript we saw we explored in one of the assignments command line clients right they're definitely not they're just making HTTP requests and from the HTML on this page right we can know exactly what request is going to be made when this form is filled out we know this is making a get request to the same page with a name of student with whatever value is a name of grade with whatever value is and a submit so we can actually automatically create an HTTP request directly from this we don't need a browser at all and so this actually can lead we'll look at it later because we're going over to groundwork here this is going to lead to security compromises depending on what the validation does so this actually is a problem right because now the validation must exist on your server side and your client side right so in this example what were the two languages there the HTTP and JavaScript right so you essentially have the same code in two different languages living in two different places that are checking should be the same thing so this is actually a whole nother problem making sure your validation is consistent between the two right and it's actually one of the big selling points in some sense of running like Node.js everything on the server because you can set it up so that the function is the same that checks right and on the server and the client it's the same language and the same function the same code okay so all this is great we can do fancy animations all this cool stuff but fundamentally right we're limited we don't make a request of the server until the user either clicks a link or fills out a form based on everything we've seen so far right so our JavaScript code can alter the page however we want but we still have to make a trip to the server so this is where the X in AJAX comes in the XML HTTP request object so it's actually really funny if nobody realized actually Microsoft we have Microsoft to thank for coming up with this so in the 2000s Outlook web access so anybody access the Outlook ASU things? EX was it Exchange 2010 ASU.EDU right so that's actually looks like Outlook but it's actually the web front end for the exchange server so everybody works on that team by weird historical accident that team is technically on the exchange team even though they're emulated they have the look and feel of the Outlook browser that's actually a different team it's very weird and so we have this example here that you can go check it out if you've never seen it before and so the idea was when you're developing a web mail client every mail you click on requires a whole round trip to the server to get that mail and then you want to go back to your inbox it's a whole round trip to get your inbox and so it actually leads to scalability problems with traditional web applications you're constantly clicking through things you know I don't know about you but I'm constantly looking at a lot of email when I go through my emails and if all this required round trips to the server it could be a problem so the idea was they created ActiveX control in about 1998 which would fetch bits of data from the server so the idea is well when the user clicks on their mail in their inbox let's just fetch those bits of that mail and then display that to the user right and then when they go back well they can go back where they have the inbox and they click on a new mail you can make a request there and so it's actually kind of weird it was towards that it's like a great I think I have the link here there's a really good historical document from one of the people involved here basically they were close to feature complete and they were shipping so they couldn't shove this into their code so they had to basically gross and get the MSXML team to include their ActiveX control which is where the XML comes in XMLHGP request so it actually has nothing really to do with XML you don't have to return XML back or anything like that it's kind of a historical accident and so it shipped in IE5 in March 1999 in exchange 2000 was finally reached in November 2000 and the Outlook Web Access used this ActiveX object and then finally in a net state realized oh man it's actually a really cool feature and they added it in 2000 so the full story is here it's really interesting so what was so I remember what the first application they used where they were like whoa how did they do that it's not for me it was I think Google Maps I think was probably one of the first ones it's not a flash application but you're scrolling you can infinitely scroll nothing's refreshing Gmail was also probably one of the first ones I was like whoa how are they actually doing this so it's actually because of this so because of all the stuff that Microsoft did getting this creating this so the idea is this object allows JavaScript code to retrieve data from the server process the data and update the DOM all without refreshing the page and so so once again browsers historical differences in most browsers you create an XML HTTP request just by calling new creating new object here in Internet Explorer you have to use this active x control to actually do that and so the idea is that already state change property of this object you can set actions and functions that occur at each point in the life cycle of this request so part of the idea is well this goes back to something that's in parentheses here right so we have the JavaScript code on the page but if the browser and the page stops everything to go make this request well then you've lost the interactive component of your application then the user can't interact with your application so the idea is you want this to happen asynchronously say hey go make this request and then when something good happens execute this code in order to update the page so this already state change is a function that gets called and so you set up this callback that says hey call this function with the state changes then you can execute the request and say hey make a get request to this example and this parameter will say what kind of request you want and then you can finally send the request so the third parameter indicates you can actually do asynchronous or synchronous requests and so the idea is the already state change will get called and it gets passed a value in here that says that tells you where it is in the life cycle so either it's uninitialized it's actually made the connection, it's loading the data it is loaded, it's finished loading and then it's interactive it's interactive and finally it's complete where the object is actually finished and initialized so usually wait until the status is complete so you say if HTTP request ready state is 4 then operate on your data so finally once we've received the document and we've checked for a successful return code the content of the request we can access with our object.response text this will give us the raw text of the response we can use the library to parse it as XML so we can actually automatically do that in this case we're going to operate and manipulate this object just through the DOM elements let's quickly go through an example so here's some code we have the HTML of the page we have this insert here element just like we had before here we're going to so this is actually kind of the raw code so this we're doing some kind of feature detection of the JavaScript to say hey if there's an XML HTTP request object then create a variable called HTML HTTP request otherwise this means we have to use Microsoft's ActiveX control if we have a console if we don't have a console then set up a log function to call this so this should show you all the crazy stuff you have to do to actually program across the browser then we can set up the on ready state change function to log that hey this is the ready state and if the ready state is 4 get the response back create a new text node and add that to the insert here div then we can say before the request we get it we send it and we say we're after the request so on a modern browser we can see here I'm debugging I'm at this console.log before request I'm now log the before request I'm opening the request and actually right after it does this open request it actually asynchronously calls this with 1 to say it's in ready state 1 then it does the after request and then it's in ready state 2 and then it's in ready state 3 and ready state 4 and then finally it changes the content of the page to put the test age act and we can see if we switch over to the network tab here we can see that it's made a request to this age act underscore test dot txt and which was the URL that we gave in our example so it's done this without the browser changing refreshing or anything and so we can see that that is the value of age act underscore test dot txt crazy enough is this code that we wrote still runs exactly the same in Internet Explorer 6 so we can use Internet Explorer 6 we can go to the same page we don't have a console to log things to so this is why we made that hook to create that console object so this log function actually just alerts so it says ready before request it says we've hit ready state 1 ready state 2 ready state 3 ready state 4 and finally updates it with the test age act so all this stuff happens automatically in the background and then it does the after request which is super weird I don't know exactly why but it does work and just to prove it this is i.e. 6 which one does it have from 1985 to 2004 wow that's got me cool and then looking at this with jQuery it's like this you say get age act test dot txt and when this returns in the insert here div insert the data as html I don't have to do any of that crazy complicated stuff where I was testing all these stuff and jQuery does everything for me and so we can do that and it just works and that actually still works in internet 4.6 which is why you want to use something like jQuery okay cool alright we'll stop here