A Complete Guide - Web Designing AJAX Introduction to JSON and APIs

Last Updated: 03 Jul, 2025

YOU NEED ANY HELP? THEN SELECT ANY TEXT.

Web Designing: AJAX, Introduction to JSON, and APIs

Web Designing

AJAX (Asynchronous JavaScript and XML)

AJAX is a set of web development techniques used to create interactive web applications or websites. AJAX is not a single technology, but rather a group of technologies — HTML, CSS, JavaScript, and XMLHttpRequest — working together to allow web pages to be updated asynchronously. This means that web pages can send and receive data from a server asynchronously without interfering with the display and behavior of the existing page. AJAX technology has made web applications more interactive and responsive, as users can interact with the application without reloading the page.

How AJAX Works:

Event Trigger: Initiates an AJAX request from the client-side (user’s browser) using JavaScript.
XMLHttpRequest Object: Sends the request to the server.
Server Processing: The server processes the request and sends a response back.
Response Handling: The browser handles the response using JavaScript to update the relevant part of the web page without reloading it.

Benefits of AJAX:

Improved User Experience: AJAX allows for dynamic and seamless updates on the web page, enhancing user interaction.
Reduced Load Times: By exchanging only necessary data with the server, AJAX reduces the amount of data that needs to be loaded initially.
Increased Efficiency: Since AJAX makes asynchronous calls, it does not block the user interface, allowing multiple operations to occur simultaneously.

Introduction to JSON (JavaScript Object Notation)

JSON (JavaScript Object Notation) is a lightweight data interchange format that is easy for humans to read and write, and easy for machines to parse and generate. JSON is based on a collection of key/value pairs and is commonly used for exchanging data between a server and a web application, or between web services.

Structure of JSON: JSON is written as name/value pairs. Each name is followed by a colon, and the name/value pairs are separated by commas. The data is enclosed in curly braces.

Example:

{
  "name": "John Doe",
  "age": 30,
  "city": "New York"
}

Data Types in JSON:

String: A sequence of zero or more Unicode characters, enclosed in double quotes.
Number: An integer or floating-point number.
Object: An unordered set of name/value pairs, enclosed in curly braces.
Array: An ordered sequence of values, enclosed in square brackets.
Boolean: true or false.
Null: Represents an empty or non-existent value.

Using JSON in Web Development: JSON is widely used because of its simplicity and ease of use. It works well with JavaScript, making it a popular choice for data interchange in web applications. JSON data can be easily parsed and used to dynamically update web pages.

Introduction to APIs (Application Programming Interfaces)

An API is a set of rules and protocols for building and interacting with software applications. APIs specify how different software components should interact with each other. In the context of web development, APIs allow different web services to communicate with each other and share data.

Types of APIs:

Web APIs: APIs for web services and websites. Examples include RESTful APIs, SOAP, and GraphQL.
Library APIs: APIs that provide access to a library of pre-written code. Examples include jQuery, React, and Angular.
Operating System APIs: Allow developers to write programs that interact with the operating system. Examples include Windows API and POSIX API.

Common Use Cases of APIs:

Data Integration: APIs allow different applications and services to share and integrate data.
Payment Processing: APIs for processing payments through payment gateways like PayPal and Stripe.
Geolocation Services: APIs for accessing location-based services through providers like Google Maps and OpenStreetMap.
Social Media Integration: APIs for integrating social media features (e.g., login, sharing) into websites or applications.

RESTful APIs: REST (Representational State Transfer) is a design style for creating networked applications. RESTful APIs use standard HTTP methods (GET, POST, PUT, DELETE) to perform operations on resources. They are stateless, meaning each request from the client to the server must contain all the information needed to understand and complete the request.

Benefits of APIs:

Simplified Development: APIs provide pre-existing building blocks that can be used to build applications more efficiently.
Data Interoperability: APIs enable different systems and applications to communicate and share data seamlessly.
Enhanced Functionality: APIs can enable new features and services that would otherwise be difficult to implement.

Key Takeaways:

Web Designing: Focuses on creating visually pleasing and functional websites with a strong emphasis on user experience.
AJAX: Enables dynamic and asynchronous web applications, improving user experience and reducing page load times.
JSON: A lightweight dataformat used for data interchange between web applications and servers, easy to parse and use.
APIs: Essential for data integration and communication between web services, streamlining development and functionality.

Online Code run

🔔 Note: Select your programming language to check or run code at

💻 Run Code Compiler

