Lecture 08: Browser architecture, JavaScript, DHTML and AJAX

Outcomes and readiness

You can trace navigation through browser components, update the DOM safely, handle events, and use fetch without blocking the page. Readiness: write a function, condition, and array loop in any language.

Browser process model

A modern browser separates concerns such as user interface, networking, storage, rendering, and script execution; exact process boundaries vary by browser and security model. HTML is parsed into a DOM, CSS contributes to a style model, layout calculates geometry, and painting/compositing produces pixels. JavaScript can change the DOM and schedule work through the event loop.

flowchart LR
  N[Network response] --> P[HTML parser]
  P --> D[DOM]
  C[CSS] --> S[Styles]
  D --> L[Layout]
  S --> L
  L --> X[Paint and composite]
  J[JavaScript events] --> D

Active pages and DHTML

“DHTML” is a historical umbrella term for HTML + CSS + JavaScript changing a page after load. Today we name the actual APIs. Prefer addEventListener, semantic controls, and textContent for untrusted text.

const status = document.querySelector('#status');
document.querySelector('#load').addEventListener('click', async () => {
  status.textContent = 'Loading...';
  try {
    const response = await fetch('/api/courses/DI-322');
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    const course = await response.json();
    status.textContent = `${course.code}: ${course.title}`;
  } catch (error) {
    status.textContent = 'Could not load the course.';
  }
});

Worked event-loop trace

Synchronous code runs first. A fetch continuation becomes eligible after the response and promise settlement; it does not make the network operation synchronous. The interface should show loading, success, empty, and error states.

Faded example

Unsafe code uses panel.innerHTML = userComment. Hint: the goal is plain text, not markup. Solution: panel.textContent = userComment. If markup is genuinely required, use a reviewed sanitizer and constrained policy rather than ad-hoc replacement.

Common mistakes

• fetch resolves on HTTP 404; test response.ok.
• async does not mean parallel CPU execution.
• AJAX means asynchronous browser-server exchange; XML is not required despite the historical name.

Practical – DI322-LAB08

Build a course lookup form with a button, loading message, error message, and rendered result. Support keyboard submission, disable duplicate requests while active, and render returned text safely. If no endpoint exists, use a local JSON file and clearly label the mock.

Independent check

Q1 What is the DOM? An object model of the document. Q2 Safe plain-text insertion? textContent. Q3 DHTML? Historical term for dynamic HTML/CSS/JS pages. Q4 Must AJAX use XML? No. Q5 Why check response.ok? HTTP error statuses do not necessarily reject fetch.

Homework – DI322-A08-H1

Implement or pseudocode a debounced search box. Explain event order, cancellation/stale-response handling, four UI states, and an injection-safe rendering choice. Rubric: behavior 3, async reasoning 3, safety 2, accessibility 2.

Revision

Network -> parse -> DOM/style -> layout -> paint. JavaScript reacts to events; asynchronous work must preserve clear, safe UI state.