S10L03 - HTTP अनुरोध

html


JavaScript में HTTP अनुरोधों में महारत हासिल करना: एक व्यापक मार्गदर्शिका
विषय सूची

परिचय.................................................पृष्ठ 3
HTTP कॉल को समझना...................................पृष्ठ 5

2.1. HTTP कॉल क्या हैं?
2.2. JSON Placeholder की भूमिका
2.3. Fetch API बनाम XMLHttpRequest


XMLHttpRequest के साथ HTTP GET अनुरोध करना.............पृष्ठ 10

3.1. अनुरोध सेट करना
3.2. Asynchronous ऑपरेशन को संभालना
3.3. Ready States और HTTP Status Codes का प्रबंधन


JavaScript में Asynchronous प्रोग्रामिंग को संभालना............पृष्ठ 18

4.1. JavaScript की Asynchronous प्रकृति
4.2. Asynchronous प्रोग्रामिंग के फायदे और नुकसान
4.3. भविष्य के विषय: Promises, Async/Await


निष्कर्ष...................................................पृष्ठ 25


परिचय
स्वागत है "JavaScript में HTTP अनुरोधों में महारत हासिल करना", आपका अंतिम मार्गदर्शिका JavaScript का उपयोग करके HTTP कॉल को समझने और लागू करने के लिए। चाहे आप वेब विकास की दुनिया में कदम रखने वाले शुरुआती हों या एक अनुभवी डेवलपर हों जो अपने ज्ञान को मजबूत करना चाहते हों, यह eBook HTTP अनुरोधों की स्पष्ट, संक्षिप्त, और व्यापक खोज प्रदान करता है।
समीक्षा
HTTP (HyperText Transfer Protocol) वेब पर डेटा संचार का आधार है। HTTP अनुरोधों में महारत हासिल करना सर्वर से डेटा प्राप्त करने, APIs के साथ इंटरैक्ट करने, और डायनेमिक वेब एप्लिकेशन बनाने के लिए महत्वपूर्ण है। यह मार्गदर्शिका HTTP कॉल के मैकेनिक्स में गहराई से जाती है, आधुनिक और पारंपरिक तरीकों की तुलना करती है, और आपके सीखने को मजबूत करने के लिए व्यावहारिक कोड उदाहरण पेश करती है।
महत्व और उद्देश्य
HTTP अनुरोधों को समझना डेवलपर्स को सक्षम बनाता है:

बाहरी स्रोतों से डेटा प्राप्त करना और उसेManipulate करना।
इंटरैक्टिव और उत्तरदायी वेब एप्लिकेशन बनाना।
तीसरे पक्ष के APIs के साथ निर्बाध रूप से एकीकृत करना।

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

डायनेमिक डेटा पुनर्प्राप्ति और मैनिपुलेशन को सुविधाजनक बनाता है।
Asynchronous डेटा लोडिंग के माध्यम से उपयोगकर्ता अनुभव को बढ़ाता है।
विभिन्न वेब सेवाओं के साथ एकीकरण को सक्षम बनाता है।

नुकसान:

Asynchronous प्रोग्रामिंग जटिलता ला सकती है।
त्रुटियों और अवस्थाओं के सावधानीपूर्वक प्रबंधन की आवश्यकता होती है।
प्रभावी ढंग से प्रबंधित नहीं होने पर संभावित प्रदर्शन ओवरहेड।

विषयों का सारणीबद्ध अवलोकन


विषय
विवरण
मुख्य बिंदु


HTTP Calls
HTTP अनुरोधों के मूल बातें
Methods, status codes


JSON Placeholder
HTTP अनुरोधों का परीक्षण करने के लिए एक मुक्त सेवा
Setup, usage


Fetch API vs. XMLHttpRequest
आधुनिक और पारंपरिक HTTP विधियों की तुलना
Syntax, capabilities


Asynchronous Programming in JS
Async ऑपरेशनों को संभालना
Promises, async/await, callbacks


HTTP अनुरोध कब और कहाँ उपयोग करें
HTTP अनुरोध आवश्यक हैं जब:

रिमोट सर्वरों के साथ संवाद करना।
तीसरे पक्ष के APIs को एकीकृत करना।
सिंगल-पेज एप्लिकेशन (SPAs) बनाना।
CRUD (Create, Read, Update, Delete) ऑपरेशनों को प्रदर्शन करना।