Step-by-Step Guide: How to Implement Web Designing AJAX Introduction to JSON and APIs

Understanding the Concepts

HTML: Markup language to create web pages. CSS: Styling language for HTML documents to improve appearance. JavaScript: Scripting language to add interactivity to web pages. AJAX (Asynchronous JavaScript and XML): Technique to update parts of a web page, without reloading the whole page. JSON (JavaScript Object Notation): Lightweight data interchange format, easier for humans to read and write, and easier for machines to parse and generate. API (Application Programming Interface): Set of rules and protocols for building and interacting with software applications.

Step 1: Create a Simple HTML Page

Create an index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX & JSON Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin-top: 50px;
            text-align: center;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
        }
        #apiData {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>Welcome to AJAX & JSON Demo</h1>
    <button id="fetchButton">Fetch Data from Public API</button>
    <div id="apiData"></div>

    <script src="script.js"></script> <!-- Link to our JavaScript file -->
</body>
</html>

Step 2: Add JavaScript with AJAX to Fetch Data from API

Create a script.js file:

document.getElementById('fetchButton').addEventListener('click', function() {
    fetchAPIData();
});

function fetchAPIData() {
    // Example of using Fetch API
    var xhr = new XMLHttpRequest();
    xhr.open("GET", " true); // URL of a public API
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var jsonData = JSON.parse(xhr.responseText);
            displayData(jsonData);
        }
    };
    xhr.send();
}

function displayData(data) {
    // Getting the div where we want to display data
    var apiDataDiv = document.getElementById('apiData');
    
    // Creating a new paragraph element to display user information
    var p = document.createElement("p");
    p.textContent = `Title: ${data.title}\n\nBody: ${data.body}`;
    
    // Appending the paragraph to the container
    apiDataDiv.appendChild(p);
}

Explanation:

