Articles
जावास्क्रिप्ट का परिचय
जावास्क्रिप्ट में Fetch/XMLHttpRequest

जावास्क्रिप्ट में Fetch/XMLHttpRequest

यह लेख जावास्क्रिप्ट में Fetch/XMLHttpRequest को समझाता है।

YouTube Video

javascript-html-fetch-xhr.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8        box-sizing: border-box;
  9    }
 10
 11    body {
 12        margin: 0;
 13        padding: 1em;
 14        padding-bottom: 10em;
 15        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 16        background-color: #f7f9fc;
 17        color: #333;
 18        line-height: 1.6;
 19    }
 20
 21    .container {
 22        max-width: 800px;
 23        margin: 0 auto;
 24        padding: 1em;
 25        background-color: #ffffff;
 26        border: 1px solid #ccc;
 27        border-radius: 10px;
 28        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 29    }
 30
 31    .container-flex {
 32        display: flex;
 33        flex-wrap: wrap;
 34        gap: 2em;
 35        max-width: 1000px;
 36        margin: 0 auto;
 37        padding: 1em;
 38        background-color: #ffffff;
 39        border: 1px solid #ccc;
 40        border-radius: 10px;
 41        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 42    }
 43
 44    .left-column, .right-column {
 45        flex: 1 1 200px;
 46        min-width: 200px;
 47    }
 48
 49    h1, h2 {
 50        font-size: 1.2rem;
 51        color: #007bff;
 52        margin-top: 0.5em;
 53        margin-bottom: 0.5em;
 54        border-left: 5px solid #007bff;
 55        padding-left: 0.6em;
 56        background-color: #e9f2ff;
 57    }
 58
 59    button {
 60        display: block;
 61        margin: 1em auto;
 62        padding: 0.75em 1.5em;
 63        font-size: 1rem;
 64        background-color: #007bff;
 65        color: white;
 66        border: none;
 67        border-radius: 6px;
 68        cursor: pointer;
 69        transition: background-color 0.3s ease;
 70    }
 71
 72    button:hover {
 73        background-color: #0056b3;
 74    }
 75
 76    #output {
 77        margin-top: 1em;
 78        background-color: #1e1e1e;
 79        color: #0f0;
 80        padding: 1em;
 81        border-radius: 8px;
 82        min-height: 200px;
 83        font-family: Consolas, monospace;
 84        font-size: 0.95rem;
 85        overflow-y: auto;
 86        white-space: pre-wrap;
 87    }
 88
 89    .highlight {
 90        outline: 3px solid #ffc107; /* yellow border */
 91        background-color: #fff8e1;  /* soft yellow background */
 92        transition: background-color 0.3s ease, outline 0.3s ease;
 93    }
 94
 95    .active {
 96        background-color: #28a745; /* green background */
 97        color: #fff;
 98        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 99        transition: background-color 0.3s ease, box-shadow 0.3s ease;
100    }
101  </style>
102</head>
103<body>
104    <div class="container">
105        <h1>JavaScript Console</h1>
106        <button id="executeBtn">Execute</button>
107        <div id="output"></div>
108    </div>
109
110    <script>
111        // Override console.log to display messages in the #output element
112        (function () {
113            // Override console.log
114            const originalLog = console.log;
115            console.log = function (...args) {
116                originalLog.apply(console, args);
117                const message = document.createElement('div');
118                message.textContent = args.map(String).join(' ');
119                output.appendChild(message);
120            };
121
122            // Override console.error
123            const originalError = console.error;
124            console.error = function (...args) {
125                originalError.apply(console, args);
126                const message = document.createElement('div');
127                message.textContent = args.map(String).join(' ');
128                message.style.color = 'red'; // Color error messages red
129                output.appendChild(message);
130            };
131        })();
132
133        document.getElementById('executeBtn').addEventListener('click', () => {
134            // Prevent multiple loads
135            if (document.getElementById('externalScript')) return;
136
137            const script = document.createElement('script');
138            script.src = 'javascript-html-fetch-xhr.js';
139            script.id = 'externalScript';
140            //script.onload = () => console.log('javascript-html-fetch-xhr.js loaded and executed.');
141            //script.onerror = () => console.log('Failed to load javascript-html-fetch-xhr.js.');
142            document.body.appendChild(script);
143        });
144    </script>
145</body>
146</html>

