XML, JSON and AJAX based communication notes — Unit 3

When a client communicates with a server, data must be formatted in a way that both ends can understand. The two most prominent standard formats in web history are XML and JSON.

⇒1.1 Why do we need them?

A database stores data in complex proprietary structures (SQL tables, binary files). A frontend UI uses JavaScript Objects. To transfer data over the HTTP protocol (which only sends text strings), the data must be serialized into a universally understandable string format.

XML is a markup language much like HTML, but it was designed to carry data, not to display data. XML tags are not predefined; you must define your own tags.

⇒2.1 Syntax Example

<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
  <book category="cooking">
    <title>Everyday Italian</title>
    <author>Giada De Laurentiis</author>
    <year>2005</year>
    <price>30.00</price>
  </book>
</bookstore>

⇒2.2 XML Characteristics

• It is self-describing.
• It forms a tree structure (Root, Branches, Leaves).
• Extremely verbose (heavy bandwidth usage).
• Requires complex DOM parsers to read the data in JavaScript.

Because anyone can invent any XML tag, how do you ensure the XML document you receive from an external server is valid and structured correctly?

⇒3.1 DTD (Document Type Definition)

The older method. Defines the structure and the legal elements and attributes of an XML document.

⇒3.2 XML Schema (XSD)

The modern, more powerful method. XSDs are themselves written in XML. They support data types (e.g., forcing `<age>` to be an integer), whereas DTD only supports text.

Well-Formed vs Valid XML:

• Well-Formed: Follows all XML syntax rules (tags are closed, correctly nested).
• Valid: It is Well-Formed AND it conforms to the rules defined in a DTD or XSD.

JSON is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate.

⇒4.1 Syntax Example

{
  "bookstore": {
    "books": [
      {
        "category": "cooking",
        "title": "Everyday Italian",
        "author": "Giada",
        "year": 2005,
        "price": 30.00
      }
    ]
  }
}

⇒4.2 JSON Rules

• Data is in name/value pairs.
• Data is separated by commas.
• Curly braces `{}` hold objects.
• Square brackets `[]` hold arrays.
• Keys MUST be strings enclosed in double quotes `""`. (Unlike JS objects where quotes on keys are optional).

Today, JSON has almost entirely replaced XML in modern web development (REST APIs). XML is now mostly relegated to legacy enterprise systems (SOAP APIs) and configuration files.

⇒5.1 Comparison

AJAX stands for Asynchronous JavaScript And XML.

⇒6.1 The Old Web

Before AJAX, if a user wanted to see new data (like moving to page 2 of search results), they had to click a link, the screen would flash white, and the entire HTML page would reload from the server.

⇒6.2 The AJAX Web

AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page (e.g., hitting 'Like' on Facebook, or infinite scrolling on Twitter).

Despite the name containing 'XML', modern AJAX heavily relies on JSON instead.

For over a decade, the `XMLHttpRequest` object was the only way to perform AJAX calls.

⇒7.1 The XHR Flow

// 1. Create the object
var xhttp = new XMLHttpRequest();

// 2. Define the callback for when data arrives
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    console.log(this.responseText);
  }
};

// 3. Open the connection (Method, URL, Async=true)
xhttp.open('GET', 'data.json', true);

// 4. Send the request
xhttp.send();

⇒7.2 Ready States

The XHR object has 5 states (0 to 4). State `4` means the request is done and the response is ready.

XHR is clunky, relies heavily on nested callbacks, and lacks modern features. The Fetch API is the modern, Promise-based replacement built into all modern browsers.

⇒8.1 Basic Fetch GET Request

