JQuery ट्यूटोरियल (भाग 5): AJAX उनका!

विज्ञापन

जैसा कि हम अपने jQuery मिनी-ट्यूटोरियल श्रृंखला के अंत के पास हैं, समय के बारे में हमने jQuery की सबसे अधिक उपयोग की जाने वाली सुविधाओं में एक और अधिक गहराई से देखा। AJAX पूरे पृष्ठ को पुनः लोड करने की आवश्यकता के बिना एक वेबसाइट को पृष्ठभूमि में एक सर्वर के साथ संवाद करने की अनुमति देता है। फ़ेसबुक-शैली की अनंत स्थिति से लेकर फॉर्म डेटा जमा करने तक, एक लाख अलग-अलग वास्तविक जीवन स्थितियाँ हैं जिनमें यह तकनीक उपयोगी हो सकती है।

यदि आपने पिछले ट्यूटोरियल्स को नहीं पढ़ा है, तो मेरा सुझाव है कि आप इससे निपटने से पहले ऐसा करें क्योंकि वे एक दूसरे पर निर्माण करते हैं।

• परिचय: jQuery क्या है और आपको क्यों ध्यान रखना चाहिए? वेब इंटरएक्टिव बनाना: एक परिचय jQuery के लिएjQuery एक क्लाइंट-साइड स्क्रिप्टिंग लाइब्रेरी है जो लगभग हर आधुनिक वेबसाइट का उपयोग करती है - यह वेबसाइटों को इंटरैक्टिव बनाती है। यह केवल जावास्क्रिप्ट पुस्तकालय नहीं है, लेकिन यह सबसे अधिक विकसित, सबसे समर्थित है, और सबसे व्यापक रूप से उपयोग किया जाता है ... अधिक पढ़ें
• 1: चयनकर्ता और मूल बातें jQuery ट्यूटोरियल - आरंभ करना: मूल बातें और चयनकर्ता
  instagram viewer
  पिछले हफ्ते, मैंने इस बारे में बात की कि किसी भी आधुनिक वेब डेवलपर के लिए jQuery कितना महत्वपूर्ण है और यह बहुत बढ़िया क्यों है। इस हफ्ते, मुझे लगता है कि यह समय है जब हमने अपने हाथों को कुछ कोड के साथ गंदा कर दिया और सीखा कि कैसे ... अधिक पढ़ें
• 2: तरीके परिचय करने के लिए jQuery (भाग 2): तरीके और कार्ययह jQuery वेब प्रोग्रामिंग श्रृंखला के लिए ऑन-गोइंग शुरुआती परिचय का हिस्सा है। भाग 1 ने jQuery की मूल बातों को अपने प्रोजेक्ट और चयनकर्ताओं में शामिल करने के तरीके को कवर किया। भाग 2 में, हम जारी रखेंगे ... अधिक पढ़ें
• 3: पेज लोड और बेनामी कार्यों की प्रतीक्षा कर रहा है परिचय jQuery (भाग 3): लोड और बेनामी कार्यों के लिए पृष्ठ की प्रतीक्षा कर रहा हैjQuery यकीनन आधुनिक वेब डेवलपर के लिए एक आवश्यक कौशल है, और इस लघु लघु-श्रृंखला में मैं आपको अपने स्वयं के वेब परियोजनाओं में इसका उपयोग शुरू करने के लिए ज्ञान देने की उम्मीद करता हूं। में ... अधिक पढ़ें
• 4: घटनाक्रम jQuery ट्यूटोरियल (भाग 4) - घटना श्रोताआज हम इसे एक पायदान पर लात मारने जा रहे हैं और वास्तव में दिखाते हैं कि jQuery कहाँ चमकता है - घटनाएँ। यदि आपने पिछले ट्यूटोरियल का अनुसरण किया है, तो आपको अब मूल कोड की अच्छी समझ होनी चाहिए ... अधिक पढ़ें
• Chrome डेवलपर टूल के साथ डिबगिंग क्रोम डेवलपर टूल्स या फायरबग के साथ वेबसाइट की समस्याओं का चित्रयदि आप अब तक मेरे jQuery ट्यूटोरियल का अनुसरण कर रहे हैं, तो आप पहले से ही कुछ कोड समस्याओं में चल सकते हैं और उन्हें ठीक करने का तरीका नहीं जानते हैं। जब एक गैर-कार्यात्मक कोड का सामना करना पड़ता है, तो यह बहुत ... अधिक पढ़ें

एक क्या?

