Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

SENG365 > Communicating with servers in SPAs:AJAX, XHR, CORS, and Web sockets (Week 8) > Flashcards

Communicating with servers in SPAs:AJAX, XHR, CORS, and Web sockets (Week 8) Flashcards

1
Q

What is AJAX?

✨✨✨

A

Asynchronous Javascript and XML.

A set of techniques for accessing web servers from a web page.

Makes it possible to update parts of the web page without reloading the page (update data behind the scene asynchronously).

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

How do you get data from the server without refreshing the page?

A

AJAX and XHR.

Fires requests to get data and executes http methods programatically using javascript

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What are the problems of events?(6)

A

❌ reactive (waiting before act)

❌ asynchronous (don’t know when)

❌ dependencies (between assets on page)

❌ system & user (system can initiate event AJAX)

❌ volume (# of events handled)

❌ changeability (SPA events change)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What are some solutions to problems with events?(6)

A

✔️ handlers

✔️ callbacks

✔️ promises

✔️ reactive programming

✔️ async functions

✔️ generators

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Why has REST replaced SOAP?

✨✨✨

A

✔️ Easier to use

✔️ Accepted through firewalls

SOAP has a very heavy infrastructure

✔️ REST works well with AJAX

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What is the difference between AJAX and $.ajax()

A

AJAX is a library

$.ajax() is a call to the library

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

20

$(document).ready(function(){

21 $.ajax({

22 type: “GET”,

23 url: “http://results.com/api/xml/competitions.php”,

24 data: “competitor=1195&season=2016”,

25 dataType: “xml”,

26 success: function(xml) {…}

27 });

28 });

What is happening at 20, 22-24, 25, 26

A

20 - when document is <strong>fully loaded</strong>

22 - GET -request type

23 - this url

24 - data being sent

25 - data type being sent

26 - if successful get, do this

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What is the purpose of I/O thread and Main thread?

A

Allow for simultaneous processes that don’t block

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Comment on the architecture of diagram of under the hood of the Chrome browser - See diagram doc - #8

A

multi process architectures

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What do SPAs separate?

A

data (both client and server) from content and presentation

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

In terms of getting data from server into SPA, what is the problem/requirement that is needed?

A

Need some way of performing HTTP requests concurrently to, and independently of, the user interacting with the application on the browser –> Security, usability, etc

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What type of threading does JS have?

A

JS is single threaded

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Summarize XHR / AJAX (5)

✨✨✨

A

1) Execute HTTP methods programmatically, and in the ‘background’ -> But remember that JavaScript is single threaded.
2) Use JavaScript to issue HTTP requests e.g. HTTP GET, HTTP POST etc.

3) Use XMLHttpRequest
(XHR) JavaScript API

–> Raw JavaScript XHR; or

–> Abstraction of XHR e.g. jQuery’s $.ajax() method, Vue.js’ vue-resource (v2, not v3), axios etc.

4) Setup XHR request
5) Execute the request

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

In terms of XHR/AJAX, when setting up XHR request, what things do you specify?

A

1) HTTP <strong>request</strong>

–> Method e.g. GET, etc. including ? query parameters

–> Body e.g. what’s in the HTTP body you’re sending (of anything)

2) Expected HTTP <strong>responses</strong>: what data you want back from the server e.g. JSON, XML etc
3) <strong>Callbacks</strong> for handling the range of HTTP response/s

–> e.g. successful | unsuccessful response

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Explain the example of raw XHR - see image doc - #9

A

1) onreadystatechange –> when we receive response, execute anonymous function
2) this.readyState == 4 –> 4 = done

Other magic numbers:

0 = unsent –> open() but not send()

1 = opened –> opened() and send()

3 = loading

3) xhttp.open() and xhttp.send() –> open connection and send

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Explain the model in image #10

A

FINISH EXPLANATION

1) request event from application goes to the demultiplexer

Demultiplexer stores event in <strong>non-blocking way</strong>

2) Once demultiplexer done, handling pushes out to Event Queue
3) If some event present, Event Queue passes to event loop

4)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

Benefits of concurrency (5)

A
  1. decreasing waiting time.
  2. decreasing response time.
  3. increases resource utilzation.
  4. increases efficiency.
  5. Allows for non-blocking behaviour
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

Compare concurrency and parallelism

A

concurrency is the composition of independently executing processes, while parallelism is the simultaneous execution of (possibly related) computations.

🧠 Concurrency is about <strong>dealing</strong> with lots of things at once.

🤹‍♀️ Parallelism is about <strong>doing</strong> lots of things at once.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

Why is the term ‘XMLHttpRequest (XHR)’ now misleading?

A

1) Can retrieve data other than XML e.g. JSON
2) Works with other protocols, not just HTTP
3) Doesn’t have to be asynchronous… but should be asynchronous and NOT synchronous

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

Why is it best use an abstraction rather than raw XHR e.g. jQuery’s $.ajax() or a library such as axios for Vue , or fetch API?

A

Internet Explorer variants do things differently.

e.g. XDomainRequest in Internet Explore 8 and 9

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

