বর্তমান অবস্থার সাথে মিলিয়ে অ্যাজেএক্স অ্যাপে ঠিকানা বারের URL সংশোধন করুন

166

আমি একটি এজেএক্স অ্যাপ্লিকেশন লিখছি, তবে ব্যবহারকারীরা অ্যাপটির মাধ্যমে চলার সাথে সাথে আমি পৃষ্ঠা পুনরায় লোডের অভাব সত্ত্বেও ঠিকানা বারের URL টি আপডেট করতে চাই। মূলত, আমি চাই যে তারা যে কোনও সময়ে বুকমার্ক করতে সক্ষম হবে এবং এর মাধ্যমে বর্তমান অবস্থায় ফিরে আসবে।

জনগণ কীভাবে এজেএক্স অ্যাপ্লিকেশনগুলিতে RESTfulness বজায় রাখছেন?

— jasonjwwilliams
সূত্র

2

এটি আপনার অ্যাপ্লিকেশনগুলির স্থিতি বজায় রাখতে ব্যবহৃত হয়, তবে "RESTfulness" এর সাথে কোনও সম্পর্ক নেই।

— মোহাম্মদ

29

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

— ওমু

3

গৃহীত উত্তরটি 5 বছর আগে লেখা হয়েছিল এবং ইতিমধ্যে আমরা উইন্ডো হিস্ট্রি.পুশ স্টেট পেয়েছি, ঠিক যেমন @ ওমু বলেছিলেন। অবস্থান.hash অসংখ্য সমস্যা এনেছে এবং এড়ানো সেরা।

— pcarvalho

পুশস্টেটের পদ্ধতির বিষয়টি বিশিষ্ট করার জন্য আমি উত্তরটি সম্পাদনা করেছি।

— জেসনজভিলিইয়ামস

116

এটি করার উপায় হ'ল location.hashএজেএক্স আপডেটের পরে এমন কোনও স্থিতিশীল পরিবর্তন ঘটে যখন আপনি পৃথক ইউআরএল রাখতে চান man উদাহরণস্বরূপ, যদি আপনার পৃষ্ঠার ইউআরএল হয়:

http://example.com/

যদি কোনও ক্লায়েন্টের পক্ষের কার্যটি এই কোডটি কার্যকর করে:

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

location.hash = 'foo';

তারপরে, ব্রাউজারে প্রদর্শিত URL টি এতে আপডেট হবে:

http://example.com/#foo

এটি ব্যবহারকারীদের পৃষ্ঠার "foo" রাজ্যটি বুকমার্ক করতে এবং ব্রাউজারের ইতিহাসটি রাষ্ট্রগুলির মধ্যে নেভিগেট করতে ব্যবহার করে।

