AJAX क्या है और इसे कैसे इस्तेमाल करें?

Spread the love

जब हम धीरे धीरे HTML, CSS और JS के बारे में सीख लेते है तो हमारे सामने एक और नाम आता है AJAX का. अब यह AJAX क्या है? AJAX को क्यों इस्तेमाल करना चाहिए और इसको अपने प्रोजेक्ट में कैसे इस्तेमाल करें जैसे सवाल भी हमारे मन में आने लगते है. और इसके साथ साथ हम आपको कुछ example के द्वारा बताएँगे की आप कैसे इसे अपने प्रोजेक्ट में इस्तेमाल कर सकते है. तो अब हम बात करते है की AJAX क्या है और इसे कैसे इस्तेमाल करें?

Read This-> Python क्या है और इसे कैसे सीखें?

AJAX क्या है और इसे कैसे इस्तेमाल करें?

AJAX क्या है और इसे कैसे इस्तेमाल करें?

AJAX क्या है?

अगर इसके Full Form यानी के पूर्ण रूप की बात करें तो यह Asynchronous JavaScript and XML है. यह एक ऐसी तकनीक है जिससे वेब एप्लीकेशन को XML, HTML, CSS, और Java Script की मदद अच्छी, तेज और इंटरैक्टिव बना सकते है. इसमें XHTML का इस्तेमाल कंटेंट, CSS का इस्तेमाल प्रेजेंटेशन, DOM और JS का इस्तेमाल dynamic और event base पर कंटेंट डिस्प्ले करवाने के लिए किया जाता है.

Read This -> PHP क्या है और इसे कैसे सीखें?

AJAX कब बनाया गया?

1990 में वेब पेज जब सिर्फ HTML पर आधारित थे तो उस दौरान यूजर एक्स्पेरिंस को सुधारने और bandwidth को कण्ट्रोल करने के काफी प्रयास किया जाने लगे जिससे की webpage की परफॉरमेंस को बढाया जा सके. इसके बाद में लगभग 1996 में iframe को एक object element की तरह लाया गया जिससे कोई भी कंटेंट asynchronously fetch किया जा सकता था. इसके बाद लगभग 1998 में Microsoft Outlook Web Access team के द्वारा XMLHttpRequest scripting object तैयार किया गया जिसकी मदद से XML डाटा को asynchronously fetch किया जाने लगा और सन 1999 में इसे Internet Explorer 5.0 में इस्तेमाल करना शुरू कर दिया गया और इसके बाद धीरे धीरे सभी तरह के ब्राउज़र में इसको use किया जाने लगा.

AJAX नाम का इस्तेमाल सबसे पहले 18 February 2005 में Jesse James Garrett ने अपने एक आर्टिकल Ajax: A New Approach to Web Applications में किया. इसके बाद 2006 में इसे World Wide Web Consortium (W3C) के द्वारा ऑफिसियल रिलीज़ कर दिया गया.

Check Out -> महापुरुषों की जीवन गाथा

AJAX का इस्तेमाल क्यों करना चाहिए? – AJAX के फायदे

  • इसका इस्तेमाल करके आप अपने वेब एप्लीकेशन को fast और user friendly बना सकते है.
  • इसकी मदद से आप dynamic content अपने वेब एप्लीकेशन पर डिस्प्ले करवा सकते है.
  • बिना ब्राउज़र reload के आप डाटा को database में CREATE, READ, UPDATE, DELETE कर सकते है.
  • इसकी मदद से आप लाइव सर्च बॉक्स बना सकते है.
  • किसी फॉर्म में dynamic drop down मेनू बनाने के लिए आप इसका इस्तेमाल कर सकते है.

AJAX का कैसे इस्तेमाल करें?

इसका इस्तेमाल करना बहुत ही आसान है, इसके लिए आपको कोई पैकेज या CDN इस्तेमाल करने की जरूरत नहीं है आप इसको बिना की पैकेज के सहायता के बना सकते है. इसका कोड JS में लिखा जाता है तो आपको <script> एलिमेंट एक अन्दर ही इसको बनाना होगा. अगर आप jquery के अच्छे जानकार है तो आप इसको jquery में भी बना सकते है. हम आपको यहाँ plain JS में इसका एक sample कोड दे रहे है जिसको आप आसानी से समझ पायेंगे.

JS File

// यह स्क्रिप्ट क्लाइंट साइड यानी आपके HTML पेज में रहेगी.

// सबसे पहले हम HTTP request को Initialize करेंगे.
var xhr = new XMLHttpRequest();
xhr.open('GET', 'send-ajax-data.php'); // यह एक PHP फाइल है जहाँ पर हमारा डाटा होगा. 

// यहाँ पर हम request के state में होने वाले changes को track करेंगे.
xhr.onreadystatechange = function () {
	var DONE = 4; // इसके मतलब है की आपके request complete हो गयी है.
	var OK = 200; // यह HTTP Success कोड है जो आपके response को बताता है.
	if (xhr.readyState === DONE) {
		if (xhr.status === OK) {
			console.log(xhr.responseText); // यहाँ पर आने वाली आउटपुट को हम console में चेक करेंगे.
		} else {
			console.log('Error: ' + xhr.status); // यहाँ पर request के दौरान आने वाले एरर को हम कंसोल में चेक करेंगे.
		}
	}
};

// यहाँ send-ajax-data.php पर request send करेंगे. 
xhr.send(null);

PHP File

<?php
//यहाँ पर जो भी हम इको या प्रिंट या फिर return करेंगे वो हमारे ajax में response की तरह इस्तेमाल होगा
echo "This is the output by hindialerts.com.";
?>

AJAX Example With jQuery

Final Word

तो इस प्रकार आप अपने वेबसाइट को फ़ास्ट बनाने और यूजर फ्रेंडली बनाने के लिए AJAX का इस्तेमाल कर सकते है. यहाँ पर हमने आपको बताया की . अगर आपको इसके बारे में कुछ और जानना है या फिर आप किसी अन्य टॉपिक पर हमारा आर्टिकल चाहते है तो आप कमेंट करके जरुर बतायें.

Be the first to comment

Leave a Reply

Your email address will not be published.


*