विभिन्न HTTP विधियों का उपयोग कब और कैसे करना है और प्रतिक्रियाओं को प्रभावी ढंग से संभालना आपके वेब विकास परियोजनाओं को काफी हद तक बढ़ा सकता है।

HTTP कॉल को समझना
2.1 HTTP कॉल क्या हैं?
HTTP कॉल वे अनुरोध होते हैं जो एक क्लाइंट (आमतौर पर एक वेब ब्राउज़र) से सर्वर को भेजे जाते हैं ताकि विभिन्न ऑपरेशनों को निष्पादित किया जा सके जैसे डेटा प्राप्त करना, फॉर्म जमा करना, या संसाधनों को अपडेट करना। ये कॉल HTTP प्रोटोकॉल का पालन करते हैं, जो परिभाषित करता है कि संदेशों का फॉर्मेट और ट्रांसमिशन कैसे होता है।
2.2 JSON Placeholder की भूमिका
JSON Placeholder एक मुफ्त ऑनलाइन REST API है जिसे आप परीक्षण और प्रोटोटाइपिंग के लिए उपयोग कर सकते हैं। यह नकली डेटा लौटाने वाले एंडपॉइंट प्रदान करता है, जिससे डेवलपर्स अपने सर्वरों को सेट अप किए बिना HTTP कॉल्स का अनुकरण कर सकते हैं।
उदाहरण एंडपॉइंट:

https://jsonplaceholder.typicode.com/posts – पोस्टों की सूची लौटाता है।

2.3 Fetch API बनाम XMLHttpRequest
आधुनिक JavaScript मुख्यतः HTTP अनुरोध करने के लिए Fetch API का उपयोग करता है क्योंकि यह सरलता और promise-आधारित संरचना के लिए लोकप्रिय है। हालाँकि, XMLHttpRequest (XHR) को समझना जरूरी है क्योंकि यह अधिक नियंत्रण प्रदान करता है और पुराने कोडबेस के लिए मौलिक है।


विशेषता
Fetch API
XMLHttpRequest


Syntax Style
Promise-based
Callback-based


Ease of Use
Simple and concise
More verbose and complex


Streaming Data
Supports streaming
Limited streaming capabilities


Browser Support
Modern browsers
Broad browser support, including older ones


Handling Responses
Requires parsing to JSON explicitly
Can handle various response types easily



XMLHttpRequest के साथ HTTP GET अनुरोध करना
जहां Fetch API व्यापक रूप से अपनाया गया है, वहां XMLHttpRequest को समझना HTTP अनुरोध जीवनचक्र में गहरी अंतर्दृष्टि प्रदान करता है। आइए XHR का उपयोग करके एक GET अनुरोध बनाने के चरणों के माध्यम से चलते हैं।
3.1 अनुरोध सेट करना
पहले, XMLHttpRequest का एक नया instance बनाएं और इच्छित एंडपॉइंट से कनेक्शन खोलें।




		
		
			
			
Java
			
			
// एक नया XMLHttpRequest ऑब्जेक्ट बनाएँ
const request = new XMLHttpRequest();

// JSON Placeholder API से कनेक्शन खोलें
request.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);

			
				
					
				
					1
2
3
4
5
6
7
				
						 
// एक नया XMLHttpRequest ऑब्जेक्ट बनाएँ
const request = new XMLHttpRequest();
 
// JSON Placeholder API से कनेक्शन खोलें
request.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
 
					
				
			
		


व्याख्या:

new XMLHttpRequest(): एक नया XHR ऑब्जेक्ट प्रारंभ करता है।
open(method, URL, async): अनुरोध सेट करता है। तीसरा पैरामीटर true एक asynchronous अनुरोध को इंगित करता है।

3.2 Asynchronous ऑपरेशन को संभालना
JavaScript स्वाभाविक रूप से asynchronous है, जिसका मतलब है कि यह HTTP प्रतिक्रिया की प्रतीक्षा करते हुए अन्य कार्यों को संभाल सकता है। इसे प्रबंधित करने के लिए, state changes को संभालने के लिए event listeners का उपयोग करें।




		
		
			
			
Java
			
			
// state changes के लिए एक event listener जोड़ें
request.onreadystatechange = function() {
  // जांचें कि अनुरोध पूरा हुआ है या नहीं
  if (request.readyState === 4 && request.status === 200) {
    // प्रतिक्रिया को पार्स करें और log करें
    const data = JSON.parse(request.responseText);
    console.log(data);
  }
};