जावास्क्रिप्ट में Fetch/XMLHttpRequest

Fetch और XMLHttpRequest (XHR) का उपयोग जावास्क्रिप्ट में HTTP अनुरोध भेजने और सर्वर से डेटा पुनः प्राप्त करने के लिए किया जाता है।

Fetch API

Fetch API HTTP अनुरोधों को संभालने का एक आधुनिक तरीका है, जिसे XHR के उत्तराधिकारी के रूप में डिज़ाइन किया गया है। यह प्रॉमिस पर आधारित एक असिंक्रोनस API है, जो सरल और अधिक लचीले अनुरोध प्रबंधन की अनुमति देता है।

उपयोग 

 1fetch('http://127.0.0.1:3000/example.json')
 2    .then((response) => {
 3        if (!response.ok) {
 4            throw new Error('HTTP error: ' + response.status);
 5        }
 6        return response.json();  // Parse the response as JSON
 7    })
 8    .then((data) => {
 9        console.log(data);  // Use the fetched data
10        console.log(JSON.stringify(data));
11    })
12    .catch((error) => {
13        console.error('An error occurred:', error);  // Error handling
14    });
  • यह कोड निर्दिष्ट URL पर Fetch API का उपयोग करके एक GET अनुरोध भेजता है, प्रतिक्रिया को JSON के रूप में संसाधित करता है, और परिणाम प्रदर्शित करता है या कोई त्रुटि दिखाता है।

विशेषताएँ

Fetch API की निम्नलिखित विशेषताएँ हैं:।

  • प्रॉमिस-आधारित असिंक्रोनस संचालन प्रॉमिस के साथ प्रबंधित किए जा सकते हैं, जिससे कोड साफ और पढ़ने में आसान हो जाता है।
  • त्रुटि प्रबंधन आसान त्रुटियों को catch ब्लॉक का उपयोग करके आसानी से संभाला जा सकता है।
  • response.json() जैसे तरीकों के साथ पार्सिंग प्रतिक्रिया डेटा को आसानी से JSON या टेक्स्ट प्रारूप में संसाधित किया जा सकता है।
  • CORS समर्थन Fetch क्रॉस-ओरिजिन रिसोर्स शेयरिंग (CORS) नियमों के आधार पर कार्य करता है।
  • लचीला अनुरोध कॉन्फ़िगरेशन सिर्फ GET/POST ही नहीं, बल्कि PUT और DELETE जैसे HTTP तरीकों को भी आसानी से कॉन्फ़िगर किया जा सकता है।

उदाहरण: POST अनुरोध 

 1fetch('http://127.0.0.1:3000/example.json', {
 2        method: 'POST',
 3        headers: {
 4            'Content-Type': 'application/json'
 5        },
 6        body: JSON.stringify({ name: 'Alice', age: 25 })  // Send the request body as JSON
 7    })
 8    .then(response => response.json())
 9    .then(data => console.log(JSON.stringify(data)))
10    .catch(error => console.error('Error:', error));
  • यह कोड JSON डेटा वाली POST अनुरोध भेजता है और सर्वर से प्राप्त प्रतिक्रिया को JSON के रूप में प्राप्त एवं प्रदर्शित करता है।

नुकसान

Fetch API की निम्नलिखित कमियाँ हैं:।

  • ब्राउज़र संगतता पुराने ब्राउज़र (विशेष रूप से IE11) Fetch API का समर्थन नहीं करते।
  • सूक्ष्म नियंत्रण करना मुश्किल XHR की तुलना में, यह प्रगति इवेंट्स जैसे निम्न-स्तरीय नियंत्रणों के लिए उपयुक्त नहीं है।

XMLHttpRequest（XHR）

XMLHttpRequest एक API है जिसे HTTP अनुरोधों को संभालने के लिए लंबे समय तक उपयोग किया गया है और इसे AJAX (Asynchronous JavaScript और XML) के आधार के रूप में व्यापक रूप से उपयोग किया गया है। असिंक्रोनस संचार को सक्षम करता है, जिससे पूरे पृष्ठ को फिर से लोड किए बिना सर्वर से डेटा पुनः प्राप्त किया जा सकता है।

