AJAX App में एड्रेस बार URL को वर्तमान स्थिति से मिलान करने के लिए संशोधित करें

Question

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

AJAX ऐप्स में RESTfulness को बनाए रखने वाले लोग कैसे संभाल रहे हैं?

Comments

इसका उपयोग आपके ऐप्स की स्थिति को मिटाने के लिए किया जाता है, लेकिन इसका "RESTfulness" से कोई लेना-देना नहीं है।

— मोहम्मद

window.history.pushState(null,'hi','page1?id=32')

— ओमू

स्वीकृत उत्तर 5yrs पहले लिखा गया था और इस बीच, हमें window.history.pushState मिला, जैसे @Omu ने कहा। स्थान। कई मुद्दों को लाया और इससे बचने के लिए सबसे अच्छा है।

— पीसीरवलहो सेप

मैंने पुशस्टैट दृष्टिकोण को प्रमुख बनाने के लिए उत्तर को संपादित किया है।

— jasonjwwilliams

Answer 1

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

http://example.com/

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

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

location.hash = 'foo';

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

http://example.com/#foo

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

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

यदि आप jQuery का उपयोग कर रहे हैं तो बेन अलमान का हैशचेंज प्लगइन बाद की हवा बनाता है।

Comments

लगता है आप ठीक कह रहे हैं। यही एकमात्र तरीका है। यह आपकी सलाह का एक अच्छा विस्तृत विवरण लगता है: < ajaxpatterns.org/Unique_URLs >

— jasonjwwilliams

@buymeasoda संपादन के लिए धन्यवाद; मुझे यकीन नहीं है कि मैं क्या सोच रहा था जब मैंने वह हिस्सा लिखा था।

— डेव वार्ड

वाह, यह जवाब बहुत मददगार था। हालाँकि, URL के उदाहरण थोड़े भ्रमित करने वाले हैं, लेकिन SO स्वतः ही शीर्षक के साथ लिंक की जगह ले सकता है। कैसे उन लोगों को प्रतिस्थापित करने के बारे में जैसे example.com और example.com/#foo, ताकि हम पूरे url को plaintext में देख सकें।

— नील

@ पास्कल आप कर सकते हैं, लेकिन केवल उन ब्राउज़रों में जो HTML5 के पुशस्टेट का समर्थन करते हैं। उस पर अच्छी जानकारी यहाँ: diveintohtml5.info/history.html

— डेव वार्ड

मैं History.js के एक बड़े प्रशंसक ब्राउज़र संगतता के लिए आधार कवर करने जा रहा समाप्त हो गया github.com/andreasbernhard/history.js

— jocull

Answer 2

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

इसके अलावा github.com जब एक निश्चित परियोजना के भीतर एक नेविगेटिंग को देखते हैं।

Comments

मैंने गौर किया कि एक हफ्ते या उससे पहले GitHub के साथ। पृथ्वी पर वे कैसे करते हैं? वापस जाकर जांच करनी चाहिए।

— ड्रू नोक

वे जावास्क्रिप्ट फ़ंक्शन pushState () का उपयोग कर रहे हैं। यह आपके ब्राउज़र के इतिहास में जुड़ जाता है। इसके अन्दर देखें; यह बहुत दिलचस्प और अच्छा है।

— daniel.wright 3

इसके लिए धन्यवाद, यह वही था जिसकी मुझे तलाश थी। मैंने सोचा था कि कैसे github किया था। पहले मुझे लगा कि इसे फिर से लोड करना होगा लेकिन केवल AJAX के अनुरोध थे। ओपेरा में, इसने पृष्ठ को फिर से लोड किया।

— कामरानिकस

विभिन्न समूहों के पृष्ठों के माध्यम से नेविगेट करते समय इसी तरह की तकनीक का उपयोग fb द्वारा किया जाता है। आपके पास एक बाएं नौसेना स्तंभ है जिसमें विभिन्न समूहों का उल्लेख है। जब आप किसी विशेष समूह के नाम पर क्लिक करते हैं तो url में परिवर्तन होता है और केवल मुख्य सामग्री फलक में url के साथ परिवर्तन होता है (कोई आधार नहीं)। इसलिए जब उपयोगकर्ता पृष्ठ को फिर से लोड करता है तो उन्हें होम पेज पर नहीं बल्कि समूहों के पेज पर रीडायरेक्ट किया जाता है।

