AJAX - AJAX Response Types

AJAX Response Types

1. text

• Meaning: Raw string response from the server.

• Use case: When the server returns plain text, HTML snippets, or log messages.

• Example:

  const xhr = new XMLHttpRequest();
  xhr.open("GET", "/message.txt");
  xhr.responseType = "text"; 
  xhr.onload = () => {
    console.log(xhr.response); // "Hello from the server"
  };
  xhr.send();
  

• Common in: Returning small messages, dynamically loading HTML.

2. json

• Meaning: Structured data in JavaScript Object Notation (JSON).

• Use case: Most common response type for APIs.

• Behavior: If responseType = "json", the browser automatically parses JSON into a JavaScript object.

• Example:

  const xhr = new XMLHttpRequest();
  xhr.open("GET", "/api/user/123");
  xhr.responseType = "json"; 
  xhr.onload = () => {
    console.log(xhr.response.name); // Accessing JSON field directly
  };
  xhr.send();
  

• Common in: REST APIs, AJAX data exchanges.

3. xml

• Meaning: Response in XML (eXtensible Markup Language).

• Use case: Traditional AJAX (the “X” in AJAX stands for XML). Less common today.

• Behavior: The response is parsed into a DOM object, so you can query it with methods like getElementsByTagName.

• Example:

  const xhr = new XMLHttpRequest();
  xhr.open("GET", "/data.xml");
  xhr.responseType = "document"; // XML is returned as a DOM
  xhr.overrideMimeType("text/xml"); 
  xhr.onload = () => {
    const users = xhr.response.getElementsByTagName("user");
    console.log(users[0].getAttribute("id"));
  };
  xhr.send();
  

• Common in: Legacy systems, SOAP APIs, configuration files.

4. blob

• Meaning: Binary large object (raw file data like images, PDFs, audio, video).

• Use case: Downloading or processing files from the server.

• Behavior: Response is stored as a Blob object, which can be turned into a URL.

• Example:

  fetch("/image.png")
    .then(res => res.blob())
    .then(blob => {
      const imgURL = URL.createObjectURL(blob);
      document.getElementById("img").src = imgURL;
    });
  

• Common in: File downloads, media streaming.

5. arraybuffer

• Meaning: Low-level binary data buffer.

• Use case: Handling raw binary protocols (like audio processing, encryption, custom data formats).

• Behavior: Response is an ArrayBuffer, which can be converted to typed arrays.

• Example:

  const xhr = new XMLHttpRequest();
  xhr.open("GET", "/sound.wav");
  xhr.responseType = "arraybuffer"; 
  xhr.onload = () => {
    console.log(xhr.response.byteLength); // Size of the file in bytes
  };
  xhr.send();
  

• Common in: Web Audio API, binary protocols, WASM.

6. document

• Meaning: Parses the response into an HTML or XML document.

• Use case: When you want to directly insert returned HTML into the DOM.

• Example:

  const xhr = new XMLHttpRequest();
  xhr.open("GET", "/snippet.html");
  xhr.responseType = "document"; 
  xhr.onload = () => {
    document.body.appendChild(xhr.response.body.firstChild);
  };
  xhr.send();
  

• Common in: Loading HTML fragments dynamically.

7. default (empty string)

• If you don’t set responseType, the default is "text".

• You often have to manually parse JSON:

  const xhr = new XMLHttpRequest();
  xhr.open("GET", "/api/user");
  xhr.onload = () => {
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  };
  xhr.send();