ASYNCHRONOUS
NETWORKING Client-Server Model + AJAX
• Client-Server Model + AJAX
Copyright By PowCoder代写 加微信 powcoder
• Concurrency & JS
• NetworkingwithXMLHttpRequest()
• Networking with Promises & fetch()
• Networking with async/await & fetch()
CLIENT-SERVER INTERACTION
Client Server
Smart phones, laptops, etc. Racks of machines in datacentres
CLIENT-SERVER INTERACTION
Waiting for requests
Makes a request to a server
e.g. Search for websites that contain ‘cats’
Request https://duckduckgo.com/ac/?q=cats
CLIENT-SERVER INTERACTION
Client Server
Receives payload as a server response Validates arguments, executes API, returns data Renders the HTML & CSS, executes the JS
{“autocomplete”: [“cats”, “catsis”]}
Webapp Clients
CLIENT-SERVER REALITY Server
Webapp Clients Request
CLIENT-SERVER REALITY2 Servers
Latest News API Super cool cats API
Client-side
• Interactivity + responsiveness = low
latency is most important
• Page loads ideally fast + once
• Losing your place in a page due to reload is bad UX
Server-side
• Need to handle at least thousands of requests
• Resources (time, power, # of servers) are expensive
• Maximising throughput is most important
LATENCY & THROUGHPUT: THE PROBLEM
EVOLUTION OF THE CLIENT-SERVER
A BRIEF HISTORY
1990s & early 2000s
• Clients = majority desktop web browsers
• On-site servers
• Era of “static webpages”
i.e. server-side rendering
• Scale by upgrading server
Mid-2000s – Early 2010s
• Majority of clients still desktop browsers
• JS adding much more interactivity client-side
• Still scale server vertically
~2010s – Present
• iPhone ushers in the smart
• Clients now IoT and mobile • Almost all rendering is
client-side
• Cloud server-hosting is
• Scale servers horizontally
Client-side
• Leave presentation strictly to the frontend
• Initial page load contains minimal necessary data
• Fetch data asynchronously as needed (“lazy-loading”)
LATENCY & THROUGHPUT: SOLUTIONS?
Server-side
• Scale to handling millions of requests per second by asynchronous event processing
• Whilst waiting for I/O, serve another request => never idle
• Increase load-balancing by adding more servers
Asynchronous Javascript And
• AJAX = set of techniques to create asynchronous webapps.
• Not any one particular technology • Allowsofflineapps,smoothUI/UX,
modular frontend & backend
*JSON is used more nowadays rather than XML. So, Ajaj? Doesn’t quite roll off the tongue as well.
Image Credit: Wikipedia
DEFINING AJAX
• Client-ServerModel • AJAX
• Coming Up Next:
• Concurrency&JS
程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com