เราทุกคนรู้ว่า Ajax นำความสามารถในการโหลดแบบอะซิงโครนัสไปยังเบราว์เซอร์ปรับปรุงประสบการณ์ผู้ใช้ในการตรวจสอบข้อมูลการรีเฟรชในท้องถิ่น ฯลฯ แต่ในเวลาเดียวกันมีปัญหาดังต่อไปนี้:
1. คุณสามารถเปลี่ยนเนื้อหาหน้าโดยไม่ต้องรีเฟรช แต่คุณไม่สามารถเปลี่ยน URL หน้าเว็บ
2. วิธีแฮชไม่สามารถจัดการกับปัญหาของเบราว์เซอร์ไปข้างหน้าย้อนหลังและปัญหาอื่น ๆ
เพื่อที่จะแก้ปัญหาที่เกิดจาก AJAX แบบดั้งเดิม HTML5 เสริมความแข็งแกร่งให้กับประวัติ API, เพิ่ม pushstate, อินเทอร์เฟซแทนที่และเหตุการณ์ป๊อปสเตต ฉันจะไม่แนะนำรายละเอียดที่นี่ นักเรียนที่ไม่มีความรู้นี้แนะนำให้คุณดูข้อมูลที่เกี่ยวข้องก่อน
ปลั๊กอิน PJAX ห่อหุ้มการทำงานของ PushState และ AJAX ทำให้เรามีวิธีการง่ายๆในการพัฒนาเว็บแอปพลิเคชันดังกล่าว ขั้นตอนเฉพาะมีดังนี้:
กำหนดคอนเทนเนอร์ที่ต้องการการอัปเดตในท้องถิ่น
<div id = "container"> </div>
เริ่มต้น PJAX และฟัง URL
การคัดลอกรหัสมีดังนี้:
$ (function () {
// pjax
$ (เอกสาร) .pjax ('A', '#Container');
$ .pjax.reload ('#container');
-
แบ็กเอนด์จัดการคำขอ PJAX
ตรรกะการประมวลผลของแบ็กเอนด์คือการพิจารณาก่อนว่าเป็นคำขอ PJAX หรือไม่ ถ้าเป็นเช่นนั้นให้ส่งคืนเนื้อหาโลคัลตามพารามิเตอร์คำขอมิฉะนั้นส่งคืนเค้าโครงแล้วเริ่มต้นคำขอ PJAX โดย `$ .pjax.reload ('#container');` ตามตรรกะข้างต้นสามารถเขียนโค้ดต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
var pjaxfilter = function (req, res, ถัดไป) {
if (req.get ('x-pjax')) {
ต่อไป();
กลับ;
-
// หากไม่ใช่คำขอ PJAX ให้กลับไปที่เทมเพลตเลย์เอาต์โดยตรง
res.render ('layout', {title: 'pjax simple demo'});
-
router.get ('/', pjaxfilter, ฟังก์ชัน (req, res) {
res.render ('ดัชนี');
-
Router.get ('/บทกวี/: id', pjaxfilter, ฟังก์ชั่น (req, res) {
var poemid = req.params.id;
Res.render ('Poem/' + Poemid);
-
รหัสเต็ม: pjax-demo
นี่เป็นเพียงฟังก์ชั่นพื้นฐานที่สุดของ PJAX PJAX ให้ API ที่หลากหลายกรุณาเยี่ยมชม: jQuery-PJAX