on the web
• Why live updates?
• Examples on the web
Copyright By PowCoder代写 加微信 powcoder
• Differentapproaches
• Demo 1: set up the client
• Demo 2: set up the server
• Demo 3: tutorial app
classic www
User gets HTML page with data
User gets HTML page with JS that will get data
live updates
Phase 1: initial page load
Phase 2: updates
Client Server
frequently
changing!!!!!!! !!!!!
• Ajax using XMLHttpRequest (XHR)
• client-side frameworks e.g. React [whole page]
• push:server-sentevents,Websockets
[wrapper for XHR]
[wrapper for XHR – requires library] [+ other features – requires library]
This lecture includes three demonstrations:
1. Client setup (html, js) 2. Server setup (api)
3. Tutorial app
• assign id to HTML that will change
• add Ajax functions to web page
• Ajax can be triggered by user or timer
• Ajax asks server for data
• incoming data is added to page
• Both user-triggered and polling
• Both XHR and fetch()
Set up web pages as before, then:
• set up API routes that Ajax can call
• routes get data from db and return it
• return data, not HTML
• client-side js places data in the page
• Client and API
• Both user-triggered
and polling
• fetch() only
• app from Live Updates tutorial
• code is in the tutorial handout
程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com