What are the events (and therefore event handlers) for XHR? (8)

A

1) onloadstart
2) onprogress
3) onabort
4) onerror
5) onload
6) ontimeout
7) onloadend
8) onreadystatechange –> Legacy; deprecated

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

What is the fetch API?

A

<strong>Modern interface that allows you to make HTTP requests to servers from web browsers.</strong>

It uses the Promise to deliver more flexible features to make these requests.</strong>

1) ES6 style JS
2) syntactic sugar for promises
3) Native Javascript API introduced in 2017

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

Give the fetch API pattern for a basic fetch.

A

See diagrams doc - #11

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

Give the fetch API pattern for a basic fetch that uses an async function

A

See diagrams doc - #12

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

What does CORS stand for?

A

Cross Origin Resource Sharing

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

What is the main purpose of CORS?

✨✨✨

A

🦀 Request resources from different domains/servers.

🦀 <strong>Defines a way in which a browser and server can interact to determine if it is safe to allow cross origin requests.</strong>

🦀 Uses Http headers and relies on the browser to honour the restrictions.

🦀 Prevents people from drawing lots of info from resources they that aren’t allowed to

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

Explain the everyday and legitimate cross-origin resource request diagram –> See diagram #13

A

TODO

1) Browser sends an HTTP request to first.com to retrieve Resource A’s HTML
2) The server retrieves Resource A and delivers it to the browser in an HTTP response
3) The browser then sends another HTTP request to another address second.com to get Resource B’s image
4) The server retrieves this resource and delivers it to the browser in an HTTP response

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

What is a common practice for many web pages (web applications) to do in terms of loading resources?

A

Load resources from separate <strong>domains</strong> –> CSS stylesheets, images, frames, video

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

Explain the cross-origin requests with diagram –> See diagram #14

✨✨✨

A

If a script wants to get image, gets CORS error as can only make request to originating origin that originally contact i.e. first.com

<strong>For security reasons, browsers restrict [scripts]s in the way they make cross-origin resource requests. By default, an XHR request can be made only to the originating origin (the same origin)</strong>

30
Q

What is a common practice for many web pages (web applications) to do in terms of loading resources?

A

Load resources from separate domains  CSS stylesheets, images, frames, video

31
Q

What sorts of “cross-domain” requests are forbidden by the same-origin security policy? Why?

✨✨✨

A

AJAX/ XHR requests

AJAX requests are JavaScript and [script]s can’t by default make cross-origin requests

32
Q

What does CORS define?

✨✨✨

A

a way in which a browser and a server can work together to determine whether or not it is safe to allow a client-side app to make a cross-origin request

33
Q

What enforces CORS?

A

Browser

34
Q

What does the CORS standard describe?

✨✨✨

A

<strong>HTTP headers</strong> (how to access URLs e.g. permissions) <strong>which provide browsers and servers a way to request remote URLs only when they have permission </strong>

The app can’t access (some of) these headers

35
Q

In terms of CORS, who has to perform some validation and authorisation?

A

Server

36
Q

In terms of CORS, who is generally responsible for supporting the headers and honouring the restrictions they impose?

A

Browser

Note: not the application’s responsibility; the browser’s responsibility e.g. to prevent the application doing something

37
Q

In terms of CORS, what defines origin?

A

Origin is defined in terms of:

1) Protocol
2) Domain
3) Port

38
Q

If two addresses have the identical { protocol, domain, port}, is it same-origin or cross-origin?

A

Same origin

39
Q

If two addresses have the different { protocol, domain, port}, is it same-origin or cross-origin?

A

Cross-origin

40
Q

Which of the following are same-origin and cross-origin?

1) http:example.com:80
2) https:example.com:80
3) http:exemple.com:80
4) http:example.com:463

A

All are cross-origin as have different {protocol, domain, port}

41
Q

What are HTTP forbidden headers? Give examples.

A

1) <strong>Some headers are managed by the browser and/or the server, and these headers can’t be manipulated by the client-side application</strong>
2) “A forbidden header name is an HTTP header name that cannot be modified programmatically; specifically, an HTTP request header name.”

3)	Examples of forbidden headers ( browser should prevent you from modifying these): 
<strong>
Access-Control-*
Access-Control-Origin
Access-Control-Headers
Origin
</strong>
42
Q

What does ‘Access-Control-Allow-Origin: *’ allow?

A

Allow the request from any origin

43
Q

What does ‘Access-Control-Allow-Origin: https://foo.bar’ allow?

A

Allow the request only from resources originating from HTTPS://foo.bar (remember what defines an origin)

44
Q

What does ‘Access-Control-Allow- Methods: POST, GET, OPTIONS’ allow?

A

Allow only these HTTP methods

45
Q

What does ‘Access-Control- Max-Age: 86400’ allow?

A

Access is allowed for up to 86400 milliseconds (86.4s)

46
Q

When is ‘Access-Control- Credentials: true’ required?

A

Required if you want to send cookies etc
(and can’t use Access-Control-Allow-
Origin: *)

47
Q

Explain the example diagram of ‘accept request from foo.com only’ - #15

