JS का AJAX

Fetch API topic background HTTP requests बनाने का modern तरीका पहले ही कवर कर चुका है, पर AJAX (Asynchronous JavaScript and XML) एक पुरानी, व्यापक technique है जो fetch से एक दशक से भी ज़्यादा पहले की है, जो मूल रूप से XMLHttpRequest object पर बनी थी। कई मौजूदा codebases, tutorials, और interview questions अभी भी सीधे AJAX और XMLHttpRequest का ज़िक्र करते हैं, जिससे इसे समझना ज़रूरी हो जाता है भले ही नए code के लिए अब fetch को prefer किया जाता है।

In this page:

AJAX का मतलब क्या है
XMLHttpRequest: मूल AJAX API
fetch() ने XMLHttpRequest की जगह काफी हद तक क्यों ली
Web Application में AJAX कहाँ फिट बैठता है
AJAX और Server-Side Languages

Syntax

javascript

const xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.onload = function() {
  // xhr.responseText
};
xhr.send();

AJAX का मतलब क्या है

AJAX का मतलब है Asynchronous JavaScript and XML, हालांकि modern AJAX असली XML के बजाय भारी मात्रा में JSON का आदान-प्रदान करता है -- core idea यह है कि server को एक background request की जाए जो पूरे page को reload किए बिना उसका एक हिस्सा update कर दे, वही technique जिसे fetch() एक ज़्यादा modern तरीके से लागू करता है।

Note: AJAX को एक technique या pattern समझें, कोई खास API नहीं -- पुराना XMLHttpRequest object और modern fetch() function दोनों ही "AJAX करने" के तरीके हैं।

Warning: AJAX में मौजूद XML ज़्यादातर उस समय की एक historical निशानी है जब XML इन requests का प्रमुख data format था -- यह न मान लें कि आज किसी AJAX request में असली XML शामिल होनी ही चाहिए।

उदाहरण: What AJAX Means

javascript

// AJAX: background request updates part of a page, no full reload
fetch("data.php")
  .then(response => response.json())
  .then(data => console.log(data)); // modern AJAX exchanges JSON, not XML

XMLHttpRequest: मूल AJAX API

fetch() के आने से पहले, XMLHttpRequest JavaScript से background HTTP request बनाने का एकमात्र तरीका था -- यह एक XMLHttpRequest object बनाकर, response आने पर एक event listener configure करके, और request असल में भेजने के लिए .send() कॉल करके काम करता है।

Note: पुराना code पढ़ते समय XMLHttpRequest pattern (new XMLHttpRequest(), .open(), .onreadystatechange, .send()) पहचानें, भले ही आप नया code fetch से लिखें।

Warning: XMLHttpRequest की callback-based, readyState जांचने वाली style, वही request पूरी करने के लिए promise-based fetch API से काफी ज़्यादा verbose है।

उदाहरण: XMLHttpRequest: The Original AJAX API

javascript

// Declare the constant `xhr` as a new `XMLHttpRequest` instance
// Declare the constant `xhr` as a new `XMLHttpRequest` instance
const xhr = new XMLHttpRequest();
// Listen for the `load` event on `xhr` and run the handler when it fires
// Listen for the `load` event on `xhr` and run the handler when it fires
xhr.addEventListener("load", () => console.log(xhr.responseText));
// Call `xhr.open("GET", "data.php")`
// Call `xhr.open("GET", "data.php")`
xhr.open("GET", "data.php");
// Call `xhr.send()`
// Call `xhr.send()`
xhr.send();

fetch() ने XMLHttpRequest की जगह काफी हद तक क्यों ली

fetch() एक Promise return करता है, जो .then()/.catch() chains और async/await के साथ स्वाभाविक रूप से जुड़ता है, जबकि XMLHttpRequest एक event callback के अंदर manually readyState जांचने पर निर्भर करता है -- fetch का साफ syntax ही वजह है कि यह नए AJAX-style code के लिए default विकल्प बन गया है।

Note: सभी नए code के लिए fetch() को default बनाएं; XMLHttpRequest की जानकारी को खासतौर पर उस मौजूदा code को पढ़ने, maintain करने, या debug करने के लिए रखें जो इसे पहले से इस्तेमाल करता है।

