Networking & The Web HCID 520 User Interface Software & Technology
Uniform Resource Locator (URL) http://info.cern.ch:80/ 1991 HTTP v0.9
Uniform Resource Locator (URL) http://info.cern.ch:80/ Scheme/Protocol 1991 HTTP v0.9
Uniform Resource Locator (URL) http://info.cern.ch:80/ Scheme/Protocol Host 1991 HTTP v0.9
Uniform Resource Locator (URL) Host http://info.cern.ch:80/ Scheme/Protocol Port 1991 HTTP v0.9
Uniform Resource Locator (URL) Host Path http://info.cern.ch:80/ Scheme/Protocol Port 1991 HTTP v0.9
1992 Line Mode Browser
http://home.cern/topics/birth-web 1993 WorldWideWeb, first graphical browser
https://en.wikipedia.org/wiki/mosaic_(web_browser) 1994 Mosaic, commercialized as Netscape
Server-Side Client-Side Route Request Process Data Build Response Send Response Web Server HTTP Request HTTP Response Web Browser Go to URL Get Response Render Page SQL Database
Request Response Headers Content
Server-Side Web Server Server Technologies Apache (basic server) Java Servlets PHP Ruby on Rails (Ruby) Django (Python) Web Node.js / JavaScript Browser and many others HTTP Request HTTP Response Client-Side SQL Database Databases MySQL Postgres SQLite MongoDB and many others
Server-Side Client-Side Web Server HTTP Request HTTP Response Web Browser SQL What about interactivity? Database
Server-Side Client-Side Web Server HTTP Request HTTP Response Web Browser SQL Database What about interactivity? In the early days, users could submit forms. The server would process the results and return a new page.
https://en.wikipedia.org/wiki/mosaic_(web_browser) 1994 Mosaic, commercialized as Netscape
Netscape Navigator Internet Explorer 1995 JavaScript created... in 10 days
Netscape Navigator Internet Explorer 1997 DHTML & Proprietary DOMs
Netscape Navigator Internet Explorer 2000 XMLHttpRequest
Netscape Navigator Internet Explorer 2001 Internet Explorer 6
Firefox Internet Explorer XMLHttpRequest standardized ("AJAX") Firefox released 2004
Firefox Chrome New Browser built on Webkit, V8, node Chrome released 2008
Server-Side Client-Side Route Request Process Data Build Response Send Response Web Server HTTP Request HTTP Response Web Browser Go to URL Get Response Render Page SQL (HTML, CSS, etc.) Database
Server-Side Client-Side Route Request Process Data Build Response Send Response Web Server HTTP Request HTTP Response Web Browser Go to URL Get Response Render Page SQL (HTML, CSS, etc.) Database
Server-Side Client-Side (XML/JSON) Route Request Process Data Build Response Send Response Web Server HTTP Request HTTP Response JavaScript Call Update UI (HTML) SQL (XML/JSON) Database
Server-Side Client-Side (XML/JSON) Route Request Process Data Build Response Send Response Web Server HTTP Request HTTP Response JavaScript Call Update UI (HTML) SQL (XML/JSON) Database
XMLHttpRequest (XHR) Server-Side Web Server Client-Side JavaScript Call UI (HTML) var xhr = new XMLHttpRequest(); Database
XMLHttpRequest (XHR) Server-Side Web Server HTTP Request Client-Side JavaScript Call UI (HTML) var xhr = new XMLHttpRequest(); Database // Make the request xhr.open("get", "//api.github.com/users/vega/repos", true); xhr.send(); HTTP Post Content "?sort=updated" URL HTTP Method "GET", "POST", "PUT", "DELETE", etc. Asynchronous? i.e., should execution wait for xhr.send().
XMLHttpRequest (XHR) var xhr = new XMLHttpRequest(); Server-Side Route Request Process Data Build Response Send Response Web Server SQL Database HTTP Request HTTP Response Client-Side JavaScript Call UI (HTML) // Handle the response xhr.onreadystatechange = function() { }; // Make the request xhr.open("get", "//api.github.com/users/vega/repos", true); xhr.send();
XMLHttpRequest (XHR) var xhr = new XMLHttpRequest(); Server-Side Route Request Process Data Build Response Send Response Web Server SQL Database HTTP Request HTTP Response Client-Side JavaScript Call UI (HTML) // Handle the response xhr.onreadystatechange = function() { if (xhr.readystate == 4 && xhr.status == 200) { } }; // Make the request xhr.open("get", "//api.github.com/users/vega/repos", true); xhr.send(); XHR operation complete. HTTP Status Code. 200 (OK)
XMLHttpRequest (XHR) var xhr = new XMLHttpRequest(); Server-Side Route Request Process Data Build Response Send Response Web Server SQL Database HTTP Request HTTP Response Client-Side JavaScript Call UI (HTML) // Handle the response xhr.onreadystatechange = function() { if (xhr.readystate == 4 && xhr.status == 200) { var response = JSON.parse(xhr.responseText); } }; // Make the request xhr.open("get", "//api.github.com/users/vega/repos", true); xhr.send();
XMLHttpRequest (XHR) Libraries to the rescue! E.g., jquery: $.get("url", function(text) { }); $.getjson("url", function(json) { }); $.post("url", data, function() { });
JavaScript Object Notation (JSON) Basic Types (Primitives) Boolean true false Number 0 1 5.6 0.3 String "hello" No Value null Advanced Types Object {"key": value} Array [value, value,...]
JavaScript Object Notation (JSON) [true, false, true, true, false] Array of booleans. [5, 0.491, 80, 29.41, 3.14159] Array of numbers. ["whiskey", "tango", "foxtrot"] Array of string.
JavaScript Object Notation (JSON) {"fruit": "apples", "amount": 2} Object with two keys and a string and number value. {"fruits": ["apples", "bananas"], "amount": 2} Object with an array and number value. [{"fruit": "apples"}, 4, true, null] Array of values.
What about interaction initiated by the server?
https://brigetteheffernan.wordpress.com/category/illustrations/
WebSockets var socket = new WebSocket("wss://echo.websocket.org"); New URL scheme for WebSockets. ws : http :: wss : https
WebSockets var socket = new WebSocket("wss://echo.websocket.org"); // Send a message to the server socket.onopen = function() { socket.send("hello"); }; Can be any JSON data types, including binary data (e.g., images).
WebSockets var socket = new WebSocket("wss://echo.websocket.org"); // Send a message to the server socket.onopen = function() { socket.send("hello"); }; // Receive messages from the server socket.onmessage = function(msg) { console.log(msg.data); };
WebSockets Libraries to the rescue (again!). E.g., socket.io: var socket = io(wss://echo.websocket.org"); socket.send("ant", mousex, mousey); socket.on("ant", function(mousex, mousey) { });