Blog

JavaScript Me Fetch API & AJAX Kya Hote Hain – What is Fetch API & AJAX In JavaScript

AJAX Kya Hota Hai?

AJAX ka matlab hai Asynchronous JavaScript and XML. Ye ek web development technique hai jo browser aur server ke beech bina page reload kiye data exchange karne mein madad karti hai.

JavaScript aur XMLHttpRequest object ka use karke, AJAX background mein server requests bhejta hai aur responses receive karta hai. Isse web applications ko fast, responsive aur interactive banaya ja sakta hai. Jab user kisi action ko perform karta hai, to pura page reload hone ki jagah sirf specific data update hota hai.

Aaj ke samay mein JSON format ka zyada upyog hota hai, XML ki jagah. AJAX ka istemal Gmail, Facebook jaise modern web apps mein hota hai jahan real-time updates aur seamless user experience important hote hain.

Example: Jab aap Google par kuch likhna start karte ho, toh suggestions automatic aate hain bina page reload kiye – yeh AJAX se hota hai.

AJAX kaise kaam karta tha?

AJAX ka full form hai “Asynchronous JavaScript and XML”. Ye ek web technology hai jo bina page reload kiye server se data bhejne aur receive karne ki suvidha deti hai. Jab user koi action leta hai jaise form submit ya search box me type karta hai, to AJAX background me server se data fetch karta hai aur sirf specific part of page ko update karta hai. Isme JavaScript ke XMLHttpRequest object ya fetch() function ka use hota hai. Ye process asynchronous hota hai, iska matlab hai ki poora page reload nahi hota. Isse web applications fast aur user-friendly bante hain. AJAX commonly use hota hai real-time features jaise live search, chat apps, aur dynamic content loading ke liye.

let xhr = new XMLHttpRequest();
xhr.open("GET", "data.json", true);
xhr.onload = function () {
  if (xhr.status == 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

Problems:

  • Code complex hota tha
  • Readability low hoti thi
  • Promises ka support nahi tha (callback hell)

Fetch API Kya Hai?

Fetch API ek modern JavaScript interface hai jo web browsers mein built-in hoti hai. Iska use web servers se data request karne ke liye hota hai. Ye asynchronous hoti hai, matlab aapka code bina rukhe aage chalta hai jab tak data fetch ho raha hota hai. Fetch API promises ka use karti hai, jisse aapko callback hell se bachne mein madad milti hai.

Jab bhi aap kisi web page se ya API se data chahte hain (jaise JSON, text, ya images), to fetch() method ka use karke request bhej sakte hain. Ye method by default GET request bhejta hai, lekin aap chahein to POST, PUT, DELETE jaise methods bhi use kar sakte hain.

Fetch API XMLHTTPRequest ka modern replacement hai — ye zyada readable, simple, aur flexible hai. Iska syntax clean hota hai aur error handling bhi try…catch ya .catch() se easily ki ja sakti hai.

Fetch API Example:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log("Error:", error));

Breakdown (Line by Line in Hinglish):

  • fetch(url) – Server par request bhejta hai (GET method by default hoti hai).
  • .then(response => response.json()) – Server ka response aata hai (JSON format mein), jise hum readable object mein convert karte hain.
  • .then(data => ...) – Actual data milta hai, jise hum console ya webpage par use karte hain.
  • .catch(error => ...) – Agar koi error aayi (jaise server unavailable, ya wrong URL), toh handle hoti hai.

Fetch API ke Features:

Feature Description (Hinglish)
Modern Syntax Promises based hai
Simple to Use Easy aur readable syntax
JSON Support JSON data ko easily parse kar sakte ho
Works with Async/Await Modern async programming support karta hai

POST Request:

POST request ek HTTP method hota hai jo client (jaise browser) se server ko data bhejne ke liye use hota hai. JavaScript me, POST request ka istemal fetch() function ke through hota hai jisme hum server ko JSON ya form data bhejte hain. Isme data request body me hota hai, URL me nahi. POST ka use tab hota hai jab hume server par naye data create karne hote hain, jaise user registration ya form submission. Yeh method secure aur flexible hota hai, especially jab large ya sensitive data bhejna ho. Response me server hume status aur data return karta hai.

fetch('https://api.example.com/add', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'Sandeep', age: 25 })
})
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.log(err));

