AJAX (Asynchronous JavaScript and XML) is a web development technique that allows web pages to communicate with a server without reloading the entire page. It enables dynamic content updates, resulting in a smoother and faster user experience. One of the essential aspects of AJAX is handling the server’s response correctly. The format in which a server returns data is known as the response type.
In this tutorial, we’ll explore the most common AJAX response types: text, HTML, XML, and JSON, with examples using JavaScript and jQuery.
1. Plain Text Response
What it is:
The server responds with plain text, which you can use directly or process further in JavaScript.
Use Case:
Useful when the server returns a simple message like “Success” or a string that doesn’t follow a structured format.
Example (vanilla JS):
javascriptCopyEditvar xhr = new XMLHttpRequest();
xhr.open("GET", "message.txt", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText); // Outputs plain text
}
};
xhr.send();
Example (jQuery):
javascriptCopyEdit$.ajax({
url: "message.txt",
success: function(response) {
console.log(response);
}
});
2. HTML Response
What it is:
HTML content is returned from the server and can be directly injected into the DOM.
Use Case:
When you want to load a part of a webpage (like a form or modal) without reloading the page.
Example (jQuery):
javascriptCopyEdit$("#load-section").load("section.html");
This method fetches the HTML from section.html and injects it into the #load-section div.
3. XML Response
What it is:
Structured data using XML. The server returns data in a markup format with custom tags.
Use Case:
Although less common today, XML is still used in some enterprise environments or legacy systems.
Example (JavaScript):
javascriptCopyEditvar xhr = new XMLHttpRequest();
xhr.open("GET", "data.xml", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var xml = xhr.responseXML;
var items = xml.getElementsByTagName("item");
for (var i = 0; i < items.length; i++) {
console.log(items[i].textContent);
}
}
};
xhr.send();
Note: Parsing XML in JavaScript requires use of responseXML, which automatically parses the response into a DOM object.
4. JSON Response
What it is:
JavaScript Object Notation (JSON) is the most popular data format for AJAX responses due to its simplicity and compatibility with JavaScript.
Use Case:
Used when data needs to be transferred in structured format (like from APIs).
Example (JavaScript):
javascriptCopyEditvar xhr = new XMLHttpRequest();
xhr.open("GET", "data.json", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
console.log(data.name); // assuming JSON has a "name" property
}
};
xhr.send();
Example (jQuery):
javascriptCopyEdit$.getJSON("data.json", function(data) {
console.log(data.name);
});
How to Specify Response Type in XHR
You can explicitly set the response type using the responseType property:
javascriptCopyEditxhr.responseType = 'json'; // 'text', 'document', 'json', etc.
However, not all browsers support every type (especially older ones), so it’s good practice to manually parse when needed (e.g., using JSON.parse()).
Summary Table
| Response Type | Description | Example Extension | JS Access Method |
|---|---|---|---|
| Text | Plain string data | .txt, .php | xhr.responseText |
| HTML | HTML snippet for DOM | .html | Inject via innerHTML or .load() |
| XML | Structured markup | .xml | xhr.responseXML |
| JSON | Structured JavaScript objects | .json | JSON.parse() or xhr.response (if responseType is json) |
Conclusion
Understanding AJAX response types helps in building robust and responsive web applications. Whether you’re dealing with simple strings, full HTML blocks, or structured data in JSON or XML, knowing how to handle each response type properly is key to making your application efficient and user-friendly. JSON is the most commonly used today, but being comfortable with all types will make you a more versatile developer.