इतिहास एपीआई (और इसके बिना) के समर्थन के साथ एक-पेज का अजाक्स एप्लिकेशन बनाना

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

मेरी प्रेरणा: परियोजना में एक एमपी 3 प्लेयर को लागू करना आवश्यक था जो साइट पर नेविगेशन की परवाह किए बिना खेलता है। अगला, मुझे पुशस्टेट के बिना ब्राउज़र समर्थन जोड़ने की आवश्यकता थी - और मैंने पुस्तकालय को कांटा।

मुख्य विशेषताएं

• साइट नेविगेशन और एक पूर्ण पृष्ठ पुनः लोड किए बिना प्रोसेसिंग फॉर्म
• प्रत्यक्ष उपयोग के लिए उपलब्ध स्वच्छ यूआरएल
• # /! विरासत ब्राउज़र के लिए हैश समर्थन (मेरे संस्करण में जोड़ा गया)
• आधुनिक ब्राउज़रों के लिए बैक और फॉरवर्ड बटन के साथ काम करना
• और अब पुराने लोगों के लिए - benalman.com/projects/jquery-hashchange-plugin को धन्यवाद
• ऐसा लगता है कि IE7 ( Nc_Soft के लिए धन्यवाद) के साथ समस्याएं हैं (विशेष रूप से, Nc_Soft की भागीदारी के लिए बहुत धन्यवाद) और, संभवतः, ओपेरा 11.5 (मैं अभी तक पुष्टि नहीं कर सकता, लेकिन मुझे यह बहुत आश्चर्यजनक लगता है क्योंकि dev.opera.com/articles/view/introducing -the-html5-history-api ) - संदेश आर्टिशोक - विधानसभा 1074 पर जाँच और काम करता है ( not_ice )
• imsamurai ( https://github.com/imsamurai ) ने लाइब्रेरी में सुधार का प्रस्ताव दिया (और मैंने ख़ुशी से बदलावों को मिला दिया): फॉर्म जमा करने के लिए एक अंतर्निहित फ़ंक्शन, हैश के साथ काम में सुधार और एक अधिक विकसित ट्रिगर सिस्टम। (imsamurai, दुर्भाग्यवश, Habré पर एक खाता नहीं है - हम मदद करने में प्रसन्न होंगे)

संदर्भ

• jQuery के Pjax github.com/defunkt/jquery-pjax
• हैश नेविगेशन समर्थन github.com/ckald/jquery-pjax के साथ मेरा कांटा
• मेरी परियोजना के उदाहरण पर पुस्तकालय का काम am एम्स्टर्डिक.कॉम। com
• pjax.heroku.com के निर्माता से उदाहरण

Pjax कैसे काम करता है

आधार - नियमित आउटपुट और विशिष्ट हेडर के साथ प्रश्नों का अलग-अलग आउटपुट और कैशिंग। यही है, पेज टेम्प्लेट प्रदर्शित करने से पहले नियंत्रक में, एक्स-पीजेएएक्स हेडर की उपस्थिति के लिए जांच करना आवश्यक है, उदाहरण के लिए, इस तरह:

पीएचपी:

if (!isset($_SERVER['HTTP_X_PJAX']) { // here is regular-kind load } else { // here you don't print page layout — just the page } 

इसके अलावा, एक घटना को उन लिंक्स पर निलंबित कर दिया जाता है जो नेविगेशन नियंत्रण को जावास्क्रिप्ट में स्थानांतरित करता है (यह सबसे इंद्रधनुषी रंग का और विनीत कार्यान्वयन है - लेकिन मुझे दूसरों में ज्यादा समझ नहीं है)। मेरे मामले में, ऐसा कुछ है:

 $('#pjaxcontainer a:not(.logout-link,.login-link,.login_link,[id*="login_link"],[href*="#"],[target="_blank"],' +'[href$="mp3"],[href$="jpg"],[href$="jpeg"],[href$="gif"],[href$="png"],[href$="doc"],[href$="pdf"])') .pjax('#pjaxcontainer', { timeout: 0 }); 

प्रसंस्करण रूपों के लिए, हम उपयोग करते हैं:

 $('#pjaxcontainer form').live('submit',function(a){ // display loading message $('#loading-shade').show(); if( !$(a.target).attr('action')) a.target = $(a.target).closest('form'); data = $(a.target).serialize(); cont = $('#pjaxcontainer'); $.ajax({ type: "POST", url: $(a.target).attr('action'), data: data, beforeSend : function(xhr) { return xhr.setRequestHeader('X-PJAX','true'); // IMPORTANT }, success: function(msg){ cont.html(msg); $('#loading-shade').hide(); }, error: function(a,b,c) { $('#loading-shade').hide(); } }); a.preventDefault(); return false; }); 

लेकिन आप निश्चित रूप से, लिंक प्राप्त करने के लिए एक विशिष्ट वर्ग या डेटा-पीजेएक्स विशेषता का उपयोग कर सकते हैं।

दो उपयोगी घटनाएँ भी हैं:

  $('body').bind('start.pjax',function() { setTimeout("$('#loading-shade').hide();",2000); // to be sure that loading message hides $('#loading-shade').show(); }); $('body').bind('end.pjax',function() { $('#loading-shade').hide(); }); 

आप Pjax के बारे में और जानकारी README.md पर github पर प्राप्त करेंगे।

हैश नेविगेशन को समाप्त करना

लाइब्रेरी के निर्माता को कई बार हैश समर्थन जोड़ने के लिए कहा गया था, लेकिन उसकी स्थिति मौलिक थी ( github.com/defunkt/jquery-pjax/issues/3#issuecomment-986233 , gubub.com/defunkt/jquery-pjax/issues/3# जारीकरण -353555 , github.com/defunkt/jquery-pjax/issues/3#issuecomment-1354589 )। इसलिए, मैंने # #! पर स्वचालित स्विच और दो प्रकार के पतों के मुफ्त रूपांतरण को जोड़कर इसे थोड़ा संशोधित किया।

हालाँकि, मेरे संशोधन में, दो मापदंडों को निर्दिष्ट किया जाना चाहिए:

 $.siteurl = 'http://yousite.com'; $.container = '#pjaxcontainer'; 

निष्कर्ष

इस प्रकार, हम कोड की कुछ पंक्तियों में एक सिंगल-पेज वेब एप्लिकेशन को लागू करते हैं। मैं टिप्पणियों और किसी भी बगट्रेक्ट के लिए आभारी रहूंगा।

कांटा और अपनी खुद की © बेईमान रोल करने के लिए स्वतंत्र महसूस करें

टिप के लिए धन्यवाद टेरियन ।

=>

योजनाओं

इस परियोजना पर काम बेहद जानकारीपूर्ण था - क्योंकि अधिक कुछ बताने के लिए है। अगले लेख में मैं jPlayer (http://jplayer.org/) पर आधारित प्लेलिस्ट के साथ एक बहुक्रियाशील ऑडियो-वीडियो प्लेयर बनाने के बारे में लिखूंगा।

---

महत्वपूर्ण टिप्पणी

देवगुरु, 12 जुलाई, 2011 8:43 PM #

विस्मयादिबोधक चिह्न खोज इंजन के लिए एक विशेष संकेत है कि इस सामग्री को अन्य तरीकों से एक्सेस किया जा सकता है। इसके बिना, खोज इंजन के लिए हैश नेविगेशन वास्तव में एक ब्लैक बॉक्स में बदल जाता है।

देवगुरु, 12 जुलाई, 2011 11:29 PM #

वास्तव में ऐसा नहीं है।
प्रसंस्करण के लिए एक अतिरिक्त यूआरएल का उपयोग किया जाता है, कल्पना और प्रारंभिक पहल देखें ।

और हाँ, यह अब तक केवल Google ही लगता है।
मैंने इस कार्यक्षमता का उपयोग नहीं किया, मैंने इसे पढ़ा।

---