Advertisement
  1. Web Design
  2. Ajax
Webdesign

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

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called AJAX for Front-End Designers.
An Example of AJAX With Vanilla JavaScript
How to Use jQuery’s “ajax” Function

Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)

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

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

load method का प्रयोग

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

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

Parameter विवरण (Description) आवश्यक (Required)
url एक स्ट्रिंग जिसमे एक यूआरएल (URL) होता है जहाँ request भेजी जाती है. हाँ (Yes)
डाटा (data) डाटा (स्ट्रिंग या सादे ऑब्जेक्ट (plain object) के रूप में) जो सर्वर में request के साथ भेजा जाता है. नहीं (No)
पूर्ण (complete) एक कालबैक फंक्शन जो की एक्सेक्युट होता है जब request पूर्ण होती है चाहे सफलतापूर्वक या असफलतापूर्वक. नहीं (No)

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

पैरामीटर (Parameter) विवरण (Description)
responseText Request से प्राप्त किया गया डाटा.
textStatus एक स्ट्रिंग जो request के स्टेटस को वर्गीकृत (categorize) करती है.
jqXHR jQuery का XMLHttpRequest (jqXHR) ऑब्जेक्ट, जो की ब्राउज़र के नेटिव XMLHttpRequest (XHR) ऑब्जेक्ट का सुपरसेट है.

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

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

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

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

Example

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

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

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

success_jQuery

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

Javascript_jQuery_Objects

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

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

error_jQuery

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

error_locale_jQuery

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

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

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

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

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

success_jQuery_trim

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

निष्कर्ष

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.