// अनुरोध भेजें
request.send();

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
				
						 
// state changes के लिए एक event listener जोड़ें
request.onreadystatechange = function() {
  // जांचें कि अनुरोध पूरा हुआ है या नहीं
  if (request.readyState === 4 && request.status === 200) {
    // प्रतिक्रिया को पार्स करें और log करें
    const data = JSON.parse(request.responseText);
    console.log(data);
  }
};
 
// अनुरोध भेजें
request.send();
 
					
				
			
		


व्याख्या:

onreadystatechange: अनुरोध जीवनचक्र के दौरान ट्रिगर होने वाला event handler।
readyState === 4: इंगित करता है कि अनुरोध पूरा हो चुका है।
status === 200: सफल HTTP status code की जांच करता है।
JSON.parse(request.responseText): JSON string प्रतिक्रिया को JavaScript ऑब्जेक्ट में बदलता है।

3.3 Ready States और HTTP Status Codes का प्रबंधन
readyState और HTTP status codes को समझना प्रभावी HTTP अनुरोध प्रबंधन के लिए महत्वपूर्ण है।
Ready States:


readyState
Description


0
UNSENT - Client has been created.


1
OPENED - open() has been called.


2
HEADERS_RECEIVED - send() has been called.


3
LOADING - Downloading response.


4
DONE - The operation is complete.


सामान्य HTTP Status Codes:


Status Code
Meaning


200
OK - The request was successful.


404
Not Found - The requested resource could not be found.


500
Internal Server Error - A generic error on the server.



JavaScript में Asynchronous प्रोग्रामिंग को संभालना
Asynchronous प्रोग्रामिंग JavaScript को पिछले ऑपरेशनों के पूरा होने की प्रतीक्षा किए बिना कार्य करने की अनुमति देती है। यह HTTP अनुरोध जैसे कार्यों के लिए आवश्यक है, जहां प्रतिक्रिया की प्रतीक्षा मुख्य थ्रेड को ब्लॉक कर सकती है।
4.1 JavaScript की Asynchronous प्रकृति
JavaScript एक event-driven, non-blocking I/O मॉडल का उपयोग करता है। इसका मतलब है कि यह प्रत्येक ऑपरेशन को समाप्त होने का इंतजार किए बिना एक साथ कई ऑपरेशनों को संभाल सकता है, जिससे प्रदर्शन और उपयोगकर्ता अनुभव में सुधार होता है।
उदाहरण:
जब HTTP अनुरोध किया जाता है, तो JavaScript निष्पादन को रोकता नहीं है। इसके बजाय, यह अन्य कोड को चलाना जारी रखता है, HTTP प्रतिक्रिया को जब भी callbacks या promises के माध्यम से आता है, उसे संभालता है।
4.2 Asynchronous प्रोग्रामिंग के फायदे और नुकसान
फायदे:

Efficiency: Non-blocking ऑपरेशंस एप्लिकेशनों को अधिक उत्तरदायी बनाते हैं।
Performance: एक साथ कई कार्यों को संभाल सकते हैं।
User Experience: लंबी ऑपरेशंस के दौरान UI को फ्रीज होने से रोकता है।

नुकसान:

Complexity: Asynchronous कोड को प्रबंधित करना चुनौतीपूर्ण हो सकता है।
Debugging: त्रुटियों को ट्रेस करना अधिक कठिन हो सकता है।
State Management: विभिन्न अवस्थाओं को ट्रैक करना सावधानीपूर्वक योजना की आवश्यकता है।

4.3 भविष्य के विषय: Promises, Async/Await
Asynchronous ऑपरेशनों को अधिक प्रभावी ढंग से प्रबंधित करने के लिए, आधुनिक JavaScript Promises और async/await सिंटैक्स पेश करता है।

Promises: एक asynchronous ऑपरेशन के अंततः पूरा होने या विफल होने का प्रतिनिधित्व करते हैं, जिससे .then() और .catch() मेथड्स की चेनिंग संभव होती है।
Async/Await: Promises पर सिंटैक्स शुगर जो asynchronous कोड को synchronous के रूप में दिखाता है, जिससे पठनीयता और रखरखाव में सुधार होता है।


निष्कर्ष
इस मार्गदर्शिका में, हमने JavaScript में HTTP अनुरोध करने की जटिलताओं का पता लगाया है, आधुनिक और पारंपरिक तरीकों का उपयोग करते हुए। XMLHttpRequest को सेट अप करने से लेकर JavaScript की asynchronous प्रकृति को समझने तक, इन अवधारणाओं में महारत हासिल करना मजबूत वेब एप्लिकेशन बनाने के लिए महत्वपूर्ण है।
मुख्य बिंदु

