AJAX में fetch के साथ काम करने की मूल बातें

आइए अब देखते हैं कि AJAX का उपयोग करके पेज के एक हिस्से को कैसे लोड किया जाए। मान लीजिए कि हमारे पेज index.html पर एक div और एक बटन स्थित है (यहाँ body की सामग्री दिखाई गई है):

<div></div>
<button>click me</button>

मान लीजिए कि हमारे पास एक पेज ajax.html भी है, जिस पर तीन पैराग्राफ स्थित हैं (बिना पेज टैग के, बस पैराग्राफ):

<p>1</p>
<p>2</p>
<p>3</p>

आइए ऐसा करें कि index.html पेज पर बटन पर क्लिक करने पर div में ajax.html पेज की सामग्री लोड हो जाए।

इसके लिए सबसे पहले हमारे एलिमेंट्स के लिंक वेरिएबल में प्राप्त करें:

let div    = document.querySelector('div');
let button = document.querySelector('button');

आइए बटन पर क्लिक हैंडलर लगाएं:

button.addEventListener('click', function() {
	// यहाँ हम AJAX रिक्वेस्ट करेंगे
});

आइए अब AJAX रिक्वेस्ट करें। इसके लिए fetch फंक्शन का उपयोग किया जाता है, जो पैरामीटर के रूप में उस पेज का एड्रेस प्राप्त करता है, जिसकी सामग्री हम प्राप्त करना चाहते हैं। आइए हमारे सर्वर पर ajax.html पेज का एड्रेस निर्दिष्ट करें:

button.addEventListener('click', function() {
	let result = fetch('/ajax.html'); 
});

fetch अपने परिणाम के रूप में एक प्रोमिस वापस करेगा। बात यह है कि AJAX के माध्यम से पेज का अनुरोध - यह एक अतुल्यकालिक ऑपरेशन है, क्योंकि इसमें कुछ समय लगेगा, जिसके बाद पेज हमें जवाब देगा।

आइए प्रोमिस का परिणाम प्राप्त करें:

button.addEventListener('click', function() {
	let promise = fetch('/ajax.html'); 
	
	promise.then(function(response) {
		// सर्वर का उत्तर response वेरिएबल में है
	});
});

अनावश्यक वेरिएबल को हटाकर इसे सरल बनाएं:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(function(response) {
		
	});
});

एरो फंक्शन का उपयोग करके इसे सरल बनाएं:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(response => {
		
	});
});

इसे अधिक पठनीय रूप में प्रस्तुत करें:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			
		}
	);
});

response वेरिएबल में काफी जटिल ऑब्जेक्ट क्लास Response है:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(response => {
		console.log(response); // Response क्लास का ऑब्जेक्ट
	});
});

इस ऑब्जेक्ट का गहन अध्ययन हम अगले पाठों में करेंगे, और अभी हमें सबसे सरल चीज चाहिए - अनुरोध किए गए पेज का टेक्स्ट प्राप्त करना। इसके लिए इस ऑब्जेक्ट में text मेथड मौजूद है। हालाँकि, यह मेथड पेज का टेक्स्ट नहीं लौटाता, बल्कि इसके टेक्स्ट के साथ एक प्रोमिस लौटाता है:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			console.log(response.text()); // Promise आउटपुट करेगा
		}
	);
});

पेज के टेक्स्ट तक पहुँचने के लिए, आवश्यक है कि response.text से प्राप्त प्रोमिस को एक बार और प्रोसेस किया जाए:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			return response.text();
		}
	).then(
		text => {
			console.log(text); // पेज का टेक्स्ट
		}
	);
});

तो, आखिरकार हमने अनुरोध किए गए पेज का टेक्स्ट प्राप्त कर लिया है और उदाहरण के लिए, इसे अपने div में लिख सकते हैं:

button.addEventListener('click', function() {
	fetch('/ajax.html').then(
		response => {
			return response.text();
		}
	).then(
		text => {
			div.innerHTML = text;
		}
	);
});

तीन बटन और एक div दिए गए हैं। सर्वर पर तीन पेज दिए गए हैं। ऐसा करें कि प्रत्येक बटन div में संबंधित पेज लोड करे।

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