fetch('https://api.example.com/users')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json(); // Parses the JSON automatically
  })
  .then(data => {
    console.log(data); // Process the actual JS object
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

Unlike XHR, a `fetch()` promise only rejects on a network failure (like the server being offline). If the server returns a 404 (Not Found) or 500 (Internal Error), the promise still resolves, so you must manually check `response.ok`.

To send data to the server (like submitting a form via AJAX), you must change the method to POST, provide headers, and attach a body.

⇒9.1 Sending JSON Data

const userData = { username: 'john', age: 30 };

fetch('/api/users/create', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json' // Tell server it's JSON
  },
  body: JSON.stringify(userData) // Convert object to string
})
.then(res => res.json())
.then(result => console.log('Saved!', result));

By default, web browsers strictly enforce the Same-Origin Policy. This means a script loaded from `https://mywebsite.com` is forbidden from making AJAX requests to `https://another-api.com`.

⇒10.1 Why the policy exists

If you log into your bank, and then visit a malicious website, the malicious script could silently fire an AJAX request to your bank to transfer money. The browser prevents this.

⇒10.2 CORS Headers

CORS is a mechanism that allows the server to explicitly bypass the Same-Origin Policy. If `another-api.com` wants to allow your frontend to read its data, its server must return the following HTTP header:

Access-Control-Allow-Origin: https://mywebsite.com
// Or, to allow ANY website to access it (common for public APIs):
Access-Control-Allow-Origin: *

If this header is missing, the browser will block the JavaScript from reading the response and throw a CORS error in the console.

While `fetch()` is built-in, many developers prefer using the third-party library Axios for AJAX.

⇒11.1 Why use Axios over Fetch?

• Automatic JSON parsing: You don't have to call `.json()` on the response.
• Error handling: Axios automatically rejects the promise if the HTTP status is outside the 200 range (unlike Fetch).
• Interceptors: Allows you to globally intercept requests before they leave, to attach Auth Tokens automatically.
• Timeout: Built-in timeout support to abort requests if they take too long.

⇒11.2 Axios Syntax

axios.post('/api/users', { name: 'john' })
  .then(response => {
    console.log(response.data); // Data is already parsed
  })
  .catch(error => {
    console.error('Handled automatically!', error);
  });

The heavy use of AJAX led to the creation of Single Page Applications (SPAs). Frameworks like React, Vue, and Angular are built entirely on this concept.

⇒12.1 How SPAs work

• The browser loads exactly one HTML file from the server (usually a nearly empty `index.html`).
• It loads a massive JavaScript bundle.
• JavaScript takes over rendering the entire UI dynamically.
• When the user clicks a link, the page does not reload. JS intercepts the click, uses AJAX to fetch JSON data for the new page, and redraws the UI instantly.

⇒12.2 Pros and Cons

Pros: Extremely fast, app-like user experience. Smooth transitions. Backend API is completely decoupled from the frontend UI.
Cons: Initial load time can be slow (downloading the huge JS bundle). SEO can be difficult because web crawlers see an empty HTML file initially.

AJAX is strictly Request-Response. The client must ask for data; the server cannot simply push data to the client when something happens. This makes real-time apps (like chat rooms or live stock tickers) very difficult.

⇒13.1 Polling (The Old Hack)

Using `setInterval` to fire an AJAX request every 3 seconds to ask 'Are there new messages?'. This wastes massive amounts of server resources and bandwidth.

⇒13.2 The WebSocket Protocol

WebSockets provide a persistent, full-duplex communication channel over a single TCP connection. Once the connection is opened, both the client and the server can send messages to each other at any time in real-time, with virtually zero overhead.

⇒14.1 Browser API

// Connect using ws:// or wss:// (secure)
const socket = new WebSocket('wss://api.example.com/chat');

// Listen for incoming messages from the server
socket.addEventListener('message', function(event) {
  console.log('Message from server: ', event.data);
});

// Send a message to the server instantly
function sendMessage(txt) {
  socket.send(txt);
}

⇒14.2 Socket.IO

A very popular JS library that wraps WebSockets. It provides auto-reconnection, broadcasting to multiple users (chat rooms), and fallbacks to HTTP long-polling if the client's corporate firewall blocks WebSockets.