The script listens for the click event on the button.
When clicked, it calls the fetchAPIData() function.
Inside fetchAPIData(), we use XMLHttpRequest to make an HTTP GET request to a public API endpoint (
Once the response is received, it checks if the request was successful with xhr.readyState and xhr.status.
If successful, it parses the JSON response and then displays the data using the displayData() function.
The displayData() function takes in the parsed JSON object and creates a new paragraph element in the DOM with the title and body of the post, which then appended to the specified div.

Step 3: Test Your Code

Open your index.html in a browser.
Click the button to invoke AJAX request.

The data fetched from the public JSONPlaceholder API should appear on your web page dynamically once you hit the button.

Alternative Approach Using Fetch API

Alternatively, you can use the newer Fetch API, which provides a simpler and more powerful mechanism for making web requests.

Replace the content of script.js:

document.getElementById('fetchButton').addEventListener('click', function() {
    fetchAPIData();
});

async function fetchAPIData() {
    try {
        let response = await fetch(" // URL of a public API
        let jsonData = await response.json(); // Parsing JSON response
        displayData(jsonData);
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}

function displayData(data) {
    var apiDataDiv = document.getElementById('apiData');
    var p = document.createElement("p");
    p.textContent = `Title: ${data.title}\n\nBody: ${data.body}`;
    apiDataDiv.appendChild(p);
}

This version uses async/await, making it cleaner and easier to understand.

Explanation of Fetch API

The fetch() function initiates the network request to the API endpoint.
await response.json() is used to wait until the JSON response is fully parsed.
All other parts are identical.

Step 4: Style the Web Page

You have already included some basic CSS within the <style> tag in your index.html.

To add advanced styling, consider creating an external CSS file (styles.css) and linking it in your HTML:

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f4f9;
    color: #333;
    margin: 0;
    padding: 0;
}

h1 {
    margin-top: 40px;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    outline: none;
}

button:hover {
    background-color: #0056b3;
}

#apiData {
    margin-top: 50px;
    background-color: #e0e8ff;
    padding: 20px;
    border-radius: 5px;
}

Modify the link within the <head> section of your HTML file.

<link rel="stylesheet" href="styles.css">

Conclusion

By following these steps, you've learned about AJAX, how to use JSON data, and how to interact with public APIs. You’ve created a simple web application that dynamically fetches and displays data fetched from a JSONPlaceholder public API.

YOU NEED ANY HELP? THEN SELECT ANY TEXT.

Top 10 Interview Questions & Answers on Web Designing AJAX Introduction to JSON and APIs

1. What is Web Design?

Answer: Web design is the process of creating websites visually appealing while ensuring they are user-friendly and functional. It involves planning, creating and coding internet pages, and typically includes layout, colors, graphics, interactive elements, and user experience design.

2. What is AJAX?

Answer: AJAX (Asynchronous JavaScript and XML) is a technique for creating fast and dynamic web pages. AJAX allows web applications to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means parts of web pages can be updated without needing to reload the entire page. Though the name includes "XML," most AJAX applications use JSON instead due to its simplicity and ease of use.

3. How does AJAX work?

Answer: AJAX works by using JavaScript to send and receive small amounts of data, often in JSON format, with the server through an XMLHttprequest object. When this data is received, you can update specific parts of a web page dynamically, leading to smoother user interaction. The key components are XMLHttprequest, JavaScript, HTML/CSS, and a server-side language.

4. What is JSON and why is it used?

Answer: JSON (JavaScript Object Notation) is a lightweight data-interchange format that is easy for humans to read/write and easy for machines to parse/generate. JSON is language-independent but uses conventions familiar to programmers like C, Java, Python, etc. JSON represents data as name/value pairs and is used extensively in web applications for transmitting and receiving data between clients and servers because it's simple and can be easily parsed into native JavaScript objects.

5. What is an API?

Answer: An API (Application Programming Interface) is a set of rules and protocols for building and interacting with software applications. APIs define methods and data formats that developers use to communicate with external services, databases, or operating systems without needing to understand the underlying implementation. Web APIs, particularly RESTful APIs, allow different applications (or parts of the same application) to communicate over the internet.

6. Why should we use JSON APIs instead of XML?

Answer: JSON APIs are preferable to XML for several reasons:

Simplicity: JSON syntax is less verbose and more readable.
Parsing Speed: JSON parsing is faster in JavaScript than XML.
Bandwidth Efficiency: JSON requires fewer bytes for equivalent data structures.
Native Support: Modern browsers and web languages have built-in support for JSON.
Easier to Use: JSON maps directly to JavaScript objects, making it easier to manipulate compared to XML which requires DOM manipulation or other libraries.

7. Can AJAX requests fetch data from any server?

Answer: No, AJAX requests are subject to the Same-Origin Policy, which restricts web pages from making requests to a different domain than the one that served the web page itself, unless CORS (Cross-Origin Resource Sharing) headers are used to explicitly permit cross-origin requests. This policy helps prevent security issues such as unauthorized access, data theft, and malicious activity.

8. How do you use JSON in AJAX requests?

Answer: In AJAX, JSON is used to send and receive data in a structured format. To send JSON data to the server, you would typically convert a JavaScript object to a JSON string using JSON.stringify(). Here's a basic example of how it can be done:

var xhr = new XMLHttpRequest();
xhr.open('POST', '/submit-data');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({key: 'value'}));

For receiving JSON data from the server, once you get the response, you can parse it back into a JavaScript object using JSON.parse():

xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var jsonData = JSON.parse(xhr.responseText);
    }
};

9. What is a REST API and how does it differ from SOAP?

Answer: A REST API (Representational State Transfer Application Programming Interface) is a style of web service architecture that uses standard HTTP methods like GET, POST, PUT, DELETE, etc., to perform operations on resources. It’s stateless, meaning no session information is stored on the server between requests. Resources are identified by URLs and are manipulated using HTTP methods.

Difference from SOAP:

Protocol: REST is not tied to any protocol, whereas SOAP is protocol-dependent, generally using HTTP.
Data Format: JSON and XML can both be used with REST, while SOAP uses only XML.
Complexity: REST is simpler and lighter, making it easier to implement and use, unlike the more complex SOAP which uses a lot of XML-based configurations.
Performance: REST has an advantage over SOAP in terms of performance and scalability, especially when dealing with large volumes of data.

10. How can developers debug and test AJAX calls?

Answer: Developers can use various methods to debug and test AJAX calls:

Browser Developer Tools: Most modern browsers provide a Network tab in Developer Tools where AJAX calls can be monitored, headers inspected, and responses examined.
Logging: Implement logging on the client-side and server-side to capture request and response information.
Unit Testing: Use testing frameworks such as Jasmine, Mocha, or Jest that offer tools for testing AJAX interactions.
Mock APIs: Create mock versions of your API using tools like Mocky.io or Postman’s mock server, which can help in testing your application without depending on a live server.
Third-party Tools: Utilize third-party tools like Fiddler or Charles Proxy to intercept and inspect network traffic.