API

Md Touhidul Islam

Interactive slides + runnable examples (AJAX, Axios, Fetch)

Typical Web Application Structure

🖥️ Frontend (Client-side)

HTML
CSS
JavaScript
Frameworks: React / Angular / Vue

🧠 Backend (Server-side)

Processes requests
Performs business logic
Interacts with database (if needed)

🗄️ Database

Store data
Retrieve data
Update data
Delete data

Frontend ↔ Backend Communication

The frontend interacts with the backend using several methods
Depends on application architecture and requirements
Most commonly used method: API

Why APIs are common:

Ease of Use
Scalability
Separation of concerns
Standardized Communication
Security

API Key Components

Endpoint – specific URL (base URL + path)
HTTP Methods – GET / POST / PUT / DELETE
Request parameters / data – query string, body, etc.
Response – usually JSON or XML
Headers – e.g., Content-Type, auth tokens
Status codes – e.g., 200, 201, 400, 404, 500

PLAYGROUND: Endpoint + Method (Mental Model)

// Base URL + path = endpoint
const baseURL = "https://jsonplaceholder.typicode.com";
const path = "/users";
const endpoint = baseURL + path;

// HTTP method
const method = "GET";

console.log("Endpoint:", endpoint);
console.log("Method:", method);

// A request is basically:
// method + endpoint + (headers) + (data) => response + status code

Ln 1, Col 1

JavaScript

Tab Indent Ctrl+Enter Run Ctrl+/ Comment

💻 Console Output:

XML vs JSON (Data Formats)

🧩 XML (Extensible Markup Language)

Structured format for storing/exchanging data
Uses tags
Supports string only (in this lecture context)
Slower to parse

⚡ JSON (JavaScript Object Notation)

Structured format for storing/exchanging data
Key-value pairs
Key must be string (double quotes)
Value supports: string, number, boolean, array, object, null
Faster and lightweight

JSON Object vs JSON String

JSON Object – parsed from a JSON string, usable as a data structure
Use JSON.stringify() to convert object → JSON string
JSON String – a string following JSON syntax rules
Use JSON.parse() to convert JSON string → object

PLAYGROUND: JSON.parse() & JSON.stringify()

// JSON STRING (text)
const jsonStr = '{"name":"John Doe","age":20,"isEnrolled":true}';
console.log("JSON string:", jsonStr);

// Parse into a JS object
const obj = JSON.parse(jsonStr);
console.log("Parsed object:", obj);
console.log("Type of obj:", typeof obj);

// Modify the object like any JS object
obj.age = 21;
obj.major = "IST";

// Convert back to JSON string (for sending over network)
const newJsonStr = JSON.stringify(obj);
console.log("Stringified again:", newJsonStr);
console.log("Type of newJsonStr:", typeof newJsonStr);

Ln 1, Col 1

JavaScript

Tab Indent Ctrl+Enter Run Ctrl+/ Comment

💻 Console Output:

Data Exchange Techniques

Basic requirements (all three):

All can make HTTP requests
All work asynchronously
All can handle JSON data

🕰️ AJAX

Classic approach (often taught with jQuery): asynchronous requests, update parts of page.

📦 AXIOS

Promise-based client with simpler syntax + automatic JSON parsing.

🚀 FETCH API

Built-in browser API; modern, lightweight, very common.

💡 Note: These playground examples call https://jsonplaceholder.typicode.com. You need an internet connection to see real responses.

AJAX (Asynchronous JavaScript and XML)

A technique to send/receive data asynchronously from a server
Update part of a webpage without reloading the entire page

MINI DEMO: Async mental model

console.log("1) Start request");

// Simulate async work (like an HTTP request)
setTimeout(() => {
    console.log("3) Response received (later)");
}, 500);

console.log("2) UI keeps working while waiting");

Ln 1, Col 1

JavaScript

Tab Indent Ctrl+Enter Run Ctrl+/ Comment

💻 Console Output:

jQuery AJAX

Syntax: `$.ajax({})`

url – Required: endpoint URL
method – Default GET (GET, POST, PUT, DELETE)
data – Data to send in POST/PUT requests
contentType – Use "application/json" for JSON
success – callback for success
error – callback for error

⚠️ Common gotcha: For JSON requests, you often need JSON.stringify(...) for the request body (especially with jQuery / Fetch).

