What is AJAX? Learn How AJAX Works in JavaScript

what is ajax

आज के दौर में वेबसाइट्स को तेज़, यूज़र-फ्रेंडली और इंटरैक्टिव बनाना हर वेब डेवलपर की ज़रूरत है। जब आप किसी वेबसाइट पर बटन क्लिक करते हैं या कोई फॉर्म सबमिट करते हैं और पेज बिना रीलोड हुए अपडेट हो जाता है — तो समझिए वहां AJAX का कमाल है।

  1. AJAX क्या है?
  2. AJAX कैसे काम करता है?
  3. JavaScript में AJAX कैसे इस्तेमाल करते हैं?

इस ब्लॉग में हम इन सभी सवालों के जवाब आसान हिंदी में देंगे, साथ ही कुछ ajax examples भी देखेंगे ताकि आपको बेहतर समझ आए।

AJAX क्या है?

AJAX का पूरा नाम है – Asynchronous JavaScript and XML

यह कोई अलग प्रोग्रामिंग लैंग्वेज नहीं है, बल्कि एक टेक्निक (तकनीक) है जिसकी मदद से आप किसी वेबपेज को बिना पेज को रीलोड किए अपडेट कर सकते हैं।

मतलब यह है कि जब आप AJAX का इस्तेमाल करते हैं, तो ब्राउज़र और सर्वर के बीच डेटा का आदान-प्रदान बैकग्राउंड में होता है — और यूज़र को बिना किसी रुकावट के नया कंटेंट दिखता है।

AJAX क्यों ज़रूरी है?

AJAX का इस्तेमाल करने से वेबसाइट यूज़र के लिए:

  • तेज़ (fast) बनती है

  • Smooth experience देती है

  • बार-बार पेज लोड नहीं होता

  • केवल ज़रूरत का हिस्सा ही अपडेट होता है

एक उदाहरण देखें:
जब आप Gmail खोलते हैं और कोई नया ईमेल आता है, तो पूरी स्क्रीन रीलोड नहीं होती, बल्कि नया ईमेल अपने आप लिस्ट में जुड़ जाता है — यह AJAX का बेहतरीन इस्तेमाल है।

AJAX क्यों ज़रूरी है?

अब बात करते हैं कि AJAX कैसे काम करता है। इसके पीछे कुछ steps होते हैं:

1. यूज़र कोई एक्शन करता है

जैसे – बटन क्लिक करना, सर्च बॉक्स में कुछ टाइप करना आदि।

2. JavaScript एक XML Http Request (या fetch API) बनाता है

यह ब्राउज़र से सर्वर तक बैकग्राउंड में डेटा भेजने और रिसीव करने का काम करता है।

3. सर्वर पर request जाती है

सर्वर उस request को प्रोसेस करता है (जैसे – DB से डेटा निकालना) और response भेजता है।

4. JavaScript उस डेटा को प्राप्त करता है

JavaScript उस डेटा को वेबपेज पर dynamically अपडेट कर देता है।

5. वेबपेज बिना reload हुए अपडेट हो जाता है

यूज़र को smooth और seamless experience मिलता है।

AJAX के Components (घटक)

AJAX इन technologies का मिलाजुला रूप है:

  • HTML/XHTML – पेज स्ट्रक्चर के लिए

  • CSS – डिज़ाइन और स्टाइल के लिए

  • JavaScript – इंटरैक्शन के लिए

  • DOM – पेज के एलिमेंट्स को कंट्रोल करने के लिए

  • XMLHttpRequest / fetch API – सर्वर से डेटा लेने और भेजने के लिए

  • JSON/XML – डेटा फॉर्मेट के लिए

AJAX Examples

Example 1: बिना पेज रीलोड किए डेटा लाना (GET Request)

const xhr = new XMLHttpRequest();xhr.open(“GET”, “data.json”, true);xhr.onload = function() {  if (xhr.status === 200) {    const data = JSON.parse(xhr.responseText);    console.log(data);  }};xhr.send();

इस कोड में, हम सर्वर से data.json फाइल को बिना पेज रीलोड किए प्राप्त कर रहे हैं।

Example 2: AJAX with Fetch API

fetch(‘data.json’)  .then(response => response.json())  .then(data => {    console.log(data);  })  .catch(error => console.error(‘Error:’, error));

यह fetch API का उपयोग करता है — modern और आसान तरीका।

AJAX का उपयोग कहाँ-कहाँ होता है?

AJAX का उपयोग लगभग हर interactive वेबसाइट में होता है। जैसे:

  • Gmail / Outlook – नया ईमेल लाना
  • Google Search Suggestions – टाइप करते समय सुझाव देना
  • सोशल मीडिया – पोस्ट पर like, comment या scroll करना
  • YouTube – वीडियो suggestions लाना
  • E-commerce – प्रोडक्ट फ़िल्टर, सर्च बॉक्स

AJAX के फायदे और नुकसान

फायदे:

  • पेज reload नहीं होता
  • यूज़र experience smooth बनता है
  • सर्वर लोड कम होता है
  • Real-time डेटा communication होता है

नुकसान:

  • JavaScript पर पूरा निर्भर
  • SEO के लिए थोड़ा complex
  • JavaScript disable होने पर AJAX काम नहीं करता
  • Debugging मुश्किल हो सकती है

AJAX vs Traditional Web Requests

Feature

Traditional Request

AJAX

Page Reload

हाँ

नहीं

User Experience

धीमा

तेज़

Bandwidth Usage

ज्यादा

कम

Data Handling

पूरा पेज

सिर्फ ज़रूरी डेटा

AJAX का भविष्य और Modern उपयोग

आज के समय में AJAX का इस्तेमाल अब केवल XML तक सीमित नहीं है। अब JSON, fetch API, और asynchronous functions का उपयोग करके और भी तेज़ और सुरक्षित इंटरफेस बनाए जा रहे हैं।

AJAX का कॉन्सेप्ट React, Angular, और Vue जैसे modern frameworks में भी इस्तेमाल होता है, बस वहां syntax और abstraction अलग होती है।

FAQs – अक्सर पूछे जाने वाले सवाल

Q1: AJAX और API में क्या अंतर है?

AJAX एक तकनीक है जिससे आप API को call कर सकते हैं। API डेटा देने का जरिया है, जबकि AJAX डेटा लेने का तरीका।

Q2: क्या AJAX के लिए jQuery ज़रूरी है?

नहीं, modern JavaScript (ES6+) में fetch API या XMLHttpRequest का इस्तेमाल किया जा सकता है।

Q3: AJAX SEO के लिए खराब है?

AJAX content को Google index कर सकता है, लेकिन सही तरीका अपनाना ज़रूरी हैजैसे कि dynamic rendering या SSR (Server Side Rendering)

You have been successfully Subscribed! Ops! Something went wrong, please try again.

About Us

Techy Notes पर पाएँ आसान हिंदी में computer notes in hindi और IT company interview questions, जिससे तैयारी हो असरदार और आसान हर छात्र के लिए।

Recent news

  • All Post
  • Career Guidance
  • Interview
  • Jobs
  • Notes
  • Taja Khabar
  • Technology

© 2024 Created By Himanshu Nigam