Warning: fetch() किसी HTTP error status (जैसे 404 या 500) पर अपना promise उस तरह reject नहीं करता जैसा आप उम्मीद कर सकते हैं -- response.ok जांचना अभी भी ज़रूरी है, यह दोनों APIs से याद रखने लायक एक बारीक बात है।

उदाहरण: Why fetch() Largely Replaced XMLHttpRequest

javascript

// Declare the constant `xhr` as a new `XMLHttpRequest` instance
// Declare the constant `xhr` as a new `XMLHttpRequest` instance
const xhr = new XMLHttpRequest();
// Assign `() => { if (xhr.readyState === 4) console.log(xhr.responseText); }` to `xhr.onreadystatechange`
// Assign `() => { if (xhr.readyState === 4) console.log(xhr.responseText); }` to `xhr.onreadystatechange`
xhr.onreadystatechange = () => { if (xhr.readyState === 4) console.log(xhr.responseText); };
// Call `xhr.open("GET", "data.php")`
// Call `xhr.open("GET", "data.php")`
xhr.open("GET", "data.php");
// Call `xhr.send()`
// Call `xhr.send()`
xhr.send();

// Call `fetch("data.php").then(r => r.json()).then(data => console.log(data))`
// Call `fetch("data.php").then(r => r.json()).then(data => console.log(data))`
fetch("data.php").then(r => r.json()).then(data => console.log(data));

Web Application में AJAX कहाँ फिट बैठता है

AJAX-style requests (fetch या XMLHttpRequest के ज़रिए) live search, बिना reload के form submission, infinite-scrolling feeds, real-time dashboard updates, और किसी भी ऐसी interaction को चलाते हैं जहाँ पूरे page को reload करना धीमा या असहज लगेगा जबकि असल में बस एक छोटा data update करना था।

Note: AJAX को उन interactions के लिए रखें जिन्हें सच में instant और partial महसूस होने का फायदा मिलता है, हर page interaction को अनावश्यक रूप से एक background request में बदलने के बजाय।

Warning: एक AJAX-dependent feature जो JavaScript errors या network requests fail होने पर चुपचाप fail हो जाता है, किसी user को बिना किसी दिखने वाले feedback के फंसा सकता है -- हमेशा failure case को handle करें।

उदाहरण: Where AJAX Fits in a Web Application

javascript

// Define the function `search` taking `term`
// Define the function `search` taking `term`
function search(term) {
  fetch(`search.php?term=${term}`).then(r => r.json()).then(results => console.log(results));
}
// Call `search("widgets")`
// Call `search("widgets")`
search("widgets");

AJAX और Server-Side Languages

AJAX requests client side पर language-agnostic होती हैं -- JavaScript request को एक जैसे ही तरीके से भेजता है चाहे server को कोई भी चला रहा हो, PHP, Node.js, Python, या कोई और backend -- जब तक server एक ऐसा appropriate response return करता है जिसे JavaScript parse कर सके।

Note: client-side fetch या XMLHttpRequest code जोड़ने से पहले server endpoint के expected request format (query string, JSON body, form data) और response format की पुष्टि कर लें।

Warning: client जो भेजता है (जैसे JSON) और server जो चाहता है (जैसे form-encoded data) के बीच का mismatch "मेरी AJAX request क्यों fail हो रही है" जैसे bugs का एक बहुत आम कारण है।

उदाहरण: AJAX and Server-Side Languages

javascript

fetch("data.php").then(r => r.json()).then(data => console.log(data)); // could be PHP, Node.js, Python, etc.

Live Example

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson JS Service Workers Next Lesson → JS AJAX Intro

JS का AJAX

AJAX का मतलब क्या है

XMLHttpRequest: मूल AJAX API

fetch() ने XMLHttpRequest की जगह काफी हद तक क्यों ली

Web Application में AJAX कहाँ फिट बैठता है

AJAX और Server-Side Languages

Chapter Quiz — Complete all 26 topics to unlock

Login to run this code