jQuery AJAX – GET

RUN: jQuery AJAX GET

// GET - retrieve data from the server
$.ajax({
    url: "https://jsonplaceholder.typicode.com/users",
    method: "GET",
    success: function (response) {
        // response from the server will be converted into object automatically
        console.log(typeof response);
        console.log("Get Users:", response);
    },
    error: function (error) {
        console.error("Error:", error);
    },
});

Ln 1, Col 1

JavaScript

Tab Indent Ctrl+Enter Run Ctrl+/ Comment

💻 Console Output:

jQuery AJAX – POST

RUN: jQuery AJAX POST

// POST - create new data on the server
$.ajax({
    url: "https://jsonplaceholder.typicode.com/posts",
    method: "POST",
    contentType: "application/json",
    // must manually stringify the data
    data: JSON.stringify({
        title: "New Post",
        body: "This is a new post created using jQuery AJAX.",
        userId: 1,
    }),
    success: function (response) {
        console.log("Created Post:", response);
    },
    error: function (error) {
        console.error("Error:", error);
    },
});

Ln 1, Col 1

JavaScript

Tab Indent Ctrl+Enter Run Ctrl+/ Comment

💻 Console Output:

jQuery AJAX – PUT

RUN: jQuery AJAX PUT

// PUT - update existing data on the server
$.ajax({
    url: "https://jsonplaceholder.typicode.com/posts/1",
    method: "PUT",
    contentType: "application/json",
    data: JSON.stringify({
        title: "Updated Post",
        body: "This post has been updated.",
        userId: 1,
    }),
    success: function (response) {
        console.log("Updated Post:", response);
    },
    error: function (error) {
        console.error("Error:", error);
    },
});

Ln 1, Col 1

JavaScript

Tab Indent Ctrl+Enter Run Ctrl+/ Comment

💻 Console Output:

Practice #1 — jQuery AJAX (GET + Render)

Goal:

Make a GET request to /users
Log how many users you received
Render each user name into the list below

✅ Output target (DOM)

PRACTICE: Fill the TODOs and Run

// PRACTICE #1 — jQuery AJAX GET + render to DOM
// Endpoint: https://jsonplaceholder.typicode.com/users

// Clear DOM list first (so repeated runs don't duplicate)
$("#pp1-users").empty();

// TODO 1: Write $.ajax({...}) with:
//   - url: "https://jsonplaceholder.typicode.com/users"
//   - method: "GET"
// TODO 2: In success(users):
//   - console.log("Users fetched:", users.length)
//   - render each user's name into #pp1-users as <li>...</li>
// TODO 3: In error(xhr):
//   - console.error("Request failed:", xhr.status, xhr.statusText)

$.ajax({
    url: "https://jsonplaceholder.typicode.com/users",
    method: "GET",
    success: function (users) {
        // TODO: log the count
        // TODO: loop and append <li> to #pp1-users
    },
    error: function (xhr) {
        // TODO: print status + statusText
    },
});

Ln 1, Col 1

JavaScript

Tab Indent Ctrl+Enter Run Ctrl+/ Comment

💻 Console Output:

Hint: Use users.forEach(function(u){ ... }) and append like: $("#pp1-users").append("<li>" + u.name + "</li>")

Practice #2 — jQuery AJAX (POST + JSON)

Common gotcha: For JSON POST in jQuery, you usually need:

contentType: "application/json"
data: JSON.stringify({...})

Goal:

Send a POST request to /posts
Log the returned id from the created post
Handle errors (log xhr.status)

PRACTICE: Fill the TODOs and Run

// PRACTICE #2 — jQuery AJAX POST (JSON)
// Endpoint: https://jsonplaceholder.typicode.com/posts

// TODO 1: Add contentType for JSON
// TODO 2: Add data using JSON.stringify({ title, body, userId })
// TODO 3: In success(response), log: "Created id:", response.id
// TODO 4: In error(xhr), log: "Failed:", xhr.status

$.ajax({
    url: "https://jsonplaceholder.typicode.com/posts",
    method: "POST",
    // contentType: "application/json", // TODO 1

    // data: JSON.stringify({ ... }), // TODO 2

    success: function (response) {
        // TODO 3
    },
    error: function (xhr) {
        // TODO 4
    },
});