HTTP Calls: क्लाइंट और सर्वर के बीच डेटा संचार के लिए मौलिक हैं।
JSON Placeholder: सर्वर सेट अप किए बिना HTTP अनुरोधों का परीक्षण करने के लिए एक मूल्यवान उपकरण।
Fetch API vs. XMLHttpRequest: दोनों को समझने से विभिन्न परिदृश्यों को संभालने में लचीलापन मिलता है।
Asynchronous Programming: उत्तरदायी और कुशल वेब एप्लिकेशन के लिए आवश्यक है।

जैसे-जैसे आप वेब विकास में अपना यात्रा जारी रखते हैं, याद रखें कि HTTP अनुरोधों को प्रभावी ढंग से संभालना डायनेमिक और इंटरैक्टिव एप्लिकेशन बनाने का एक आधारशिला है। JavaScript की asynchronous प्रकृति को अपनाएं, Promises और async/await जैसे आधुनिक उपकरणों का लाभ उठाएं, और अपने कौशल को बढ़ाने के लिए विभिन्न APIs के साथ प्रयोग करना जारी रखें।
SEO अनुकूलित कीवर्ड
HTTP requests, JavaScript HTTP calls, XMLHttpRequest tutorial, Fetch API vs. XMLHttpRequest, asynchronous programming in JavaScript, JSON Placeholder guide, making HTTP GET requests, handling async operations, JavaScript web development, HTTP status codes, readyState in XMLHttpRequest, JavaScript promises, async await in JavaScript

परिशिष्ट
नमूना कोड: XMLHttpRequest के साथ HTTP GET अनुरोध करना




		
		
			
			
Java
			
			
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTTP Requests with XMLHttpRequest</title>
</head>
<body>
  <h1>Fetch Posts</h1>
  <button id="fetchBtn">Fetch Posts</button>
  <pre id="output">
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
				
						 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTTP Requests with XMLHttpRequest</title>
</head>
<body>
  <h1>Fetch Posts</h1>
  <button id="fetchBtn">Fetch Posts</button>
  <pre id="output">

विषय	विवरण	मुख्य बिंदु
HTTP Calls	HTTP अनुरोधों के मूल बातें	Methods, status codes
JSON Placeholder	HTTP अनुरोधों का परीक्षण करने के लिए एक मुक्त सेवा	Setup, usage
Fetch API vs. XMLHttpRequest	आधुनिक और पारंपरिक HTTP विधियों की तुलना	Syntax, capabilities
Asynchronous Programming in JS	Async ऑपरेशनों को संभालना	Promises, async/await, callbacks

विशेषता	Fetch API	XMLHttpRequest
Syntax Style	Promise-based	Callback-based
Ease of Use	Simple and concise	More verbose and complex
Streaming Data	Supports streaming	Limited streaming capabilities
Browser Support	Modern browsers	Broad browser support, including older ones
Handling Responses	Requires parsing to JSON explicitly	Can handle various response types easily

readyState	Description
0	UNSENT - Client has been created.
1	OPENED - open() has been called.
2	HEADERS_RECEIVED - send() has been called.
3	LOADING - Downloading response.
4	DONE - The operation is complete.

Status Code	Meaning
200	OK - The request was successful.
404	Not Found - The requested resource could not be found.
500	Internal Server Error - A generic error on the server.

व्याख्या:

एक बटन HTTP GET अनुरोध शुरू करता है।
प्रतिक्रिया पठनीयता के लिए <pre> टैग में प्रदर्शित की जाती है।
कंसोल asynchronous ऑपरेशन को इंगित करने के लिए एक waiting संदेश log करता है।

आउटपुट:

“Fetch Posts” बटन पर क्लिक करने पर, ब्राउज़र कंसोल “Waiting for response…” लॉग करता है, और प्राप्त पोस्ट <pre> तत्व में एक स्वरूपित JSON संरचना में प्रदर्शित होती हैं।

इस मार्गदर्शिका का पालन करके और प्रदान किए गए कोड नमूनों के साथ प्रयोग करके, आप JavaScript में HTTP अनुरोधों की ठोस समझ प्राप्त करेंगे, जिससे आप अधिक डायनेमिक और इंटरैक्टिव वेब एप्लिकेशन बना सकेंगे।

ध्यान दें: यह लेख AI द्वारा उत्पन्न किया गया है।