Drani Academy – Interview Question, Search Job, Tuitorials, Cheat Sheet, Project, eBook

Ajax

Tutorials – Ajax

 
Chapter 4: Ajax with JSON

 

In the previous chapters, we explored the fundamentals of Ajax, making asynchronous requests, and working with XML data. In this chapter, we will shift our focus to another prevalent data format in modern web development: JSON (JavaScript Object Notation). We’ll learn how to send and receive JSON data in Ajax requests, and we’ll explore the advantages of using JSON for data interchange.


Introduction to JSON

JSON, which stands for JavaScript Object Notation, is a lightweight data interchange format. It’s easy for both humans to read and write and for machines to parse and generate. JSON is often used to transmit data between a server and a web application or between different parts of an application.

JSON data is represented in key-value pairs, much like JavaScript objects. It can include various data types such as strings, numbers, booleans, arrays, and other JSON objects. Here’s an example of JSON data representing a person:

{
  "name": "John Doe",
  "age": 30,
  "email": "john@example.com",
  "isSubscriber": true,
  "interests": ["programming", "gaming", "hiking"]
}

JSON objects are enclosed in curly braces {}, and key-value pairs are separated by colons. Arrays are represented using square brackets [].


Sending JSON with Ajax

When working with JSON in Ajax, you can send a JSON object as the request payload. You can use XMLHttpRequest or the Fetch API to accomplish this. Let’s explore how to send JSON data using both methods.

Using XMLHttpRequest

To send JSON data with XMLHttpRequest, you need to create a JSON string, set the appropriate content type header, and send the request:

var xhr = new XMLHttpRequest();
// Create a JSON object
var data = {
  name: 'Alice Johnson',
  age: 28,
  email: 'alice@example.com',
  isSubscriber: false,
  interests: ['photography', 'cooking', 'painting'],
};
// Convert the JSON object to a string
var jsonString = JSON.stringify(data);
xhr.open('POST', 'https://api.example.com/user', true);
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
xhr.onload = function () {
  if (xhr.status >= 200 && xhr.status < 300) {
    // Request was successful
    var response = JSON.parse(xhr.responseText); // Parse the JSON response
    // Process and update the web page with the response
  } else {
    // Handle error
    console.error('Request failed with status: ' + xhr.status);
  }
};
xhr.send(jsonString);

In this example, we create a JSON object and convert it to a string using JSON.stringify(). We then set the content type header to indicate that we are sending JSON data. When the response is received, we parse it using JSON.parse().

Using the Fetch API

The Fetch API simplifies sending JSON data. You can directly send a JSON object as the body of the request:

var data = {
  name: 'Bob Smith',
  age: 35,
  email: 'bob@example.com',
  isSubscriber: true,
  interests: ['music', 'travel', 'sports'],
};
fetch('https://api.example.com/user', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
  .then(function (response) {
    if (!response.ok) {
      throw new Error('Request failed with status: ' + response.status);
    }
    return response.json(); // Parsing the response as JSON
  })
  .then(function (responseData) {
    // Process and update the web page with responseData
  })
  .catch(function (error) {
    console.error(error);
  });

In this example, we directly use JSON.stringify() to convert the JSON object to a string and include it as the body of the request.


Receiving and Handling JSON Data

Once you’ve sent a JSON request and received a JSON response, you need to parse and manipulate the data. Both XMLHttpRequest and the Fetch API provide methods for this purpose.

Using XMLHttpRequest

With XMLHttpRequest, you can access the JSON response directly as a JavaScript object using JSON.parse():

xhr.onload = function () {
  if (xhr.status >= 200 && xhr.status < 300) {
    var response = JSON.parse(xhr.responseText); // Parse the JSON response
    // Access and manipulate the JSON data
  } else {
    console.error('Request failed with status: ' + xhr.status);
  }
};

In this example, we parse the JSON response using JSON.parse(), which converts the response text into a JavaScript object that we can work with.

Using the Fetch API

The Fetch API also makes it straightforward to parse JSON responses. You can use response.json() to directly obtain a JavaScript object:

fetch('https://api.example.com/user')
  .then(function (response) {
    if (!response.ok) {
      throw new Error('Request failed with status: ' + response.status);
    }
    return response.json(); // Parsing the response as JSON
  })
  .then(function (responseData) {
    // Process and update the web page with responseData
  })
  .catch(function (error) {
    console.error(error);
  });

In this example, we use the .json() method to parse the response and obtain a JavaScript object.


Updating the Web Page with JSON Data

Once you’ve extracted data from the JSON response, you can use JavaScript to update the web page’s content. Here’s an example of how to display user information:

var user = response;
var userElement = document.getElementById('user-info');
userElement.innerHTML = `
  <h2>${user.name}</h2>
  <p>Age: ${user.age}</p>
  <p>Email: ${user.email}</p>
  <p>Subscriber: ${user.isSubscriber ? 'Yes' : 'No'}</p>
  <p>Interests: ${user.interests.join(', ')}</p>
`;

In this example, we access the JSON data properties and update the web page with the user’s name, age, email, subscription status, and interests.


Advantages of Using JSON

JSON has become the preferred data format for many web applications for several reasons:

  1. Simplicity: JSON is easy to understand and work with, making it ideal for data interchange between systems.
  2. Lightweight: JSON has a smaller payload compared to other data formats, reducing data transfer times and server load.
  3. Human-Readable: It’s both human-readable and machine-readable, which aids in debugging and development.
  4. Native JavaScript Format: JSON is natively supported in JavaScript, making it easy to work with in web applications.
  5. Widely Supported: JSON is supported by most programming languages and technologies, enabling interoperability.


Challenges of Working with JSON

While JSON is a versatile and efficient data format, it is important to note that it has limitations. JSON does not support data types such as dates, binary data, or complex structures like XML. In such cases, you may need to handle data transformations on the client or server side.


Conclusion

In this chapter, we explored the use of JSON in Ajax, from sending JSON data in requests to receiving, parsing, and manipulating JSON responses. Understanding JSON and its advantages is crucial for modern web development. In the next chapter, we will continue our journey through Ajax and delve into more advanced topics like error handling, third-party APIs, and the latest trends in Ajax development.

Scroll to Top