वर्तमान राज्य से मिलान करने के लिए AJAX ऐप में पता बार यूआरएल संशोधित करें

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

लोग AJAX ऐप्स में रीस्टफुलनेस को बनाए रखने के तरीके को कैसे प्रबंधित कर रहे हैं?

0
जोड़ा संपादित
विचारों: 2
मैंने pushState दृष्टिकोण को प्रमुख बनाने के लिए उत्तर संपादित किया है।
जोड़ा लेखक jasonjwwilliams, स्रोत
window.history.pushState (शून्य, 'हाय', 'पृष्ठ 1? Id = 32')
जोड़ा लेखक Omu, स्रोत
इसका उपयोग आपके ऐप्स की स्थिति को बनाए रखने के लिए किया जाता है, लेकिन "रीस्टफुलनेस" के साथ इसका कोई लेना-देना नहीं है।
जोड़ा लेखक Mohamed, स्रोत
स्वीकृत उत्तर 5yrs पहले लिखा गया था और इस बीच, हमें window.history.pushState मिला, जैसे @ ओमु ने कहा। location.hash ने कई मुद्दों को लाया और इससे बचने के लिए सबसे अच्छा है।
जोड़ा लेखक peteroak, स्रोत

6 उत्तर

ऐसा करने का तरीका location.hash में हेरफेर करना है जब AJAX अपडेट एक राज्य परिवर्तन में परिणाम देता है जिसे आप एक बुद्धिमान यूआरएल रखना चाहते हैं। उदाहरण के लिए, यदि आपके पृष्ठ का यूआरएल है:

http://example.com/

यदि क्लाइंट साइड फ़ंक्शन ने इस कोड को निष्पादित किया है:

// AJAX code to display the "foo" state goes here.

location.hash = 'foo';

फिर, ब्राउज़र में प्रदर्शित यूआरएल को अपडेट किया जाएगा:

http://example.com/#foo

यह उपयोगकर्ताओं को पृष्ठ की "foo" स्थिति को बुकमार्क करने और राज्यों के बीच नेविगेट करने के लिए ब्राउज़र इतिहास का उपयोग करने की अनुमति देता है।

इस तंत्र के साथ, आपको उचित प्रारंभिक स्थिति बनाने और प्रदर्शित करने के लिए जावास्क्रिप्ट का उपयोग करके क्लाइंट पक्ष पर यूआरएल के हैश हिस्से को पार्स करने की आवश्यकता होगी, क्योंकि खंड पहचानकर्ता (# के बाद भाग) को नहीं भेजा जाता है सर्वर।

Ben Alman's hashchange plugin makes the latter a breeze if you're using jQuery.

0
जोड़ा
@buymeasoda संपादन के लिए धन्यवाद; मुझे यकीन नहीं है कि जब मैंने उस हिस्से को लिखा था तो मैं क्या सोच रहा था।
जोड़ा लेखक Dave Ward, स्रोत
@Neil: मैंने जानबूझकर उस समय / प्रश्न / पृष्ठ संरचना का उपयोग किया था, लेकिन मुझे पूरा यकीन नहीं है कि क्यों। आप शायद सही हैं कि इसे सरल रखना अधिक स्पष्ट है। मैंने तदनुसार जवाब अपडेट किया।
जोड़ा लेखक Dave Ward, स्रोत
@ पास्कल आप कर सकते हैं, लेकिन केवल ब्राउज़र में जो HTML5 के पुशस्टेट का समर्थन करते हैं। उस पर अच्छी जानकारी यहां: diveintohtml5.info/history.html
जोड़ा लेखक Dave Ward, स्रोत
ऐसा लगता है कि आप सही हैं। यही एकमात्र दृष्टिकोण है। यह आपकी सलाह का एक विस्तृत विस्तृत स्पष्टीकरण जैसा प्रतीत होता है: << a href = "http://ajaxpatterns.org/Unique_URLs>" rel = "nofollow noreferrer"> ajaxpatterns.org/Unique_URLs> ;
जोड़ा लेखक jasonjwwilliams, स्रोत
वाह, यह जवाब बहुत उपयोगी था। यद्यपि यूआरएल उदाहरण थोड़ा उलझन में हैं, इसलिए एसओएस स्वचालित रूप से शीर्षक के साथ लिंक बदल सकते हैं। Example.com और example.com/#foo जैसे कुछ लोगों को बदलने के बारे में, ताकि हम सादे टेक्स्ट में संपूर्ण यूआरएल देख सकें।
जोड़ा लेखक Neil, स्रोत
मैं ब्राउज़र अनुकूलता के लिए आधार को कवर करने के लिए history.js का एक बड़ा प्रशंसक बन गया। github.com/andreasbernhard /history.js
जोड़ा लेखक jocull, स्रोत
@ डेव मैं चाहता हूं कि #foo हैश-चार के बिना यह संभव है?
जोड़ा लेखक Pascal, स्रोत

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

साथ ही, मेरा मानना ​​है कि इतिहास.जेएस जैसे नाम के साथ वहां कुछ ढांचा है। एचटीएमएल 5 का समर्थन करने वाले ब्राउज़र के लिए, यह पुशस्टेट का उपयोग करता है, लेकिन यदि ब्राउज़र इसका समर्थन नहीं करता है, तो यह स्वचालित रूप से हैश का उपयोग करने के लिए वापस आ जाता है।

0
जोड़ा

यह केविन ने जो कहा उसके समान है। आप अपने क्लाइंट स्टेटस को कुछ जावास्क्रिप्ट ऑब्जेक्ट के रूप में प्राप्त कर सकते हैं, और जब आप राज्य को सहेजना चाहते हैं, तो आप ऑब्जेक्ट को क्रमबद्ध करें (जेएसओएन और बेस 64 एन्कोडिंग का उपयोग करके)। फिर आप इस स्ट्रिंग में href के खंड को सेट कर सकते हैं।

var encodedState = base64(json(state));
var newLocation = oldLocationWithoutFragment + "#" + encodedState;

document.location = newLocation; // adds new entry in browser history
document.location.replace(newLocation); // replaces current entry in browser history

पहला तरीका नए राज्य को एक नए स्थान के रूप में पेश करेगा (इसलिए बैक बटन उन्हें पिछले स्थान पर ले जाएगा)। उत्तरार्द्ध नहीं करता है।

0
जोड़ा
document.location.replace करना ब्राउज़र को उस यूआरएल पर रीडायरेक्ट करेगा (क्रोम कंसोल में बस कोशिश की है)
जोड़ा लेखक Omu, स्रोत
पृष्ठ को रीफ्रेश किए बिना बुकमार्क इतिहास में प्रवेश जोड़ने का कोई तरीका है? स्थान सेट करना (जैसा कि आपके पहले उदाहरण में) रीफ्रेश करेगा, है ना?
जोड़ा लेखक Drew Noakes, स्रोत

जांचें कि क्या उपयोगकर्ता पृष्ठ में है, जब आप यूआरएल बार पर क्लिक करते हैं, जावास्क्रिप्ट का कहना है कि आप पेज से बाहर हैं। यदि आप यूआरएल बार बदलते हैं और उसके अंदर '#' प्रतीक के साथ 'ENTER' दबाते हैं तो आप माउस कर्सर के साथ मैन्युअल रूप से पृष्ठ पर क्लिक किए बिना पृष्ठ में फिर से जाते हैं, फिर जावास्क्रिप्ट से एक कीबोड इवेंट कमांड (document.onkeypress) यह जांचने में सक्षम हो कि क्या यह पुनर्निर्देशन के लिए जावास्क्रिप्ट दर्ज है और सक्रिय है। आप यह जांच सकते हैं कि उपयोगकर्ता window.onfocus के साथ पृष्ठ में है या नहीं और जांचें कि वह window.onblur के साथ बाहर है या नहीं।

हाँ, यह संभव है।

;)