A

1) make original request to foo.com
2) comes back as a script, has XHR in it
3) XHR executes something that requests origin: https://foo.com
NOTE: browser adds in origin as header
4) makes request
5) response returned

Works for single origin

48
Q

Explain the example diagram of ‘accept request from anywhere (*)’ - #img 16

A

1) make original request to foo.com
2) comes back as a script, has XHR in it
3) XHR executes something that requests origin: https://foo.com
NOTE: browser adds in origin as header
4) makes request
5) response returned

Works for any origin e.g. local host

49
Q

Explain the example diagram of ‘reject request’ - img #17

A

rejects request as access control origin is boo.com but request is foo.com

So, makes request but browser will not honour it

Browser implements rule i.e. blocks

50
Q

Explain the example diagram of ‘fooling the server’ - img #18

A

Fool by writing browser that doesn’t support CORS

Harming user of browser

51
Q

What does JSON-P refer to?

A

JSON with padding

52
Q

Explain JSON-P?

Comment on age, usefulness and security.

A
  • A much older approach to get data, pre-CORS

So may still be useful for old/er browsers that don’t support CORS

  • Has security weakness so should use CORS instead
53
Q

How does JSON-P work?

A

🦚 Request a [script] from another origin (this is legal)

🦚 Server wraps the data, that you want to get access to, inside the script

🦚 In the app on the client side, you call the function in the [script] and unpack the data

–> Server and app must know beforehand what the function name etc is

–> There is still cooperation needed with server

NOTE: [ = < and ] = >

54
Q

Compare HTTP AJAX with Web sockets

✨✨✨

A

<strong>HTTP, AJAX</strong>:
🦧 Uni-directional communication: client makes request, server makes response
🦧 stateless
🦧 Relatively less efficient
🦧 Good for retrieving resources
🦧 Must implement polling to get updates from the server

<strong>Web Sockets</strong>
🐳 Persistent 2-way communication
🐳 Maintains state
🐳 Fast, lightweight and can maintain much higher load of connections
🐳 Good for real-time communication: chats, games, etc.
🐳 Server can push data to client

55
Q

Compare polling and pushing in terms of HTTP AJAX and web sockets.

✨✨✨

A

<strong>HTTP AJAX uses polling</strong>

🦧client initiates and says that it wants an update (via a GET) from the server
🦧 poll server then get response from server

<strong>Web sockets use pushing.</strong>
🐳 establish web connection and then server can push data to the client

56
Q

How are web socket connections made?

✨✨✨

A

Handshake mechanism

  1. Client send initial HTTP GET request to the server.
  2. Server responds with information on how to connect to socket server.
  3. Client sends HTTP GET with header “Connection: Upgrade” and connection is upgraded to a socket connection.
57
Q

Is it common for browsers to support web socket API?

A

Yes, web sockets are now supported in most browsers

58
Q

How is the web socket API implemented in npm packages?

A

e.g. ws, socket-io, websocket, and express-ws (express integration with ws)

Some libraries implement fallback (emulates socket connection in http when not supported in browser)

59
Q

Explain the sample client connection example - image doc #19

A

TODO

60
Q

Explain the simple server example - image doc #20

A

TODO

61
Q

In terms of the browser process section of the Chrome browser, what does the browser maintain?

See diagram doc - #8

A

browser maintains main and I/O thread

62
Q

In terms of the browser process section of the Chrome browser, what does the browser process allow for?

See diagram doc - #8

A

allow for different things to run side by side without blocking each other

63
Q

In terms of the browser process section of the Chrome browser, what does the main/UI thread do?

See diagram doc - #8

A

main/UI thread renders web pages onto screen

64
Q

In terms of the browser process section of the Chrome browser, what does the I/O thread handle?

See diagram doc - #8

A

I/O thread handles inter-process communication and network connections (with other servers)

65
Q

In terms of the render process section of the Chrome browser, what threads does the render process use?

See diagram doc - #8

A

has render and main threads

66
Q

In terms of the render process section of the Chrome browser, what component of the render process do the main work? What does it handle?

See diagram doc - #8

A

RenderProcess is the main work, where it handles inter-process communication events

67
Q

In terms of the render process section of the Chrome browser, what are the components of the render thread?

See diagram doc - #8

A

Render thread has the RenderView, WebKit and ResourceDispatcher pieces.

68
Q

In terms of the render process section of the Chrome browser, what does the ResourceDispatcher ask for?

See diagram doc - #8

A

resources

69
Q

In terms of the render process section of the Chrome browser, what does the RenderProcess handle?

See diagram doc - #8

A

request and response

70
Q

In terms of the render process section of the Chrome browser, what is WebKit?

See diagram doc - #8

A

WebKit is rendering engine inside Chrome (constructs DOM and draw web page pieces, V8 engine lives here)

71
Q

In terms of the Chrome browser, what is the result of the structure overall?

See diagram doc - #8

A

Means that if one tab fails, others will keep working.

72
Q

Is it common for modern browsers to implement Fetch API?

A

Yes

SENG365 (8 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions