jQuery के साथ AJAX की शुरुआती गाइड

इस सीरीज के पहले आर्टिकल में, हम AJAX का फंडामेंटल (fundamental) कवर (cover) करेंगे दूसरे में, हम vanilla JavaScript का प्रयोग करके एक चलित (working) उदाहरण देखेंगे.

इस टुटोरिअल में, हम jQuery के कुछ AJAX से सम्बंधित functions और methods के माध्यम से चलेंगे. विशेष रूप से, हम शार्ट-हैण्ड load method और generic ajax फंक्शन को करीब से देखेंगे.

load method का प्रयोग

jQuery का load method सरल है, फिर भी रिमोट डाटा को लाने के लिए बहुत शक्तिशाली है. नीचे आप इसका syntax देख सकते हैं:

  	$(selector).load(url[, data][, complete])

नीचे दिया गया टेबल इसके मुमकिन पैरामीटर दिखता है:

यह कालबैक फंक्शन के पैरामीटर्स हैं:

अगली लिस्ट textStatus पैरामीटर की संभव वैल्यूज को संक्षेप में प्रस्तुत करती है:

  - success
  - notmodified
  - nocontent
  - error
  - timeout
  - abort
  - parsererror

load मेथड कैसे कार्य करता है इसको बेहतर तरीके से समझने के लिए, आईये पिछले टुटोरिअल में चर्चा किए उदाहरण को फिर से देखते हैं.

एक बार फिर से, सरल HTML की संरचना को देखें:

      <div>
        <img src="Einstein.jpg" alt="Einstein">
        <button id="request">Learn more about Einstein</button>
        <div id="bio"></div>
      </div>

यह कुछ ऐसा दिखेगा:

याद रखें की हम बटन पर click करते ही #bio एलिमेंट के कंटेंट को रिस्पांस डाटा के साथ अपडेट करना चाहते है 

यह jQuery के आवश्यक कोड है:

      var $btn = $('#request');
      var $bio = $('#bio');

      $btn.on('click', function() {
      	$(this).hide();
      	$bio.load('Bio.txt', completeFunction);
      });
    
      function completeFunction(responseText, textStatus, request) {
      	$bio.css('border', '1px solid #e8e8e8');
      	if(textStatus == 'error') {
      		$bio.text('An error occurred during your request: ' +  request.status + ' ' + request.statusText);
      	} 
      } 

मान लेते हैं की request सफल हो गयी है (अर्थात जब textStatus success या notmodified हो), तो अंतिम परिणाम कुछ इस तरह दिखेगा:

साथ ही, नीच दिए गए visualization पर विचार करें जो की सफल request को वर्णित करता है.

Visualization का बांया हिस्सा XHR ऑब्जेक्ट को दिखता है जैसे की ब्राउज़र के console में प्रिंट किया जाता है जब हम शुद्ध JavaScript का प्रयोग request बनाने के लिए (पिछले टुटोरिअल देखें) करते हैं. दूसरी तरफ, दांयां हिस्सा सम्बंधित jqXHR ऑब्जेक्ट दिखता है जैसे की load मेथड प्रिंट करने पर होता है.

असफल request की स्थिति में, कम से कम सम्बंधित सन्देश दिखाया जायेगा. इसे करने के लिए, हम textStatus पैरामीटर की वैल्यू पर नज़र रखते हैं और error मैसेज दिखाते हैं.

ध्यान दें: यदि आप लोकल एनवायरनमेंट पर उदाहरण को चलते हैं (और इसमें Bio.txt को स्टोर करते हैं), तो error मैसेज संभवत अलग होगा. उदाहरण के लिए, आप नीचे दिए गए परिणाम को देख सकते हैं:

अंत में, यह उल्लेख करना महत्वपुर्ण होगा की, डिफ़ॉल्ट रूप से, load method HTTP के GET method का प्रयोग करता है, जब तक की हम डाटा को ऑब्जेक्ट के रूप में सर्वर में न भेजें. सिर्फ तभी, POST method का आह्वान (invoke) किया जाता है.

Codepen के उचित demo को नीचे देखें:

आईये अब, हम फाइल के फॉर्मेट को मॉडिफाई (modify) करें जिसे हमने सर्वर से request किया है. ख़ासतौर पर, इस उदाहरण में, वांछित (desired) डाटा Bio.txt फाइल की बजाये Bio.html में शामिल है. साथ ही यह ध्यान देने योग्य है: टारगेट (target) फाइल में दो पैराग्राफ हैं.

मान लो हम सिर्फ पहले पैराग्राफ को ही load करना चाहते हैं, तो हमें शुरुआती कोड (codes) में निम्नलिखित परिवर्तन करने पड़ेंगे:

      $btn.on('click', function() {
          // this line only changes
          $bio.load('Bio.html p:first-child', completeFunction);
      });

यह कुछ इस तरह का दिखेगा:

और यह है Codepen का डेमो:

निष्कर्ष

इस टुटोरिअल में, मैंने दिखाया की आप jQuery के साथ AJAX का प्रयोग कैसे कर सकते हैं. चीजो को और दिलचस्प बनाने के लिए, हमने कुछ व्यावहारिक उदाहरणों पर भी कार्य किया. इस श्रृंखला के टुटोरिअल के अंतिम भाग को हम और अधिक कठिन उदाहरण से समाप्त करेंगे.