มีวิธีเปลี่ยนแถบที่อยู่ของเบราว์เซอร์โดยไม่ต้องรีเฟรชหน้าหรือไม่?

ฉันกำลังพัฒนาเว็บแอป ในนั้นฉันมีส่วนที่เรียกว่าหมวดหมู่ซึ่งทุกครั้งที่ผู้ใช้คลิกหนึ่งในหมวดหมู่แผงการอัปเดตจะโหลดเนื้อหาที่เหมาะสม

หลังจากที่ผู้ใช้คลิกหมวดหมู่ฉันต้องการเปลี่ยน URL ของแถบที่อยู่ของเบราว์เซอร์จาก

www.mysite.com/products 

กับสิ่งที่ชอบ

www.mysite.com/products/{selectedCat} 

โดยไม่ต้องรีเฟรชหน้า
มี JavaScript API บางประเภทที่ฉันสามารถใช้เพื่อบรรลุสิ่งนี้ได้หรือไม่?

ด้วย HTML5 คุณสามารถแก้ไข URL โดยไม่ต้องโหลดซ้ำ:

หากคุณต้องการสร้างโพสต์ใหม่ในประวัติของเบราว์เซอร์ (เช่นปุ่มย้อนกลับจะใช้งานได้)

window.history.pushState('Object', 'Title', '/new-url');

หากคุณต้องการเปลี่ยน URL โดยไม่สามารถย้อนกลับได้

window.history.replaceState('Object', 'Title', '/another-new-url');

วัตถุสามารถใช้สำหรับการนำทาง ajax:

window.history.pushState({ id: 35 }, 'Viewing item #35', '/item/35');

window.onpopstate = function (e) {
  var id = e.state.id;
  load_item(id);
};

อ่านเพิ่มเติมที่นี่: http://www.w3.org/TR/html5-author/history.html

การแก้ไขทางเลือก: https://github.com/browserstate/history.js

หากต้องการเพิ่มสิ่งที่พวกเขาพูดไปแล้วให้แก้ไขคุณสมบัติ window.location.hash ให้ตรงกับ URL ที่คุณต้องการในฟังก์ชัน onclick ของคุณ

window.location.hash = 'category-name'; // address bar would become http://example.com/#category-name

ฉันเชื่อว่าการจัดการแถบที่อยู่ไปยัง URL ที่แตกต่างกันโดยสิ้นเชิงโดยไม่ต้องย้ายไปยัง URL นั้นไม่ได้รับอนุญาตด้วยเหตุผลด้านความปลอดภัยหากคุณพอใจ

www.mysite.com/products/#{selectedCat}

นั่นคือลิงก์รูปแบบจุดยึดภายในหน้าเดียวกันจากนั้นดูในสคริปต์ประวัติ / "ปุ่มย้อนกลับ" ต่างๆที่มีอยู่ในไลบรารีจาวาสคริปต์ส่วนใหญ่

การกล่าวถึงแผงการอัปเดตทำให้ฉันเดาได้ว่าคุณกำลังใช้ asp.net ในกรณีนี้การควบคุมประวัติ ajax ของ asp.net เป็นจุดเริ่มต้นที่ดี

ฉันไม่คิดว่าจะเป็นไปได้ (อย่างน้อยก็เปลี่ยนไปใช้ที่อยู่ที่แตกต่างกันโดยสิ้นเชิง) เนื่องจากจะเป็นการใช้แถบที่อยู่ในทางที่ผิดโดยไม่ได้ตั้งใจและอาจส่งเสริมการโจมตีแบบฟิชชิง

สิ่งนี้ไม่สามารถทำได้อย่างที่คุณพูด วิธีที่แนะนำโดย somej.net นั้นใกล้เคียงที่สุดที่คุณจะได้รับ เป็นเรื่องธรรมดามากในยุค AJAX แม้แต่ Gmail ก็ใช้สิ่งนี้

"window.location.hash"

ตามคำแนะนำของ sanchothefat ควรเป็นวิธีเดียวเท่านั้นที่จะทำได้ เพราะสถานที่ทั้งหมดที่ฉันเห็นฟีเจอร์นี้มันจะอยู่หลัง # in URL ตลอดเวลา