এই প্রক্রিয়াটি স্থানে রাখার পরে, জাভাস্ক্রিপ্ট ব্যবহার করে যথাযথ প্রাথমিক অবস্থা তৈরি এবং প্রদর্শন করতে ক্লায়েন্ট সাইডে ইউআরএল এর হ্যাশ অংশটি পার্স করতে হবে, খণ্ড শনাক্তকারীদের (# অংশের পরে) পাঠানো হয়নি সার্ভার।

বেন আলমানের হ্যাশচেঞ্জ প্লাগইনটি যদি আপনি jQuery ব্যবহার করেন তবে পরবর্তীকালে একটি বাতাস বইবে ।

— ডেভ ওয়ার্ড
সূত্র

দেখে মনে হচ্ছে আপনি ঠিক বলেছেন। এটাই একমাত্র পন্থা। এটি আপনার পরামর্শের একটি ভাল বিশদ ব্যাখ্যার মতো বলে মনে হচ্ছে: < ajaxpatterns.org/Unique_URLs >

— জেসনজউইলিয়ামস

@ বিমাইসোদা এডিট করার জন্য ধন্যবাদ; আমি যে অংশটি লিখেছিলাম তখন আমি কী ভাবছিলাম তা নিশ্চিত নই।

— ডেভ ওয়ার্ড

1

বাহ, এই উত্তরটি খুব সহায়ক ছিল। যদিও ইউআরএল উদাহরণগুলি কিছুটা বিভ্রান্তিকর, তবুও স্বয়ংক্রিয়ভাবে শিরোনামগুলির সাথে লিঙ্কগুলি প্রতিস্থাপন করা হতে পারে। উদাহরণ ডটকম এবং উদাহরণ.com/#foo এর মতো কিছু দিয়ে কীভাবে তাদের প্রতিস্থাপন করা যায়, যাতে আমরা পুরো ইউআরএলটিকে প্লেইন টেক্সটে দেখতে পারি।

— নীল

4

@ পাসল আপনি পারেন তবে কেবল এইচটিএমএল 5 এর পুসস্টেট সমর্থনকারী ব্রাউজারগুলিতে। এখানে ভাল তথ্য: diveintohtml5.info/history.html

— ডেভ ওয়ার্ড

1

আমি ব্রাউজারের সামঞ্জস্যের ঘাঁটিগুলিতে ইতিহাসের ইতিহাসের বড় অনুরাগী হয়ে গেছি github.com/andreasbernhard/history.js

— জোকুল

18

Book.cakephp.org এর মতো সাইটগুলি দেখুন। এই সাইটটি হ্যাশ ব্যবহার না করে URL টি পরিবর্তন করে এবং এজেএক্স ব্যবহার করে। আমি ঠিক জানি না এটি ঠিক কীভাবে কাজ করে তবে আমি এটি বের করার চেষ্টা করছি। যদি কেউ জানে তবে আমাকে জানান।

নির্দিষ্ট প্রকল্পের মধ্যে নেভিগেটের দিকে তাকানোর সময়ও গিথুব ডট কম।

— daniel.wright
সূত্র

আমি লক্ষ্য করেছি যে গিটহাবের সাথে এক সপ্তাহ বা তারও আগে। তারা পৃথিবীতে কীভাবে তা করে? ফিরে যেতে হবে এবং চেক করতে হবে।

— ড্রয় নোকস

16

তারা জাভাস্ক্রিপ্ট ফাংশন পুসস্টেট () ব্যবহার করছে বলে মনে হচ্ছে। এটি আপনার ব্রাউজারের ইতিহাসে যুক্ত করে। এর ভিতরে তাকাও; এটা বেশ আকর্ষণীয় এবং দুর্দান্ত।

— daniel.wright

এই জন্য ধন্যবাদ, এটি ঠিক আমি যা খুঁজছিলাম ছিল। আমি ভাবলাম কীভাবে গিথুব এটি করেছে। প্রথমে আমি ভেবেছিলাম এটি অবশ্যই পুনরায় লোড করা হবে তবে কেবলমাত্র এজেএক্স অনুরোধ ছিল। অপেরাতে, এটি পৃষ্ঠাটি পুনরায় লোড করেছিল।

— কামরানিকাস

বিভিন্ন গ্রুপের পৃষ্ঠাগুলিতে নেভিগেট করার সময় এফবি দ্বারা অনুরূপ কৌশল ব্যবহৃত হয়। আপনার একটি বাম নাভি কলাম রয়েছে যাতে বিভিন্ন গোষ্ঠী উল্লেখ করা হয়েছে। আপনি যখন কোনও নির্দিষ্ট গোষ্ঠীতে ক্লিক করেন তখন url এর নাম পরিবর্তন হয় এবং কেবলমাত্র মূল লিখিত প্যানের সামগ্রীটি ইউআরএল (হ্যাশ নেই) এর সাথে পরিবর্তিত হয়। সুতরাং যখন ব্যবহারকারী পৃষ্ঠাটি পুনরায় লোড করেন তখন সেগুলি হোম পৃষ্ঠাতে নয় গোষ্ঠীগুলির পৃষ্ঠায় পুনঃনির্দেশিত হয়।

— মেডেডেএক্সটার

17

অজ্যাক্স ব্যবহার করার সময় লেখক তার দর্শকদের পুনরায় লোড করতে বা পুনর্নির্দেশ করতে চান না unlikely তবে HTML5 এর pushState/ ব্যবহার করবেন না কেন replaceState?

আপনি নিজের পছন্দমতো অ্যাড্রেসবারটি পরিবর্তন করতে পারবেন। এজেএক্স সহ প্রাকৃতিক সন্ধানের url পান।

আমার সর্বশেষ প্রকল্পের কোডটি দেখুন: http://iesus.se/

— যীশু
সূত্র

11

এটি কেভিন যা বলেছিলেন তার অনুরূপ। কিছু জাভাস্ক্রিপ্ট অবজেক্ট হিসাবে আপনার ক্লায়েন্টের রাজ্য থাকতে পারে এবং আপনি যখন রাষ্ট্রটি সংরক্ষণ করতে চান তখন আপনি বস্তুটি সিরিয়ালাইজ করবেন (জেএসএন এবং বেস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

প্রথম উপায়ে নতুন রাজ্যটিকে একটি নতুন অবস্থান হিসাবে বিবেচনা করবে (সুতরাং পিছনের বোতামটি সেটিকে পূর্ববর্তী অবস্থানে নিয়ে যাবে)। পরেরটি তা করে না।

পৃষ্ঠাটি রিফ্রেশ না করে বুকমার্কের ইতিহাসে কোনও এন্ট্রি যুক্ত করার কোনও উপায় আছে কি? অবস্থানটি সেট করা (আপনার প্রথম উদাহরণ হিসাবে) একটি সতেজতা সৃষ্টি করবে, তাই না?

— ড্রয় নোকস

ডকুমেন্ট.লোকেশন.রেপ্লেসটি ব্রাউজারটিকে সেই ইউআরএলে পুনর্নির্দেশ করবে (কেবল ক্রোম কনসোলে এটি চেষ্টা করে)

— ওমু

3

এসডাব্লুএফএড্রেস ফ্ল্যাশ এবং জাভাস্ক্রিপ্ট প্রকল্পগুলিতে কাজ করে এবং আপনাকে বুকমার্কযোগ্য ইউআরএল তৈরি করতে দেয় (উপরে উল্লিখিত হ্যাশ পদ্ধতিটি ব্যবহার করে) পাশাপাশি আপনাকে ব্যাক-বোতাম সমর্থন দেয়।

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

3

উইন্ডো.লোকেশন.হ্যাশ পদ্ধতি হ'ল জিনিসগুলি পছন্দ করার উপায় way এটি কীভাবে করবেন তার ব্যাখ্যার জন্য, আজাক্স প্যাটার্নস - অনন্য ইউআরএল ।

YUI এর একটি মডিউল হিসাবে এই প্যাটার্নটির একটি বাস্তবায়ন রয়েছে, এতে হ্যাশ ব্যবহার করে ঠিকানাটি পুনরায় লেখার পাশাপাশি পিছনের বোতামটি কাজ করার জন্য IE নির্দিষ্ট কাজ প্রায় অন্তর্ভুক্ত রয়েছে। YUI ব্রাউজারের ইতিহাস পরিচালক ।

অন্যান্য ফ্রেমওয়ার্কগুলিতেও একই রকম বাস্তবায়ন রয়েছে। গুরুত্বপূর্ণ বিষয়টি হ'ল আপনি যদি ইতিহাসটি ঠিকানার সাথে পুনরায় লেখার পাশাপাশি কাজ করতে চান তবে বিভিন্ন ব্রাউজারের এটি পরিচালনা করার বিভিন্ন উপায় প্রয়োজন। (এটি প্রথম লিঙ্ক নিবন্ধে বিস্তারিত is

আই-এর একটি আইফ্রেমে ভিত্তিক হ্যাক দরকার, যেখানে ফায়ারফক্স একই পদ্ধতি ব্যবহার করে দ্বৈত ইতিহাস তৈরি করবে।

— ড্রয় নোকস
সূত্র

3

আইপিএস বা অন্যরা যদি রাষ্ট্রের সক্ষমতা অর্জনের জন্য ব্রাউজারের ইতিহাসে পরিবর্তন করার কোনও উপায় সন্ধান করে তবে আইইসাসের পরামর্শ অনুসারে পুশস্টেট এবং রিপ্লেসমেট ব্যবহার করে এখনই এটি করা 'সঠিক' উপায়। এটি অবস্থানের উপরে প্রধান সুবিধা ha হ্যাশ থেকে মনে হচ্ছে এটি কেবল হ্যাশগুলি নয়, প্রকৃত url তৈরি করে। যদি হ্যাশ ব্যবহার করে ব্রাউজারের ইতিহাস সংরক্ষণ করা হয় এবং জাভাস্ক্রিপ্ট অক্ষম করে পুনরায় দেখা যায়, অ্যাপ্লিকেশনটি কাজ করবে না, কারণ হ্যাশগুলি সার্ভারে প্রেরণ করা হয়নি। তবে, যদি পুশস্টেট ব্যবহার করা হয়ে থাকে তবে পুরো রুটটি সার্ভারে প্রেরণ করা হবে, যা আপনি তারপরে রুটে যথাযথ প্রতিক্রিয়া জানাতে পারেন। আমি একটি উদাহরণ দেখেছি যেখানে সার্ভার এবং ক্লায়েন্ট উভয়দিকে একই গোঁফ টেম্পলেট ব্যবহার করা হয়েছিল। যদি ক্লায়েন্টটির জাভাস্ক্রিপ্ট সক্ষম করা থাকে তবে সে সার্ভারের রাউন্ডট্রিপ এড়িয়ে চটজলদি প্রতিক্রিয়া জানাতে পারে, তবে অ্যাপ্লিকেশনটি জাভাস্ক্রিপ্ট ছাড়াই পুরোপুরি সূক্ষ্মভাবে কাজ করবে। সুতরাং, অ্যাপ্লিকেশন জাভাস্ক্রিপ্টের অনুপস্থিতিতে করুণভাবে হ্রাস করতে পারে।

এছাড়াও, আমি বিশ্বাস করি ইতিহাস.js এর মতো একটি নাম আছে। এইচটিএমএল 5 সমর্থন করে এমন ব্রাউজারগুলির জন্য এটি পুশস্টেট ব্যবহার করে তবে ব্রাউজার যদি এটি সমর্থন না করে তবে স্বয়ংক্রিয়ভাবে হ্যাশগুলি ব্যবহার করে ফিরে যায়।

— নিল
সূত্র

2

ব্যবহারকারী পৃষ্ঠায় 'রয়েছে' কিনা তা পরীক্ষা করুন, আপনি যখন ইউআরএল বারে ক্লিক করেন, জাভাস্ক্রিপ্ট বলে যে আপনি পৃষ্ঠাটির বাইরে রয়েছেন। আপনি যদি ইউআরএল বারটি পরিবর্তন করেন এবং এর মধ্যে '#' চিহ্ন সহ 'ENTER' টিপুন তবে আপনি মাউসের কার্সর দিয়ে ম্যানুয়ালি পৃষ্ঠাটিতে ক্লিক না করেই আবার পৃষ্ঠাতে চলে যেতে পারেন, তবে জাভাস্ক্রিপ্ট থেকে একটি কী-বোর্ড ইভেন্ট কমান্ড (ডকুমেন্ট.অনকাইপ্রেস) আসবে এটি পুনর্নির্দেশের জন্য জাভাস্ক্রিপ্ট প্রবেশ করে এবং সক্রিয় করে কিনা তা পরীক্ষা করতে সক্ষম হোন। আপনি উইন্ডো.নফোকাসের সাথে ব্যবহারকারী পৃষ্ঠায় রয়েছেন কিনা তা পরীক্ষা করে দেখতে পারেন এবং উইন্ডোঅনব্লুর দিয়ে তিনি বাইরে আছেন কিনা তা পরীক্ষা করতে পারেন।

হ্যাঁ, এটা সম্ভব

;)

— মার্সেলো
সূত্র

এইভাবে আমি পৃষ্ঠাটি পরিবর্তন করতে মার্জিত দেখতে পেয়েছি যখন ব্যবহারকারী # প্রতীক সহ ইউআরএল বার সম্পাদনা করে।

— মার্সেলো