نعلم جميعًا أن Ajax يجلب القدرة على التحميل بشكل غير متزامن إلى المتصفح ، وتحسين تجربة المستخدم في التحقق من البيانات ، والتحديث المحلي ، وما إلى ذلك ، ولكن في نفس الوقت هناك المشكلات التالية:
1. يمكنك تغيير محتوى الصفحة دون تحديث ، ولكن لا يمكنك تغيير عنوان URL للصفحة
2. لا يمكن طريقة التجزئة التعامل مع المتصفح إلى الأمام والخلف والمشاكل الأخرى
من أجل حل المشكلات الناجمة عن Ajax التقليدية ، يعزز HTML5 واجهة برمجة تطبيقات التاريخ ، ويضيف Pushstate ، وواجهة الاستبدال وأحداث البوبستات. لن أقدمها بالتفصيل هنا. يوصي الطلاب الذين ليس لديهم هذه المعرفة بأن تنظر إلى المعلومات ذات الصلة أولاً.
يلف المكون الإضافي PJAX عمليات PushState و AJAX ، مما يوفر لنا طريقة بسيطة لتطوير تطبيقات الويب هذه. الخطوات المحددة هي كما يلي:
تحديد الحاويات التي تتطلب تحديثات محلية
<div id = "container"> </viv>
تهيئة Pjax واستمع إلى عنوان URL
نسخة الكود كما يلي:
$ (function () {
// Pjax
$ (document) .pjax ('a' ، '#container') ؛
$ .pjax.reload ('#Container') ؛
})
يعالج الواجهة الخلفية طلبات Pjax
يتمثل منطق معالجة الواجهة الخلفية أولاً في تحديد ما إذا كان طلب PJAX. إذا كان الأمر كذلك ، فأرفض المحتوى المحلي وفقًا لمعلمات الطلب ، وإعادة التخطيط وإلا ، ثم قم ببدء طلب PJAX بواسطة `$ .pjax.reload ('#Container') ؛`. وفقًا للمنطق أعلاه ، يمكن كتابة الرمز التالي:
نسخة الكود كما يلي:
var pjaxfilter = function (req ، res ، next) {
if (req.get ('x-pjax')) {
التالي()؛
يعود؛
}
// إذا لم يكن طلب PJAX ، فأعود إلى قالب التصميم مباشرة
Res.Render ('Layout' ، {title: 'pjax simple demo'}) ؛
} ؛
Router.get ('/' ، pjaxfilter ، function (req ، res) {
Res.Render ('index') ؛
}) ؛
Router.get ('/Poem/: id' ، pjaxfilter ، function (req ، res) {
var poemid = req.params.id ؛
res.Render ('قصيدة/' + poemid) ؛
})
الكود الكامل: Pjax-Demo
هذه مجرد وظيفة أساسية من PJAX. Pjax يوفر واجهات برمجة التطبيقات الغنية ، يرجى زيارة: jQuery-Pjax