Ln 1, Col 1

JavaScript

Tab Indent Ctrl+Enter Run Ctrl+/ Comment

💻 Console Output:

Suggested payload: { title: "Practice Post", body: "Hello from HCDD 411", userId: 1 }

jQuery AJAX – DELETE

RUN: jQuery AJAX DELETE

// DELETE - delete data from the server
$.ajax({
    url: "https://jsonplaceholder.typicode.com/posts/1",
    method: "DELETE",
    success: function (response) {
        console.log("Post Deleted:", response);
    },
    error: function (error) {
        console.error("Error:", error);
    },
});

Ln 1, Col 1

JavaScript

Tab Indent Ctrl+Enter Run Ctrl+/ Comment

💻 Console Output:

Promises: Why `.then()` and `.catch()`?

jQuery AJAX uses callbacks: success / error
Axios and Fetch return a Promise
A Promise represents a value you will get later (success) or an error you will handle (failure)

Key idea: Promises avoid “callback nesting” and make async code easier to compose.

.then(...) = “when it succeeds, do this”
.catch(...) = “if it fails, do this”

RUN: Promise + then/catch order

console.log("1) Before promise");

// A Promise: resolve(success) / reject(failure)
const p = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve({ msg: "Hello from the future 👋" });
        // reject(new Error("Something went wrong"));
    }, 500);
});

p.then((value) => {
    console.log("3) then():", value);
}).catch((err) => {
    console.error("catch():", err.message);
});

console.log("2) After promise (JS keeps running)");

Ln 1, Col 1

JavaScript

Tab Indent Ctrl+Enter Run Ctrl+/ Comment

💻 Console Output:

Axios: Setup + Run (Step-by-step)

🌐 In the Browser

Add Axios via CDN (a script tag)
Then axios.get(...) works immediately
Great for small demos / learning

🧰 In Node.js

Install: npm i axios
Import: const axios = require("axios")
Run: node app.js

✅ Why students like Axios

Auto JSON parsing (response is already usable)
Response payload is in response.data
Cleaner POST syntax vs jQuery AJAX

Step-by-step (browser):

Include Axios (CDN) before your script
Call axios.get(url) → returns a Promise
Use .then(...) (or await)
Read the JSON from response.data

RUN: Verify Axios is loaded + make a request

console.log("Axios loaded?", typeof axios !== "undefined");

if (typeof axios === "undefined") {
    console.error("Axios not found. In a normal HTML page you would add:");
    console.log('<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>');
} else {
    console.log("Axios version (if available):", axios.VERSION || "(not exposed)");

    axios
        .get("https://jsonplaceholder.typicode.com/users/1")
        .then((response) => {
            // Axios auto-parses JSON
            console.log("HTTP status:", response.status);
            console.log("User 1 name:", response.data.name);
        })
        .catch((error) => {
            console.error("Request failed:", error.message);
        });
}

Ln 1, Col 1

JavaScript

Tab Indent Ctrl+Enter Run Ctrl+/ Comment

💻 Console Output:

jQuery AJAX vs Axios: What changes?

Big picture:

jQuery AJAX: you pass options + callbacks (success/error)
Axios: you call a method (get/post/put/delete) and handle a Promise (.then/.catch)

Request body

jQuery: usually needs JSON.stringify(data)
Axios: just pass a JS object

Response

jQuery: response is already an object
Axios: response payload is in response.data

Errors

jQuery: error: function(err){...}
Axios: .catch(err => ...)

RUN: Same GET request (jQuery vs Axios)

console.log("=== jQuery AJAX GET ===");
$.ajax({
    url: "https://jsonplaceholder.typicode.com/users/1",
    method: "GET",
    success: function (response) {
        // jQuery auto-parses JSON
        console.log("jQuery name:", response.name);
    },
    error: function (err) {
        console.error("jQuery error:", err.status);
    },
});

console.log("=== Axios GET ===");
axios
    .get("https://jsonplaceholder.typicode.com/users/1")
    .then((response) => {
        // Axios puts the JSON payload in response.data
        console.log("Axios name:", response.data.name);
    })
    .catch((err) => {
        console.error("Axios error:", err.message);
    });

Ln 1, Col 1

JavaScript

Tab Indent Ctrl+Enter Run Ctrl+/ Comment

