Networking & The Web. HCID 520 User Interface Software & Technology

Size: px

Start display at page:

Download "Networking & The Web. HCID 520 User Interface Software & Technology"

Millicent Alexia Oliver
5 years ago
Views:

1 Networking & The Web HCID 520 User Interface Software & Technology

2 Uniform Resource Locator (URL) HTTP v0.9

3 Uniform Resource Locator (URL) Scheme/Protocol 1991 HTTP v0.9

4 Uniform Resource Locator (URL) Scheme/Protocol Host 1991 HTTP v0.9

5 Uniform Resource Locator (URL) Host Scheme/Protocol Port 1991 HTTP v0.9

6 Uniform Resource Locator (URL) Host Path Scheme/Protocol Port 1991 HTTP v0.9

7 1992 Line Mode Browser

8 WorldWideWeb, first graphical browser

9 Mosaic, commercialized as Netscape

10 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

11 Request Response Headers Content

12 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

13 Server-Side Client-Side Web Server HTTP Request HTTP Response Web Browser SQL What about interactivity? Database

14 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.

15 Mosaic, commercialized as Netscape

17 Netscape Navigator Internet Explorer 1995 JavaScript created... in 10 days

18 Netscape Navigator Internet Explorer 1997 DHTML & Proprietary DOMs

19 Netscape Navigator Internet Explorer 2000 XMLHttpRequest

20 Netscape Navigator Internet Explorer 2001 Internet Explorer 6

21 Firefox Internet Explorer XMLHttpRequest standardized ("AJAX") Firefox released 2004

22 Firefox Chrome New Browser built on Webkit, V8, node Chrome released 2008

23 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

24 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

25 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

26 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

27 XMLHttpRequest (XHR) Server-Side Web Server Client-Side JavaScript Call UI (HTML) var xhr = new XMLHttpRequest(); Database

28 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().

29 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();

30 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)

31 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();

32 XMLHttpRequest (XHR) Libraries to the rescue! E.g., jquery: $.get("url", function(text) { }); $.getjson("url", function(json) { }); $.post("url", data, function() { });

33 JavaScript Object Notation (JSON) Basic Types (Primitives) Boolean true false Number String "hello" No Value null Advanced Types Object {"key": value} Array [value, value,...]

34 JavaScript Object Notation (JSON) [true, false, true, true, false] Array of booleans. [5, 0.491, 80, 29.41, ] Array of numbers. ["whiskey", "tango", "foxtrot"] Array of string.

35 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.

36 What about interaction initiated by the server?

38 WebSockets var socket = new WebSocket("wss://echo.websocket.org"); New URL scheme for WebSockets. ws : http :: wss : https

39 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).

40 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); };

41 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) { });

Networking & The Web. HCID 520 User Interface Software & Technology

Networking & The Web. HCID 520 User Interface Software & Technology Networking & The 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