Skip to content

Request Sequence Demos

Simple LR

  • Left: A

  • Right: B

  • Requests:

    1. LR ---> Hello!
    2. LR <--- Hello!
    3. LR ---> How are you?
    4. LR <--- I'm good, thanks

Simple LR with Info

  • Left: A

  • Right: B

  • Requests:

    1. LR ---> Hello!
    2. LR <-i- Thinks...
    3. LR <--- Hello!
    4. LR -i-> Happy!
    5. LR ---> How are you?
    6. LR <--- I'm good, thanks

HTTP Requests

  • Left: Web Browser

    The web browser is the client

  • Right: Web Server

    The web server services requests from the client

  • Requests:

    1. LR ---> GET Request: index.html
    2. LR <--- Response (200): index.html
    3. LR -i-> Parses HTML
    4. LR ---> GET Request: styles.css
    5. LR <--- Response (200): styles.css
    6. LR -i-> Renders the page

Simple LMR

  • Left: A

  • Middle: B

  • Right: C

  • Requests:

    1. LM ---> Hello!
    2. MR ---> Hello!
    3. MR <--- How are you?
    4. LM <--- How you are?

  • Left: A

  • Middle: B

  • Right: C

  • Requests:

    1. LM ---> Hello!
    2. LM <-i- Ponders on this
    3. MR ---> Hello!
    4. MR <-i- Is excited!
    5. MR <--- How are you?
    6. LM <--- How you are?

Web App

  • Left: Web Browser

    The web browser is the client

  • Middle: Web Server

    The web server services requests from the client

  • Right: DB Server

    The DB server services database requests from the web server

  • Requests:

    1. LM ---> HTTP GET /
    2. LM <-i- Matches route
    3. MR ---> SQL SELECT
    4. MR <--- DB Data
    5. LM <-i- Builds page
    6. LM <--- HTTP Response HTML
    7. LM -i-> Parses HTML
    8. LM ---> HTTP GET styles.css
    9. LM <--- HTTP Response CSS
    10. LM -i-> Renders page

Animated

  • Left: A

  • Right: B

  • Requests:

    1. LR ---> Hello!
    2. LR <--- Hello!
    3. LR ---> How are you?
    4. LR <--- I'm good, thanks

  • Left: A

  • Right: B

  • Requests:

    1. LR ---> Hello!
    2. LR <-i- Thinks...
    3. LR <--- Hello!
    4. LR -i-> Happy!
    5. LR ---> How are you?
    6. LR <--- I'm good, thanks

Web App

  • Left: Web Browser

    The web browser is the client

  • Middle: Web Server

    The web server services requests from the client

  • Right: DB Server

    The DB server services database requests from the web server

  • Requests:

    1. LM ---> HTTP GET: route /
    2. MR ---> SQL SELECT: required data
    3. MR <--- DB Data
    4. LM <--- HTTP Response: HTML of home page
    5. LM ---> HTTP GET: styles.css
    6. LM <--- HTTP Response: styles.css

Web App

  • Left: Web Browser

    The web browser is the client

  • Middle: Web Server

    The web server services requests from the client

  • Right: DB Server

    The DB server services database requests from the web server

  • Requests:

    1. LM ---> HTTP GET /
    2. LM <-i- Matches route
    3. MR ---> SQL SELECT
    4. MR <--- DB Data
    5. LM <-i- Builds page
    6. LM <--- HTTP Response HTML
    7. LM -i-> Parses HTML
    8. LM ---> HTTP GET styles.css
    9. LM <--- HTTP Response CSS
    10. LM -i-> Renders page