Kita semua tahu bahwa Ajax membawa kemampuan untuk memuat secara tidak sinkron ke browser, meningkatkan pengalaman pengguna dalam verifikasi data, penyegaran lokal, dll., Tetapi pada saat yang sama ada masalah berikut:
1. Anda dapat mengubah konten halaman tanpa penyegaran, tetapi Anda tidak dapat mengubah URL halaman
2. Metode hash tidak dapat menangani masalah peramban ke depan, terbelakang dan lainnya
Untuk menyelesaikan masalah yang disebabkan oleh AJAX tradisional, HTML5 memperkuat API sejarah, tambah pushstate, antarmuka pengganti dan peristiwa popstate. Saya tidak akan memperkenalkannya secara detail di sini. Siswa yang tidak memiliki pengetahuan ini merekomendasikan agar Anda melihat informasi yang relevan terlebih dahulu.
Plugin PJAX merangkum operasi PushState dan AJAX, memberi kami metode sederhana untuk mengembangkan aplikasi web tersebut. Langkah -langkah spesifiknya adalah sebagai berikut:
Tentukan wadah yang membutuhkan pembaruan lokal
<Div id = "container"> </div>
Inisialisasi PJAX dan dengarkan URL
Salinan kode adalah sebagai berikut:
$ (function () {
// pjax
$ (dokumen) .pjax ('a', '#container');
$ .pjax.reload ('#container');
})
Backend menangani permintaan PJAX
Logika pemrosesan backend adalah terlebih dahulu menentukan apakah itu permintaan PJAX. Jika demikian, kembalikan konten lokal sesuai dengan parameter permintaan, jika tidak kembalikan tata letak, dan kemudian inisiasi permintaan PJAX dengan `$ .pjax.reload ('#container');`. Menurut logika di atas, kode berikut dapat ditulis:
Salinan kode adalah sebagai berikut:
var pjaxfilter = function (req, res, next) {
if (req.get ('x-pjax')) {
Berikutnya();
kembali;
}
// Jika itu bukan permintaan PJAX, kembalikan ke template tata letak secara langsung
res.render ('tata letak', {judul: 'demo sederhana pjax'});
};
router.get ('/', pjaxfilter, function (req, res) {
res.render ('index');
});
router.get ('/puisi/: id', pjaxfilter, function (req, res) {
var poemid = req.params.id;
res.render ('puisi/' + puemid);
})
Kode Lengkap: PJAX-Demo
Ini hanyalah fungsi paling dasar dari PJAX. PJAX menyediakan API yang kaya, silakan kunjungi: jQuery-pjax