AJAX - XML, JSON, and plain text as response formats in AJAX

XML, JSON, and plain text as response formats in AJAX step by step with examples, code snippets, and a comparison table for better understanding.

1. What Are Response Formats in AJAX?

When the browser sends an AJAX request to the server, the server sends back data.
This data can come in different formats, and the browser needs to understand and process it.

The three most common response formats are:

• XML (Extensible Markup Language)

• JSON (JavaScript Object Notation)

• Plain Text

2. XML (Extensible Markup Language)

What It Is

• XML is a structured, tag-based format used to store and exchange data.

• Similar to HTML but focuses on data storage, not presentation.

• Commonly used in older systems and enterprise applications.

Example XML Response

<employee>
    <name>John Doe</name>
    <age>30</age>
    <department>IT</department>
</employee>

AJAX Example

var xhr = new XMLHttpRequest();
xhr.open("GET", "data.xml", true);
xhr.onload = function() {
    var xmlDoc = xhr.responseXML;
    var name = xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue;
    console.log(name); // Output: John Doe
};
xhr.send();

When to Use XML

• When working with legacy systems.

• When structured, hierarchical data is required.

• Common in SOAP web services.

3. JSON (JavaScript Object Notation)

What It Is

• JSON is a lightweight, human-readable format for exchanging data.

• Uses key-value pairs.

• It’s the most popular format in modern web development.

Example JSON Response

{
    "name": "John Doe",
    "age": 30,
    "department": "IT"
}

AJAX Example

fetch("data.json")
  .then(response => response.json())
  .then(data => {
      console.log(data.name); // Output: John Doe
  });

Why JSON is Popular

• Smaller in size compared to XML.

• Easier to parse with JSON.parse() in JavaScript.

• Works seamlessly with modern APIs and frameworks like React, Angular, Vue.

4. Plain Text

What It Is

• A simple text response from the server.

• No structured data, just raw text.

Example Plain Text Response

Hello John, your request has been processed successfully.

AJAX Example

var xhr = new XMLHttpRequest();
xhr.open("GET", "message.txt", true);
xhr.onload = function() {
    console.log(xhr.responseText); 
    // Output: Hello John, your request has been processed successfully.
};
xhr.send();

When to Use Plain Text

• When you only need simple messages.

• For status updates, error messages, or confirmation texts.

5. Comparison Table

6. Real-Life Examples

7. Key Takeaways

• XML → Good for structured data but heavy and less popular now.

• JSON → Fast, lightweight, and widely used in modern APIs.

• Plain Text → Best for simple responses like status or messages.