💻 Console Output:

Fetch: Step-by-step (What happens?)

fetch(url) returns a Promise that resolves to a Response
The Response is metadata (status, headers) + a body stream
To read JSON, you must call response.json() (this is also async)

Common confusion: Fetch does NOT auto-parse JSON, and does not automatically throw on HTTP 404/500.

You should check response.ok and throw an error yourself

RUN: Fetch with status + ok + JSON parsing

async function getUser(id) {
    const url = `https://jsonplaceholder.typicode.com/users/${id}`;
    console.log("Requesting:", url);

    const response = await fetch(url);
    console.log("HTTP status:", response.status, "| ok:", response.ok);

    // Fetch only throws on network failure, not on HTTP error codes
    if (!response.ok) {
        throw new Error(`HTTP ${response.status}`);
    }

    // This is the "manual JSON parsing" step
    const data = await response.json();
    console.log("User name:", data.name);
}

// Try changing id to something like 999 to see error handling
getUser(1).catch((err) => console.error("Fetch failed:", err.message));

Ln 1, Col 1

JavaScript

Tab Indent Ctrl+Enter Run Ctrl+/ Comment

💻 Console Output:

`async` / `await`: How to use it (Step-by-step)

async makes a function return a Promise
await pauses inside that async function until the Promise resolves
Use try/catch to handle errors like a normal synchronous program

Translation in your head:

await something() ≈ something().then(...) (same idea, easier to read)
But await only works inside an async function (in this lecture style)

RUN: await inside async + try/catch

// ✅ Correct: await inside an async function
async function run() {
    try {
        const response = await fetch("https://jsonplaceholder.typicode.com/users/1");
        const user = await response.json();
        console.log("Fetched user:", user.name);

        // Because run() is async, it returns a Promise
        return user;
    } catch (err) {
        console.error("Error:", err.message);
        throw err;
    }
}

// run() returns a Promise, so we can still use .then()
run().then((user) => console.log("Returned value:", user.id));

Ln 1, Col 1

JavaScript

Tab Indent Ctrl+Enter Run Ctrl+/ Comment

💻 Console Output:

If you get an “await is only valid…” error: it means you used await outside an async function (or outside an ES module).

AXIOS

Simpler syntax
Automatic JSON parsing
Better error handling
Support for request cancellation
Works well with Node.js
However, needs installation manually (npm / CDN)

Core idea: Axios is a promise-based HTTP client:

Use .then() to handle success
Use .catch() to handle errors

AXIOS – Code Example

RUN: Axios GET + POST

// GET
axios
    .get("https://jsonplaceholder.typicode.com/users")
    .then((response) => {
        console.log("Users:", response.data);
    })
    .catch((error) => {
        console.error("Error:", error);
    });

// POST
axios
    .post("https://jsonplaceholder.typicode.com/posts", {
        title: "New Post",
        body: "This is a new post created using Axios.",
        userId: 1,
    })
    .then((response) => {
        console.log("Created Post:", response.data);
    })
    .catch((error) => {
        console.error("Error:", error);
    });

Ln 1, Col 1

JavaScript

Tab Indent Ctrl+Enter Run Ctrl+/ Comment

💻 Console Output:

FETCH API

Currently most popular in front-end web development
A built-in JavaScript API used to make HTTP requests
Modern + lightweight
Fetch API & Axios dominate modern web development

Important: Fetch requires manual JSON parsing:

.then((response) => response.json())
or const data = await response.json()

FETCH API – Code Example

RUN: Fetch GET + POST

// FETCH API
// GET
fetch("https://jsonplaceholder.typicode.com/users")
    .then((response) => response.json())
    .then((data) => console.log(data))
    .catch((error) => console.error("Error:", error));

// POST
fetch("https://jsonplaceholder.typicode.com/posts", {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
    },
    body: JSON.stringify({
        title: "New Post",
        body: "This is a new post.",
        userId: 1,
    }),
})
    .then((response) => response.json())
    .then((data) => console.log("Created:", data))
    .catch((error) => console.error("Error:", error));

Ln 1, Col 1

JavaScript

Tab Indent Ctrl+Enter Run Ctrl+/ Comment

💻 Console Output:

Modern Approach – async/await

Asynchronous
Easier to read
Easier to debug

