eg-259:emergency_lecture
Differences
This shows you the differences between two versions of the page.
eg-259:emergency_lecture [2008/11/13 10:57] – created eechris | eg-259:emergency_lecture [2011/01/14 12:46] (current) – external edit 127.0.0.1 | ||
---|---|---|---|
Line 1: | Line 1: | ||
+ | ~~SLIDESHOW~~ | ||
+ | |||
+ | ====== An Introduction to Ajax ====== | ||
+ | |||
+ | **Lecture 13**: To be given on Thursday 13th November 2008. | ||
+ | |||
+ | **Lecturer**: | ||
+ | |||
+ | Ajax is a reformulation of the DHTML idea that aims to make the user experience of interactive web applications more like the experience that they get with traditional desktop application. We introduce the Ajax idea and give a demonstration of its capabilities. | ||
+ | |||
+ | ===== An Introduction to Ajax ===== | ||
+ | |||
+ | > "Ajax, shorthand for Asynchronous JavaScript and XML, is a web development technique for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire web page does not have to be reloaded each time the user makes a change. This is meant to increase the web page's interactivity, | ||
+ | |||
+ | ---- | ||
+ | |||
+ | This lecture is based on Jesse James Garrett' | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== Contents of this Lecture ===== | ||
+ | |||
+ | |||
+ | An introduction to AJAX | ||
+ | |||
+ | * [[eg-259: | ||
+ | * [[eg-259: | ||
+ | * [[eg-259: | ||
+ | * [[eg-259: | ||
+ | * [[eg-259: | ||
+ | * [[eg-259: | ||
+ | * [[eg-259: | ||
+ | |||
+ | |||
+ | ===== Learning Outcomes ===== | ||
+ | |||
+ | //At the end of this lecture you should be able to answer these questions//: | ||
+ | |||
+ | * Define Ajax | ||
+ | * What technologies does Ajax use? | ||
+ | * How does the Ajax web differ from the classic web? | ||
+ | * How does Ajax improve the user experience? | ||
+ | |||
+ | |||
+ | ===== Learning Outcomes (more) ===== | ||
+ | |||
+ | //At the end of this lecture you should be able to answer these questions//: | ||
+ | * Who uses Ajax? | ||
+ | * What is the Ajax engine? | ||
+ | * What is JSON? | ||
+ | * What advantage does an Ajax framework provide the web developer? | ||
+ | |||
+ | |||
+ | ===== Acknowledgments ===== | ||
+ | |||
+ | {{ eg-259: | ||
+ | * This lecture is inspired by and based on [[http:// | ||
+ | * Additional notes are adapted from Wikipedia articles and other web sites which will be referenced in the slides. | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== In 2004 -- Before AJAX ===== | ||
+ | |||
+ | * User interaction with web clients was largely limited to the small number of controls provided by the HTML ''< | ||
+ | * Comparatively, | ||
+ | * To create richer user experiences for a web user, web designers had to abandon standard HTML and use non-standard technologies like Flash. | ||
+ | |||
+ | ===== Narrowing the Gap ===== | ||
+ | |||
+ | * In 2005 there were example web applications which illustrated that the gap between web application and desktop application was being narrowed. E.g. [[http:// | ||
+ | * Google Suggest and Google Maps are examples of an approach to web applications that was termed Ajax by Jesse James Garrett and his colleagues at Adaptive Path. | ||
+ | |||
+ | ---- | ||
+ | |||
+ | Take a look at [[http:// | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== What is Ajax? ===== | ||
+ | |||
+ | * Ajax is shorthand for **A**synchronous **Ja**vaScript + **X**ML | ||
+ | * It " | ||
+ | * Not really a technology, not really new, rather a combination of existing technologies that together create a powerful new paradigm for web user interface design. | ||
+ | |||
+ | ===== Defining Ajax ===== | ||
+ | |||
+ | * Standards-based presentation using XHTML and CSS; | ||
+ | * Dynamic display and interaction using the Document Object Model; | ||
+ | * Data interchange and manipulation using XML and XSLT; | ||
+ | * Asynchronous data retrieval using '' | ||
+ | * JavaScript binding everything together. | ||
+ | |||
+ | ---- | ||
+ | |||
+ | We have of course already studied the first two and the last of these. XML and XSLT is only one way that data can be exchanged and manipulated. We will discuss '' | ||
+ | |||
+ | |||
+ | ===== The Classic Web ===== | ||
+ | |||
+ | {{eg-259: | ||
+ | |||
+ | //The traditional model for web applications// | ||
+ | |||
+ | ---- | ||
+ | |||
+ | The classic web application model works like this: | ||
+ | |||
+ | Most user actions in the interface trigger an HTTP request back to a web server. The server does some processing -- retrieving data, crunching numbers, talking to various legacy systems -- and then returns an HTML page to the client. It's a model adapted from the Web's original use as a hypertext medium, but what makes the Web good for hypertext doesn’t necessarily make it good for software applications. | ||
+ | |||
+ | This approach makes a lot of technical sense, but it doesn' | ||
+ | |||
+ | Obviously, if we were designing the Web from scratch for applications, | ||
+ | |||
+ | |||
+ | ===== How Ajax is Different ===== | ||
+ | |||
+ | {{eg-259: | ||
+ | |||
+ | // The Ajax model for web applications// | ||
+ | |||
+ | ---- | ||
+ | |||
+ | An Ajax application eliminates the start-stop-start-stop nature of interaction on the Web by introducing an intermediary -- an //Ajax engine// -- between the user and the server. It seems like adding a layer to the application would make it less responsive, but the opposite is true. | ||
+ | |||
+ | Instead of loading a web page, at the start of the session, the browser loads an Ajax engine -- written in JavaScript and usually tucked away in a hidden frame. This engine is responsible for both rendering the interface the user sees and communicating with the server on the user's behalf. The Ajax engine allows the user's interaction with the application to happen asynchronously -- independent of communication with the server. So the user is never staring at a blank browser window and an hourglass icon, waiting around for the server to do something. | ||
+ | |||
+ | |||
+ | ===== Synchronous Interaction ===== | ||
+ | |||
+ | {{eg-259: | ||
+ | |||
+ | //The synchronous interaction pattern of a traditional web application// | ||
+ | |||
+ | |||
+ | ===== Asynchronous Interaction ===== | ||
+ | |||
+ | {{eg-259: | ||
+ | |||
+ | //The asynchronous pattern of an Ajax application// | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ---- | ||
+ | |||
+ | |||
+ | Every user action that normally would generate an HTTP request takes the form of a JavaScript call to the Ajax engine instead. Any response to a user action that doesn’t require a trip back to the server -- such as simple data validation, editing data in memory, and even some navigation -- the engine handles on its own. If the engine needs something from the server in order to respond -- if it's submitting data for processing, loading additional interface code, or retrieving new data – the engine makes those requests asynchronously, | ||
+ | |||
+ | |||
+ | ===== Who's Using Ajax? ===== | ||
+ | |||
+ | * Google is making a large investment in Ajax: [[http:// | ||
+ | * Many features that make [[http:// | ||
+ | * Ajax is an important part of the strategy underlying [[http:// | ||
+ | |||
+ | ---- | ||
+ | |||
+ | These projects demonstrate that Ajax is not only technically sound, but also practical for real-world applications. This isn't another technology that only works in a laboratory. And Ajax applications can be any size, from the very simple, single-function //Google Suggest// to the very complex and sophisticated //Google Maps//. | ||
+ | |||
+ | |||
+ | |||
+ | ===== The Ajax " | ||
+ | |||
+ | * Relies on the non-standard '' | ||
+ | * Available on most modern browsers, and being standardized by W3C((The '' | ||
+ | * '' | ||
+ | * The data returned from '' | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== The " | ||
+ | |||
+ | * By default '' | ||
+ | * This can be manipulated as if it was a DOM object or further transformed with XSLT | ||
+ | * It can also return a directly parsable text format called JSON((JSON, Wikipedia, Wikipedia, the free encyclopedia. URL: [[wp> | ||
+ | * JSON (pronounced like the English given name Jason), which stands for " | ||
+ | * JSON is a subset of the object literal notation of JavaScript but its use does not require JavaScript. | ||
+ | |||
+ | |||
+ | ---- | ||
+ | |||
+ | JSON is based on a subset of the JavaScript Programming Language. The format is specified in [[http:// | ||
+ | |||
+ | In JavaScript, JSON can be parsed trivially using the '' | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== A JSON Example ===== | ||
+ | * The following is a simple example of a menu definition. Note that the quoted text is an object literal: | ||
+ | <code javascript> | ||
+ | var myMenuText = '{ | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | {" | ||
+ | {" | ||
+ | {" | ||
+ | ] | ||
+ | }' | ||
+ | </ | ||
+ | * If this is returned from '' | ||
+ | <code javascript> | ||
+ | var myMenuObject = eval(myMenuText); | ||
+ | </ | ||
+ | |||
+ | ---- | ||
+ | |||
+ | Function '' | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== Case Studies ===== | ||
+ | |||
+ | * [[# | ||
+ | * [[# | ||
+ | * [[# | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== Case Study 1 ===== | ||
+ | |||
+ | This [[http:// | ||
+ | * Step 1: [[# | ||
+ | * Step 2: [[# | ||
+ | * Step 3: [[# | ||
+ | * Step 4: [[# | ||
+ | |||
+ | |||
+ | |||
+ | ===== Step 1: Make an HTTP Request ===== | ||
+ | |||
+ | <code javascript> | ||
+ | var httpRequest; | ||
+ | if (window.XMLHttpRequest) { // Mozilla, Safari, ... | ||
+ | httpRequest = new XMLHttpRequest(); | ||
+ | } else if (window.ActiveXObject) { // IE | ||
+ | httpRequest = new ActiveXObject(" | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ---- | ||
+ | |||
+ | Some versions of some Mozilla browsers won't work properly if the response from the server doesn' | ||
+ | <code javascript> | ||
+ | httpRequest = new XMLHttpRequest(); | ||
+ | httpRequest.overrideMimeType(' | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== Response handler ===== | ||
+ | |||
+ | |||
+ | * You need to decide what you want to do after you receive the server response to your request. | ||
+ | * At this stage, you just need to tell the HTTP request object which JavaScript function will do the work of processing the response. | ||
+ | * This is done by setting the '' | ||
+ | <code javascript> | ||
+ | httpRequest.onreadystatechange = nameOfTheFunction; | ||
+ | </ | ||
+ | |||
+ | ---- | ||
+ | |||
+ | Note that there are no brackets after the function name and no parameters passed, because you're simply assigning a reference to the function, rather than actually calling it. Also, instead of giving a function name, you can use the JavaScript technique of defining functions on the fly (called " | ||
+ | <code javascript> | ||
+ | httpRequest.onreadystatechange = function(){ | ||
+ | // do the thing | ||
+ | }; | ||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | ===== Make the request ===== | ||
+ | |||
+ | |||
+ | * After you've declared what will happen as soon as you receive the response, you need to actually make the request. | ||
+ | * You need to call the '' | ||
+ | <code javascript> | ||
+ | httpRequest.open(' | ||
+ | httpRequest.send(null); | ||
+ | </ | ||
+ | |||
+ | ---- | ||
+ | |||
+ | The first parameter of the call to '' | ||
+ | |||
+ | The second parameter is the URL of the page you're requesting. As a security feature, you cannot call pages on 3rd-party domains. Be sure to use the exact domain name on all of your pages or you will get a ' | ||
+ | |||
+ | The third parameter sets whether the request is asynchronous. If '' | ||
+ | |||
+ | The parameter to the '' | ||
+ | |||
+ | name=value& | ||
+ | |||
+ | Note that if you want to '' | ||
+ | <code javascript> | ||
+ | httpRequest.setRequestHeader(' | ||
+ | </ | ||
+ | |||
+ | Otherwise, the server will discard the POSTed data. | ||
+ | |||
+ | |||
+ | ===== Step 2: Handling the Server Response ===== | ||
+ | |||
+ | * Remember that when you were sending the request, you provided the name of a JavaScript function that is designed to handle the response. | ||
+ | <code javascript> | ||
+ | httpRequest.onreadystatechange = nameOfTheFunction; | ||
+ | </ | ||
+ | * This function should have this structure: | ||
+ | <code javascript> | ||
+ | if (httpRequest.readyState == 4) { | ||
+ | // everything is good, the response is received | ||
+ | } else { | ||
+ | // still not ready | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ---- | ||
+ | |||
+ | The function needs to check for the state of the request. If the state has the value of 4, that means that the full server response is received and it's OK for you to continue processing it. | ||
+ | |||
+ | The full list of the '' | ||
+ | |||
+ | 0 (uninitialized) | ||
+ | 1 (loading) | ||
+ | 2 (loaded) | ||
+ | 3 (interactive) | ||
+ | 4 (complete) | ||
+ | |||
+ | |||
+ | ===== Check the status code of the HTTP server response ===== | ||
+ | |||
+ | * For our purposes we are only interested in '' | ||
+ | <code javascript> | ||
+ | if (httpRequest.status == 200) { | ||
+ | // perfect! | ||
+ | } else { | ||
+ | // there was a problem with the request, | ||
+ | // for example the response may be a 404 (Not Found) | ||
+ | // or 500 (Internal Server Error) response codes | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== Do something with the response data ===== | ||
+ | |||
+ | * It's up to you to do whatever you want with the data the server has sent to you. | ||
+ | * You have two options to access that data: | ||
+ | * '' | ||
+ | * '' | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== Step 3: A Complete Example ===== | ||
+ | |||
+ | * Let's put it all together and do a simple HTTP request ([[http:// | ||
+ | * Our JavaScript will request an HTML document, [[http:// | ||
+ | |||
+ | |||
+ | |||
+ | ===== Step 4: Working with the XML Response ===== | ||
+ | |||
+ | |||
+ | * In the previous example, after the response to the HTTP request was received we used the '' | ||
+ | * First off, let's create a valid XML document that we'll request later on. The document ([[http:// | ||
+ | <code xml> | ||
+ | <?xml version=" | ||
+ | < | ||
+ | I'm a test. | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | ===== Request line ===== | ||
+ | |||
+ | * In the script we only need to change the request line to: | ||
+ | <code html> | ||
+ | ... | ||
+ | onclick=" | ||
+ | ... | ||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== alertContents() ===== | ||
+ | |||
+ | * Then in '' | ||
+ | <code javascript> | ||
+ | var xmldoc = httpRequest.responseXML; | ||
+ | var root_node = xmldoc.getElementsByTagName(' | ||
+ | | ||
+ | </ | ||
+ | |||
+ | ---- | ||
+ | |||
+ | This code takes the '' | ||
+ | |||
+ | <source http:// | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== Case Study 2: Another Ajax Tutorial ===== | ||
+ | |||
+ | * This second case study is also on-line at [[http:// | ||
+ | * It calls on a server script rather than a static file. | ||
+ | <code php> | ||
+ | <? | ||
+ | echo date(" | ||
+ | ?> | ||
+ | </ | ||
+ | * Here is the example: [[http:// | ||
+ | |||
+ | |||
+ | |||
+ | ---- | ||
+ | |||
+ | Here is the code: | ||
+ | <source http:// | ||
+ | |||
+ | See the [[http:// | ||
+ | |||
+ | ===== Case Study 3: Video ===== | ||
+ | |||
+ | * This screen cast "What is Ajax?" has been provided by [[http:// | ||
+ | * It defines Ajax and shows an entertaining, | ||
+ | * By gradually adding features, the screencast makes you think about the richness of your users' experience and shows you how it is done. | ||
+ | * It is narrated by Marco Baringer, and is 18 minutes long (27MB download) [copy on Blacboard site]. | ||
+ | * You will need Apple' | ||
+ | |||
+ | ===== Critique ===== | ||
+ | |||
+ | * Like many Web technologies that preceded it, Ajax is subject to large amounts of hype((Jeffrey Zeldman, "Web 3.0", //A List Apart//, January 16, 2006. URL: http:// | ||
+ | * It produces nice user experiences at the cost of increased complexity for developers | ||
+ | * Prepackaged Ajax components, JavaScript libraries and Ajax Frameworks((Ajax Framework, Wikipedia, the free encyclopedia. URL: [[wp> | ||
+ | * These aim to reduce the complexity by encouraging the use of existing web application development techniques. | ||
+ | * Some examples: [[http:// | ||
+ | | ||
+ | |||
+ | ===== Ajax in jQuery ===== | ||
+ | * From [[http:// | ||
+ | * Video (from [[http:// | ||
+ | < | ||
+ | <object width=" | ||
+ | |||
+ | ===== Further Reading ===== | ||
+ | |||
+ | * Despite its relative youth, there are many web sites and books that describe Ajax. In 2007, I counted in excess of 50 books on Amazon alone! | ||
+ | * Three books that I actually own are: | ||
+ | * Dave Crane, Eric Pascarello, and Darren James, //Ajax in Action//, Manning, 2005. | ||
+ | * Brett McLaughlin, //Head Rush Ajax//, O' | ||
+ | * Justin Gehtland, Dion Almaer, and Ben Galbraith, //Pragmatic Ajax: A Web 2.0 Primer//, The Pragmatic Programmers, | ||
+ | * The [[http:// | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== Summary of This Lecture ===== | ||
+ | |||
+ | An introduction to AJAX | ||
+ | |||
+ | * [[eg-259: | ||
+ | * [[eg-259: | ||
+ | * [[eg-259: | ||
+ | * [[eg-259: | ||
+ | * [[eg-259: | ||
+ | * [[eg-259: | ||
+ | * [[eg-259: | ||
+ | |||
+ | ===== Learning Outcomes ===== | ||
+ | |||
+ | //At the end of this lecture you should be able to answer these questions//: | ||
+ | |||
+ | * Define Ajax | ||
+ | * What technologies does Ajax use? | ||
+ | * How does the Ajax web differ from the classic web? | ||
+ | * How does Ajax improve the user experience? | ||
+ | * Who uses Ajax? | ||
+ | * What is the Ajax engine? | ||
+ | * What is JSON? | ||
+ | * What advantage does an Ajax framework provide the web developer? | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== Homework ===== | ||
+ | |||
+ | * Acquire and read the Wikipedia and web articles referenced in the wiki page. | ||
+ | * Work through the [[http:// | ||
+ | * Work through the [[http:// | ||
+ | * Watch the videos mentioned in [[# | ||
+ | * Evaluate any of the available Ajax frameworks mentioned in the [[# | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===== What's Next? ===== | ||
+ | |||
+ | ** Basic Web Server Operation ** | ||
+ | |||
+ | An introduction to server-side programming with a description of the operation of a basic webserver | ||
+ | |||
+ | * The roles of a web server and web client | ||
+ | * Modern Web Servers | ||
+ | * Introducing the Apache Web Server | ||
+ | * Revision of the HyperText Transfer Protocol (HTTP) | ||
+ | * Web server operation | ||
+ | * Mapping resources to files | ||
+ | |||
+ | [[eg-259: | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ---- | ||
+ | |||
+ | Here is the code: | ||
+ | <source http:// | ||
+ | |||
+ | In this example: | ||
+ | |||
+ | * The user clicks the link "Make a request" | ||
+ | * This calls the '' | ||
+ | * The request is made and then ('' | ||
+ | * '' | ||
+ | |||
+ | See additional [[http:// | ||
+ | |||