— मडेयडेक्सटर

Answer 3

यह संभावना नहीं है कि लेखक अजाक्स का उपयोग करते समय अपने आगंतुक को फिर से लोड या पुनर्निर्देशित करना चाहता है। लेकिन HTML5 pushState/ का उपयोग क्यों नहीं करते replaceState?

आप जितना चाहें उतना एड्रेसबार को संशोधित करने में सक्षम होंगे। AJAX के साथ प्राकृतिक दिखने वाले url प्राप्त करें।

मेरे नवीनतम प्रोजेक्ट पर कोड देखें : http://iesus.se/

Answer 4

यह वही है जो केविन ने कहा था। आपके पास कुछ जावास्क्रिप्ट ऑब्जेक्ट के रूप में आपकी क्लाइंट स्थिति हो सकती है, और जब आप राज्य को सहेजना चाहते हैं, तो आप ऑब्जेक्ट को क्रमबद्ध करते हैं (JSON और base64 एन्कोडिंग का उपयोग करके)। फिर आप इस स्ट्रिंग को 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

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

Comments

क्या पेज को रीफ्रेश किए बिना बुकमार्क इतिहास में प्रविष्टि जोड़ने का कोई तरीका है? स्थान सेट करना (जैसा कि आपके पहले उदाहरण में) एक ताज़ा कारण होगा, है ना?

— ड्रू नोक

document.location.replace भी ब्राउज़र को उस url पर पुनर्निर्देशित करेगा (बस इसे क्रोम कंसोल में आज़माया गया है)

— Omu

Answer 5

SWFAddress फ्लैश और जावास्क्रिप्ट परियोजनाओं में काम करता है और आपको बैक-बटन समर्थन देने के साथ-साथ बुकमार्क करने योग्य URL (ऊपर उल्लिखित हैश पद्धति का उपयोग करके) बनाने देता है।

http://www.asual.com/swfaddress/

Answer 6

Window.location.hash विधि चीजों को करने का पसंदीदा तरीका है। यह कैसे करना है, इसकी व्याख्या के लिए, अजाक्स पैटर्न - अद्वितीय URL ।

YUI में एक मॉड्यूल के रूप में इस पैटर्न का कार्यान्वयन है, जिसमें हैश का उपयोग करके पते को फिर से लिखने के साथ-साथ बैक बटन काम करने के लिए IE विशिष्ट कार्य शामिल हैं। YUI ब्राउज़र इतिहास प्रबंधक ।

अन्य रूपरेखाओं में भी समान कार्यान्वयन हैं। महत्वपूर्ण बिंदु यह है कि यदि आप चाहते हैं कि इतिहास पते को फिर से लिखने के साथ काम करे, तो विभिन्न ब्राउज़रों को इसे संभालने के विभिन्न तरीकों की आवश्यकता होती है। (यह पहले लिंक लेख में विस्तृत है।)

IE एक iframe आधारित हैक की जरूरत है, जहां फ़ायरफ़ॉक्स एक ही विधि का उपयोग कर दोहरा इतिहास का उत्पादन करेगा।

Answer 7

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

इसके अलावा, मेरा मानना ​​है कि इतिहास की तरह एक नाम के साथ वहाँ कुछ रूपरेखा है। HTML5 का समर्थन करने वाले ब्राउज़र के लिए, यह pushState का उपयोग करता है, लेकिन यदि ब्राउज़र इसका समर्थन नहीं करता है, तो यह स्वतः ही हैश का उपयोग करके वापस आ जाता है।

Answer 8

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

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

;)

Comments

यह वह तरीका है जब मैंने पृष्ठ को बदलने के लिए सुरुचिपूर्ण देखा था जब उपयोगकर्ता # प्रतीक के साथ यूआरएल बार संपादित करता है।

— मार्सेलो