0
जोड़ा
जब मैं # प्रतीक के साथ यूआरएल बार संपादित करता हूं तो इस पृष्ठ को बदलने के लिए मैंने सुरुचिपूर्ण देखा।
जोड़ा लेखक Marcelo, स्रोत

Book.cakephp.org जैसी साइटों को देखें। यह साइट हैश का उपयोग किए बिना यूआरएल को बदलती है और AJAX का उपयोग करती है। मुझे यकीन नहीं है कि यह वास्तव में कैसे करता है लेकिन मैं इसे समझने की कोशिश कर रहा हूं। अगर कोई जानता है, तो मुझे बताएं।

एक निश्चित परियोजना के भीतर एक नेविगेट करते समय भी github.com।

0
जोड़ा
मैंने देखा कि एक हफ्ते पहले गिटहब के साथ। धरती पर वे ऐसा कैसे करते हैं? वापस जाना चाहिए और जांचें।
जोड़ा लेखक Drew Noakes, स्रोत
इसके लिए धन्यवाद, यह वही था जो मैं खोज रहा था। मैंने सोचा था कि कैसे गितब ने किया था। पहले मैंने सोचा कि इसे पुनः लोड करना होगा लेकिन केवल AJAX अनुरोध थे। ओपेरा में, उसने पृष्ठ को फिर से लोड किया था।
जोड़ा लेखक kamranicus, स्रोत
विभिन्न समूहों के पृष्ठों के माध्यम से नेविगेट करते समय इसी तरह की तकनीक का उपयोग एफबी द्वारा किया जाता है। आपके पास बाएं एनवी कॉलम है जिसमें विभिन्न समूहों का उल्लेख किया गया है। जब आप किसी विशेष समूह नाम पर क्लिक करते हैं तो यूआरएल बदलता है और केवल मुख्य सामग्री फलक की सामग्री यूआरएल (कोई हैश) के साथ बदल जाती है। तो जब उपयोगकर्ता पृष्ठ को फिर से लोड करता है तो उन्हें होम पेज पर रीडायरेक्ट नहीं किया जाता है बल्कि समूहों के पृष्ठ पर रीडायरेक्ट किया जाता है।
जोड़ा लेखक Madeyedexter, स्रोत
वे जावास्क्रिप्ट फ़ंक्शन pushState() का उपयोग कर रहे प्रतीत होते हैं। यह आपके ब्राउज़र के इतिहास में जोड़ता है। इसके अन्दर देखें; यह बहुत दिलचस्प और शांत है।
जोड़ा लेखक daniel.wright, स्रोत

अजाक्स का उपयोग करते समय लेखक अपने आगंतुक को फिर से लोड या रीडायरेक्ट करना चाहता है। लेकिन एचटीएमएल 5 <�कोड> पुशस्टेट / replaceState का उपयोग क्यों न करें?

You'll be able to modify the addressbar as much as you like. Get natural looking urls, with AJAX.

Check out the code on my latest project: http://iesus.se/

0
जोड़ा