RUN: async/await (Fetch + Axios)

// FETCH API - GET
async function getUsersByFetch() {
    try {
        let response = await fetch(
            "https://jsonplaceholder.typicode.com/users"
        );
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Error:", error);
    }
}

getUsersByFetch();

// AXIOS - GET
async function getUsersByAxios() {
    try {
        let response = await axios.get(
            "https://jsonplaceholder.typicode.com/users"
        );
        console.log(response.data);
    } catch (error) {
        console.error("Error:", error);
    }
}

getUsersByAxios();

Ln 1, Col 1

JavaScript

Tab Indent Ctrl+Enter Run Ctrl+/ Comment

💻 Console Output:

JSON handling comparison:

jQuery AJAX: manually stringify request body; auto-parse JSON response into JS object.
AXIOS: auto stringify request body; auto-parse JSON response.
FETCH API: manually stringify request body; manually parse JSON response.

Practice #3 — Fetch (async/await + Error Handling)

Goal:

Write async function getUserEmail(id)
Use fetch, check response.ok, then await response.json()
Return the user’s email

PRACTICE: Complete the function and Run

// PRACTICE #3 — Fetch + async/await + response.ok

async function getUserEmail(id) {
    const url = `https://jsonplaceholder.typicode.com/users/${id}`;

    // TODO 1: await fetch(url)
    // TODO 2: if (!response.ok) throw new Error(`HTTP ${response.status}`)
    // TODO 3: const data = await response.json()
    // TODO 4: return data.email
}

getUserEmail(2)
    .then((email) => console.log("Email:", email))
    .catch((err) => console.error("Failed:", err.message));

// Try: change 2 to 999 and confirm your error path works.

Ln 1, Col 1

JavaScript

Tab Indent Ctrl+Enter Run Ctrl+/ Comment

💻 Console Output:

Practice #4 — Axios (Filter + Map)

Goal:

Use Axios to fetch /posts
Filter posts where userId === 1
Log only the first 5 titles

PRACTICE: Use axios.get + response.data

// PRACTICE #4 — Axios: filter + map titles

// TODO 1: axios.get("https://jsonplaceholder.typicode.com/posts")
// TODO 2: in then(response):
//   - const posts = response.data
//   - filter posts where post.userId === 1
//   - take first 5 and log their titles
// TODO 3: catch(error): console.error(error.message)

axios
    .get("https://jsonplaceholder.typicode.com/posts")
    .then((response) => {
        // TODO 2
    })
    .catch((error) => {
        // TODO 3
    });

Ln 1, Col 1

JavaScript

Tab Indent Ctrl+Enter Run Ctrl+/ Comment

💻 Console Output:

Hint: Use: posts.filter(...).slice(0, 5).forEach(...)

API

Md Touhidul Islam

Typical Web Application Structure

🖥️ Frontend (Client-side)

🧠 Backend (Server-side)

🗄️ Database

Frontend ↔ Backend Communication

API Key Components

XML vs JSON (Data Formats)

🧩 XML (Extensible Markup Language)

⚡ JSON (JavaScript Object Notation)

JSON Object vs JSON String

Data Exchange Techniques

🕰️ AJAX

📦 AXIOS

🚀 FETCH API

AJAX (Asynchronous JavaScript and XML)

jQuery AJAX

Syntax: $.ajax({})

jQuery AJAX – GET

jQuery AJAX – POST

jQuery AJAX – PUT

Practice #1 — jQuery AJAX (GET + Render)

✅ Output target (DOM)

Practice #2 — jQuery AJAX (POST + JSON)

jQuery AJAX – DELETE

Promises: Why .then() and .catch()?

Axios: Setup + Run (Step-by-step)

🌐 In the Browser

🧰 In Node.js

✅ Why students like Axios

jQuery AJAX vs Axios: What changes?

Request body

Response

Errors

Fetch: Step-by-step (What happens?)

async / await: How to use it (Step-by-step)

AXIOS

AXIOS – Code Example

FETCH API

FETCH API – Code Example

Modern Approach – async/await

Practice #3 — Fetch (async/await + Error Handling)

Practice #4 — Axios (Filter + Map)

Syntax: `$.ajax({})`

Promises: Why `.then()` and `.catch()`?

`async` / `await`: How to use it (Step-by-step)