-
ในเดือนกันยายนปีที่แล้ว Twitter ได้ปรับปรุงเวอร์ชันใหม่ การเปลี่ยนแปลงที่สำคัญคือมีการเพิ่มสัญลักษณ์ #! ตัวอย่างเช่น URL หน้าแรกของผู้ใช้ก่อนการแก้ไข
หลังจากแก้ไขก็กลายมาเป็น
http://twitter.com/#!/ชื่อผู้ใช้
นี่เป็นครั้งแรกที่มีการใช้ "#" ใน URL ที่สำคัญในวงกว้างโดยเว็บไซต์กระแสหลัก นี่แสดงให้เห็นว่าบทบาทของเครื่องหมายแฮชกำลังได้รับการยอมรับอีกครั้ง บทความนี้อ้างอิงจากบทความของ HttpWatch เพื่อแยกแยะประเด็นความรู้ที่สำคัญทั้งหมดที่เกี่ยวข้องกับเครื่องหมายปอนด์
1. ความหมายของ #
#เป็นตัวแทนตำแหน่งในหน้าเว็บ อักขระทางด้านขวาคือตัวระบุตำแหน่ง ตัวอย่างเช่น,
http://www.example.com/index.html#PRint
แสดงถึงตำแหน่งการพิมพ์ของหน้าเว็บindex.html หลังจากที่เบราว์เซอร์อ่าน URL นี้แล้ว เบราว์เซอร์จะเลื่อนตำแหน่งการพิมพ์ไปยังพื้นที่ที่มองเห็นได้โดยอัตโนมัติ มีสองวิธีในการระบุตัวระบุสำหรับตำแหน่งหน้าเว็บ หนึ่งคือการใช้จุดยึด เช่น <a name="print"></a> และอีกอย่างคือใช้แอตทริบิวต์ id เช่น <div id="print" >
2. คำขอ HTTP ไม่รวม #
# ใช้เพื่อแนะนำการทำงานของเบราว์เซอร์และไม่มีประโยชน์โดยสิ้นเชิงบนฝั่งเซิร์ฟเวอร์ ดังนั้น # จึงไม่รวมอยู่ในคำขอ HTTP
ตัวอย่างเช่น ไปที่ URL ต่อไปนี้
http://www.example.com/index.html#print
คำขอจริงที่ทำโดยเบราว์เซอร์คือ:
รับ /index.html HTTP/1.1
โฮสต์: www.example.com
อย่างที่คุณเห็น มีการร้องขอเฉพาะ index.html และไม่มีส่วน "#print" เลย
3. อักขระหลัง #
อักขระใด ๆ ที่ปรากฏหลัง # แรกจะถูกตีความโดยเบราว์เซอร์เป็นตัวระบุตำแหน่ง ซึ่งหมายความว่าจะไม่มีการส่งอักขระเหล่านี้ไปยังเซิร์ฟเวอร์
ตัวอย่างเช่น URL ต่อไปนี้มีวัตถุประสงค์เพื่อระบุค่าสี:
http://www.example.com/?color=#fff
อย่างไรก็ตาม คำขอจริงที่ทำโดยเบราว์เซอร์คือ:
รับ /?สี= HTTP/1.1
โฮสต์: www.example.com
อย่างที่คุณเห็น "fff" จะถูกละเว้น เฉพาะในกรณีที่ # ถูกแปลงรหัสเป็น %23 เบราว์เซอร์จะถือว่าเป็นอักขระตามตัวอักษร นั่นคือ URL ด้านบนควรเขียนเป็น:
http://example.com/?color=%23fff
4. เปลี่ยน #อย่าทริกเกอร์การโหลดหน้าเว็บซ้ำ
เพียงเปลี่ยนส่วนที่อยู่หลัง # เบราว์เซอร์จะเลื่อนไปยังตำแหน่งที่เกี่ยวข้องเท่านั้นและจะไม่โหลดหน้าเว็บซ้ำ
ตัวอย่างเช่นจาก
http://www.example.com/index.html#location1
เปลี่ยนเป็น
http://www.example.com/index.html#location2
เบราว์เซอร์จะไม่ร้องขอ index.html จากเซิร์ฟเวอร์อีกครั้ง
5. การเปลี่ยน # จะเปลี่ยนประวัติการเข้าถึงของเบราว์เซอร์
ทุกครั้งที่คุณเปลี่ยนส่วนหลัง # บันทึกจะถูกเพิ่มในประวัติการเข้าถึงของเบราว์เซอร์ ใช้ปุ่ม "ย้อนกลับ" เพื่อกลับไปยังตำแหน่งก่อนหน้า สิ่งนี้มีประโยชน์อย่างยิ่งสำหรับแอปพลิเคชัน Ajax โดยที่ค่า # ที่แตกต่างกันสามารถใช้เพื่อแสดงถึงสถานะการเข้าถึงที่แตกต่างกัน จากนั้นผู้ใช้จะได้รับลิงก์เพื่อเข้าถึงสถานะหนึ่งๆ เป็นที่น่าสังเกตว่ากฎข้างต้นไม่ใช้กับ IE 6 และ IE 7 พวกเขาจะไม่เพิ่มประวัติเนื่องจากการเปลี่ยนแปลง #
6. window.location.hash อ่านค่า # ค่า
คุณสมบัติ window.location.hash สามารถอ่านและเขียนได้ เมื่ออ่านสามารถใช้เพื่อกำหนดว่าสถานะของหน้าเว็บมีการเปลี่ยนแปลงหรือไม่ เมื่อเขียน บันทึกประวัติการเข้าถึงจะถูกสร้างขึ้นโดยไม่ต้องโหลดหน้าเว็บซ้ำ
7.กิจกรรม onhashchange
นี่เป็นเหตุการณ์ใหม่ใน HTML 5 เหตุการณ์นี้จะถูกทริกเกอร์เมื่อค่า # เปลี่ยนแปลง IE8+, Firefox 3.6+, Chrome 5+, Safari 4.0+ รองรับกิจกรรมนี้
มีสามวิธีในการใช้งาน:
window.onhashchange = func;
<body onhashchange="func();">
window.addEventListener("hashchange", func, false);
สำหรับเบราว์เซอร์ที่ไม่รองรับ onhashchange คุณสามารถใช้ setInterval เพื่อตรวจสอบการเปลี่ยนแปลงใน location.hash
8. กลไกการรวบรวมข้อมูลของ Google #
ตามค่าเริ่มต้น สไปเดอร์เว็บของ Google จะไม่สนใจส่วน # ของ URL
อย่างไรก็ตาม Google ยังกำหนดไว้ด้วยว่าหากคุณต้องการให้เครื่องมือค้นหาอ่านเนื้อหาที่สร้างโดย Ajax คุณสามารถใช้ "#!" ใน URL ได้ และ Google จะแปลงเนื้อหาที่ตามมาเป็นค่าของสตริงข้อความค้นหา _escaped_fragment_ โดยอัตโนมัติ .
ตัวอย่างเช่น Google พบว่า URL ของ Twitter เวอร์ชันใหม่เป็นดังนี้:
http://twitter.com/#!/ชื่อผู้ใช้
URL อื่นจะถูกรวบรวมข้อมูลโดยอัตโนมัติ:
http://twitter.com/?_escaped_fragment_=/ชื่อผู้ใช้
ด้วยกลไกนี้ Google สามารถจัดทำดัชนีเนื้อหา Ajax แบบไดนามิกได้
ที่มาของบทความ: ไดอารี่ออนไลน์ของหร่วนอี้เฟิง