POST request mein kya hota hai:

  • Server ko data bhejna hota hai
  • Data JSON.stringify() karke bhejte hain
  • Headers mein content type define karte hain

PUT Request:

Put request ek HTTP method hota hai jo server par kisi existing resource ko update karne ke liye use hota hai. JavaScript mein hum fetch() ya kisi library jaise Axios ka use karke PUT request bhejte hain. Isme hum data ko JSON format mein body ke through bhejte hain. Server us resource ko nayi information ke saath replace kar deta hai. PUT request idempotent hoti hai, matlab same request baar-baar bhejne par result same hi rahta hai. Ye method tab use hoti hai jab hume kisi specific item ki puri information update karni hoti hai, partial nahi.

fetch('https://api.example.com/users/1', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'Rahul',
    age: 30
  })
})
.then(response => response.json())
.then(data => console.log(data));

Explanation:

Yeh JavaScript code fetch() function ka use karke ek PUT request bhej raha hai https://api.example.com/users/1 URL par. Iska matlab hai ki user jiska ID 1 hai, uski details ko update kiya ja raha hai.

fetch(‘https://api.example.com/users/1’, { … })
Ye server par request bhejta hai specified URL par.

method: ‘PUT’
Yahaan hum bata rahe hain ki yeh request PUT type ki hai, yaani existing user data ko update karna hai.

headers: { ‘Content-Type’: ‘application/json’ }
Isse hum server ko batate hain ki jo data bhej rahe hain woh JSON format mein hai.

body: JSON.stringify({ name: ‘Rahul’, age: 30 })
Yahaan hum updated user data bhej rahe hain – user ka naam “Rahul” aur umar 30 set kar rahe hain. JSON.stringify() object ko JSON string mein convert karta hai.

.then(response => response.json())
Server se jab response aata hai, to use JSON mein convert kiya ja raha hai.

.then(data => console.log(data))
Aur finally jo response data aata hai usse console mein print kiya ja raha hai.

Simple words mein: Yeh code user jiska ID 1 hai, uska naam aur age update karta hai server par.

Fetch API with Async/Await:

async function getData() {
  try {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.log('Error:', error);
  }
}

Async-Await ke fayde:

  • Code aur readable hota hai
  • Errors ko try-catch se easily handle kar sakte hain

Difference Between AJAX vs Fetch API:

Feature AJAX (Old – XMLHttpRequest) Fetch API (New)
Syntax Complex Simple & Clean
Based on Callbacks Promises
Error Handling Manually Built-in .catch
Browser Support Wide Modern Browsers
JSON Handling Manual parsing Easy with .json()

Summary :

  • AJAX ek technique hai data ko asynchronously fetch karne ki
  • Pehle AJAX XMLHttpRequest se kaam karta tha – jo complex tha
  • Fetch API modern approach hai – jo Promises aur Async/Await ka use karta hai
  • Fetch API ka code short, clean, aur readable hota hai

Quiz: Test Your Knowledge on Fetch API & AJAX in JavaScript

Bonus: Practical Application!

Aaj hi apne JavaScript project me Fetch API ya AJAX ka istemal karke data fetch karna seekhein!

JavaScript me Fetch API aur AJAX ka sahi tareeke se istemal karke aap asynchronous data ko server se fetch ya send kar sakte hain — bina page reload kiye!
In dono techniques ko samajhne ke liye JSON data fetch karna, API se response lena, aur DOM me data dikhana jaise tasks par practice karein aur apne projects ko aur bhi dynamic banayein.

Leave a Reply