उपयोग 

 1const xhr = new XMLHttpRequest();
 2xhr.open('GET', 'http://127.0.0.1:3000/example.json', true);
 3xhr.onreadystatechange = function() {
 4    if (xhr.readyState === 4 && xhr.status === 200) {
 5        const data = JSON.parse(xhr.responseText);  // Parse the response as JSON
 6        console.log(data);  // Use the data
 7        console.log(JSON.stringify(data));
 8    }
 9};
10xhr.send();  // Send the request
  • यह कोड XMLHttpRequest का उपयोग करके GET अनुरोध भेजता है, प्राप्त JSON प्रतिक्रिया को पार्स करता है और उसे प्रदर्शित करता है।

विशेषताएँ

XMLHttpRequest की निम्नलिखित विशेषताएँ हैं:।

  • कॉलबैक-आधारित onreadystatechange जैसी कॉलबैक फ़ंक्शन का उपयोग अनुरोध की पूर्ति या प्रगति की निगरानी के लिए किया जाता है।
  • स्थिति कोड और तैयार स्थिति की निगरानी xhr.readyState और xhr.status का उपयोग करके अनुरोध की स्थिति जाँची जा सकती है।
  • व्यापक संगतता यह पुराने ब्राउज़रों पर भी काम करता है।
  • अनुरोध प्रगति की निगरानी xhr.upload.onprogress जैसे इवेंट्स का उपयोग करके प्रगति की निगरानी की जा सकती है।

उदाहरण: POST अनुरोध 

 1const xhr = new XMLHttpRequest();
 2xhr.open('POST', 'http://127.0.0.1:3000/example.json', true);
 3xhr.setRequestHeader('Content-Type', 'application/json');
 4xhr.onreadystatechange = function() {
 5    if (xhr.readyState === 4 && xhr.status === 200) {
 6        const data = JSON.parse(xhr.responseText);
 7        console.log(data);
 8        console.log(JSON.stringify(data));
 9    }
10};
11xhr.send(JSON.stringify({ name: 'Alice', age: 25 }));  // Send the data
  • यह कोड XMLHttpRequest का उपयोग करके JSON डेटा के साथ POST अनुरोध भेजता है, प्रतिक्रिया प्राप्त करता है, और उसे प्रदर्शित करता है।

नुकसान

XMLHttpRequest की निम्नलिखित कमियाँ हैं:।

  • कोड जटिलता कॉलबैक फ़ंक्शंस के साथ असिंक्रोनस प्रोसेसिंग को प्रबंधित करना जटिल हो जाता है।
  • मूल रूप से प्रॉमिस समर्थन नहीं क्योंकि डिफ़ॉल्ट रूप से प्रॉमिस समर्थित नहीं हैं, असिंक्रोनस प्रोसेसिंग कुछ हद तक लंबी और जटिल हो जाती है।

Fetch API और XMLHttpRequest के बीच तुलना

विशेषताएँ Fetch API XMLHttpRequest (XHR)
असिंक्रोनस प्रोसेसिंग प्रमिस के साथ सरल कॉलबैक कार्यों की आवश्यकता होती है
त्रुटि हैंडलिंग .catch() के साथ प्रबंधनीय readyState स्थिति की जाँच करें
प्रगति ईवेंट्स समर्थित नहीं onprogress के साथ हैंडल किया जाता है
क्रॉस-उत्पत्ति समर्थन स्वचालित रूप से CORS का समर्थन करता है CORS का समर्थन करता है
ब्राउज़र समर्थन IE11 और पुराने में समर्थित नहीं पुराने ब्राउज़रों के साथ संगत
नियंत्रण की बारीकी सरल और सहज सूक्ष्म नियंत्रण की अनुमति देता है

सारांश

  • Fetch API प्रमिस पर आधारित सरल और लचीले HTTP अनुरोध प्रदान करता है और आधुनिक ब्राउज़रों में सिफारिश की जाती है।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video

जावास्क्रिप्ट में इवेंट हैंडलिंग