WebSockets are powerful but complex to scale on the server side because they keep persistent TCP connections open forever. Sometimes, you only need one-way real-time communication (Server pushing to Client).

⇒15.1 How SSE Works

SSE uses standard HTTP. The client makes a standard request, but the server holds the response open indefinitely, sending chunks of text down the pipe whenever an event occurs.

⇒15.2 The EventSource API

// Connect to the stream
const evtSource = new EventSource('/api/news-stream');

// Listen for events
evtSource.onmessage = function(event) {
  console.log('New headline:', event.data);
}

SSE is perfect for live news feeds, sports scores, or continuous deployment logs, where the client never needs to send data back over the same real-time channel.

When making AJAX calls to traditional REST APIs, developers face two major problems: Over-fetching and Under-fetching.

⇒16.1 The Problems

• Over-fetching: Hitting `/api/users/123` to get a username, but the server returns a massive JSON object with 50 fields (address, history, preferences) that you don't need, wasting bandwidth.
• Under-fetching: To load a profile page, you might need to hit `/api/users/123`, wait for it to finish, extract the Post IDs, then hit `/api/posts/456` in a secondary waterfall request, making the app slow.

⇒16.2 GraphQL Solution

GraphQL is a query language for APIs. The client sends a single AJAX POST request containing a query string detailing exactly what fields it wants. The server responds with only those exact fields. No more, no less.

A Service Worker is a JavaScript file that runs in the background, completely separate from the web page. It acts as a programmable network proxy.

⇒17.1 Intercepting Fetch Requests

Service Workers can intercept every single `fetch()` or AJAX request made by the webpage. If the user loses internet connection, the Service Worker can intercept the request, realize there is no network, and instantly return cached JSON data instead.

⇒17.2 Progressive Web Apps (PWAs)

Service Workers are the core technology behind PWAs. They allow web apps to load instantly (even offline) and feel exactly like native iOS/Android apps.

When building AJAX-heavy applications, mastering the browser's Developer Tools is critical.

⇒18.1 The Network Tab

The Network tab in Chrome/Firefox DevTools records all HTTP requests.

• Filter by XHR/Fetch: Instantly hides images and CSS to only show AJAX API calls.
• Headers Panel: Verify that your CORS headers, Auth Tokens, and content-types are actually being sent correctly.
• Preview/Response Panel: View the raw JSON data returned by the server, properly formatted and highlighted.
• Throttling: Simulate a slow 3G mobile network to see how your loading spinners behave.

AJAX requests are vulnerable to Cross-Site Request Forgery (CSRF).

⇒19.1 The CSRF Attack

If you are logged into a banking site (which set a session cookie), and you visit a malicious site, the malicious site can run an invisible AJAX POST request to the bank. The browser will automatically attach your banking cookie to the AJAX request, and the bank will authorize the transaction.

⇒19.2 The Mitigation

• Anti-CSRF Tokens: The server generates a unique, random string and injects it into the HTML. The JavaScript must read this string and attach it as a custom Header (e.g., `X-CSRF-Token`) in every AJAX POST request. The malicious site cannot read this token.
• SameSite Cookies: Setting cookies with `SameSite=Strict` tells the browser never to attach the cookie to AJAX requests originating from third-party domains.

In the past, developers wrote JS in a file, included it in HTML, and it just worked. Today, modern JS (ESM, async/await, React) often needs to be transformed before it can run in all browsers.

⇒20.1 Transpilers (Babel)

Tools like Babel take modern ES6+ code and translate it backwards into ES5 code so that older browsers (like Internet Explorer 11) can run it without throwing syntax errors.

⇒20.2 Bundlers (Webpack / Vite)

When your project has 100 different JS modules, importing them all individually causes 100 network requests, which is terribly slow. Bundlers read all your `import` statements, trace the dependency graph, and combine everything into one highly optimized, minified `bundle.js` file for production.