AJAX एक के लिए है एसिंक्रोनस जावास्क्रिप्ट और एक्सएमएल, लेकिन यहाँ खोजशब्द है अतुल्यकालिक. अतुल्यकालिक उस तथ्य को संदर्भित करता है जो ये अनुरोध पृष्ठभूमि में होते हैं, उपयोगकर्ता के ब्राउज़िंग अनुभव को बाधित नहीं करते हैं। आपने शायद पहले कभी इस पर ध्यान नहीं दिया था, लेकिन अगर कोई वेबसाइट खुद को गतिशील रूप से अपडेट कर रही है, तो ऐसा करने का AJAX का उपयोग करने का एक अच्छा मौका है।

AJAX से पहले, किसी सर्वर के साथ बातचीत का कोई भी रूप हो, चाहे वह नया डेटा प्राप्त कर रहा हो या उपयोगकर्ता से जानकारी वापस पोस्ट कर रहा हो, नए पेज लोड और पुनर्निर्देशन का उपयोग करके किया गया होगा।

आज हम एक तीसरी पार्टी सेवा फ़्लिकर का उपयोग करने जा रहे हैं - जिनसे हम AJAX का उपयोग करके JSON डेटाटाइप का उपयोग करके कुछ चित्र प्राप्त कर सकते हैं। यह वास्तव में मायने नहीं रखता है कि फ़्लिकर चीजों के प्राप्त पक्ष को कैसे लागू करता है, क्योंकि यह की सुंदरता है एपीआई - हम सभी को यह जानने की जरूरत है कि एक एपीआई यूआरएल है, हम किस तरह का डेटा वापस पाने जा रहे हैं और इसे कैसे जोड़ सकते हैं।

आगे पढ़ने के लिए, मैंने कुछ समय पहले एक और ट्यूटोरियल लिखा एक संपर्क फ़ॉर्म प्रस्तुत करने के लिए वर्डप्रेस में AJAX को संभालना WordPress में AJAX का उपयोग करने पर एक ट्यूटोरियलAJAX एक उल्लेखनीय वेब तकनीक है जो हमें सरल "लिंक पर क्लिक करें, दूसरे पृष्ठ पर जाएं" से परे ले गई है इंटरनेट की संरचना 1.0। यह वेबसाइटों को गतिशील रूप से लाने और बिना सामग्री प्रदर्शित करने में सक्षम बनाता है उपयोगकर्ता ... अधिक पढ़ें , तो हो सकता है कि आप यह भी देखना चाहें; इसमें आपका अपना PHP हैंडलर लिखना, और इसे "आधिकारिक" वर्डप्रेस AJAX प्रक्रिया में एकीकृत करना शामिल है।

AJAX विधि

यहां AJAX अनुरोध का मूल प्रारूप है:

$ .ajax ({प्रकार: "GET या POST", url: "API या आपका PHP हैंडलर URL", डेटाटाइप: "JSON", // इस आधार पर कि आप किस तरह का डेटा चाहते हैं, लेकिन JSON सबसे अधिक है सामान्य डेटा: {// कुंजी का एक सेट: "मूल्य" जोड़े}, सफलता: फ़ंक्शन (डेटा) {// डेटा की एक सफल वापसी को संभालना}, त्रुटि: फ़ंक्शन (संदेश) {// त्रुटि को संभालना } });

यह पहली बार में काफी जटिल लग रहा है - इस कोड प्लगइन से खरोज की कमी से मदद नहीं मिली है - लेकिन आप देखेंगे कि वास्तविक दुनिया के उदाहरण के लिए यह कितना आसान है।

फ़्लिकर एपीआई AJAX

इस उदाहरण में, हम वर्तमान वर्डप्रेस पोस्ट से जुड़े टैग को हथियाने जा रहे हैं, और लेख के अंत में संलग्न करने के लिए कुछ छवियां प्राप्त करेंगे। वहां एक jQuery प्रलेखन में इसी तरह का उदाहरण, लेकिन यह शॉर्ट कट विधि का उपयोग करता है जिसे कहा जाता है getJSON () एक पूर्ण AJAX प्रारूप की व्याख्या करने के बजाय। हालांकि यह उन चीजों को करने का एक वैध तरीका है यदि आप जानते हैं कि आप केवल JSON डेटा वापस लेने जा रहे हैं, तो मुझे लगता है कि वास्तविक AJAX विधि सीखना अधिक महत्वपूर्ण है, ताकि हम इसे कैसे करें।

पहला, एक ऊपर single.php और हम वर्तमान पोस्ट टैग की एक साधारण अल्पविराम से अलग सूची निकालने की कोशिश करेंगे। आमतौर पर, आप उपयोग करेंगे the_tags () ऐसा करने के लिए, लेकिन यह अच्छा नहीं है क्योंकि हम अंततः इन्हें एक चर के रूप में संग्रहीत करना चाहते हैं, जबकि the_tags () गूँज उन्हें सीधे पूर्व स्वरूपित करते हैं। इसके बजाय, हम उपयोग करेंगे get_the_tags ():

php। $ टैगलिस्ट = get_the_tags (); foreach ($ टैग के रूप में $ टैगलिस्ट) { इको $ टैग-> नाम। ","; }

यह अच्छी तरह से काम करता है, इसलिए हम इसे AJAX अनुरोध में फ़्लिकर एपीआई URL के लिए निम्नानुसार आउटपुट करेंगे (नोट, यह एक स्क्रीनशॉट है - ताकि इंडेंटेशन को संरक्षित करने के लिए, कोड उपलब्ध हो यह पेस्टबिन).

इस बिंदु पर, यह सब ब्राउज़र कंसोल के आउटपुट के लिए करता है, या एक त्रुटि संदेश को अलर्ट करता है यदि कोई है। लौटे डेटा के साथ वास्तव में कुछ करने के लिए, छवियों के लिए कहीं और जोड़ें:

और संपादित करें सफलता AJAX के पैरामीटर से अधिक पुनरावृति करने के लिए कॉल करें आइटम वे लौटे हैं।

$ .each (data.items, function (i, item) {if (i == 3) गलत; // बंद करो जब हमारे पास $ 3 ("# फ़्लिकर") हो।"); });

एंड देयर वी हैव इट। हम कर रहे हैं appending लौटी JSON ऑब्जेक्ट से 3 आइटम (डेटा शून्य अनुक्रमित है, इसलिए यदि आइटम 3 पर जाएं, तो हम वास्तव में चौथे आइटम पर हैं। भ्रामक, मुझे पता है। उस बिंदु पर, हम उपयोग करते हैं विवरण झूठा है से बाहर निकलने के लिए से प्रत्येक() itter)। मैं पहले से ही लौट आए ऑब्जेक्ट्स की सामग्री की जांच कर चुका हूं, इसलिए मुझे डेटा संरचना पता है और मैं केवल एक लिंक और IMG संदर्भ निकाल रहा हूं। यदि आपको यह जानने में दिलचस्पी है कि और क्या लौटाया गया है, तो बस फेंक दें कंसोल.लॉग (आइटम) वहाँ पर।

मेरे परीक्षण स्थल पर परिणाम और इस PasteBin पर पूरा कोड. ध्यान दें कि परिणाम लौटे मूल रूप से रद्दी हैं - मेरी पोस्ट में टैग शामिल है DIY के लिए वॉक-इन चिकन रन, और फ्लिकर ने मुझे DIY बुनाई दी है। अच्छा लगा। निश्चित रूप से, यह उन बाधाओं में से एक है जिसका आप एपीआई के साथ काम करते समय और स्वचालित रूप से काम कर रहे हैं; आप अपनी पोस्ट (काफी उपक्रम) को फिर से टैग कर सकते हैं, "किसी भी" के बजाय "सभी" टैग के लिए पूछने का अनुरोध बदल सकते हैं (लौटने की संभावना इस मामले में कुछ भी नहीं), या एक नए कस्टम क्षेत्र के साथ आएं, जिसमें आप एपीआई के साथ उपयोग करने के लिए एक लक्षित कीवर्ड निर्दिष्ट करेंगे (शायद सबसे आसान)।

एसईओ विचार

यह एक प्रमुख बिंदु नहीं है, लेकिन चूंकि आप विकासशील वेबसाइटों के व्यवसाय में हैं उल्लेख किया है: खोज इंजन पृष्ठ लोड, जैसे कुछ भी नहीं किया है में सूचकांक सामग्री नहीं है AJAX के माध्यम से। आपके द्वारा पूरी तरह से सबसे खराब बात यह होगी कि आप अपने ब्लॉग को पूरी तरह से AJAXify कर लें, ताकि होमपेज केवल उन सभी सामग्री के लिए एक iframe जैसा कंटेनर हो जो गतिशील रूप से भरी हुई है। AJAX का उपयोग बुद्धिमानी से, करने के लिए करें बढ़ाने पृष्ठ सामग्री, एक के रूप में नहीं प्रतिस्थापन. या भयानक परिणाम का सामना करना।

पढ़ने के लिए धन्यवाद, और मुझे आशा है कि मैंने आपको कुछ विचार दिए हैं। बेशक, फ़्लिकर वहाँ से केवल एपीआई नहीं है - बस Google "सार्वजनिक एपीआई"और आप उन और चीजों को ढूंढना सुनिश्चित करेंगे, जिनके साथ आप खेल सकते हैं।

अगले सप्ताह jQuery ट्यूटोरियल श्रृंखला में अंतिम पाठ होगा क्योंकि हम jQuery UI प्लगइन की जांच करते हैं। हमेशा की तरह, टिप्पणियों और सुझावों का स्वागत है; यदि आपके पास कोई प्रश्न है, जिससे अन्य लोग लाभान्वित होंगे, तो इसे हमारे उत्तर साइट पर पोस्ट करने पर विचार करें।