pjax.js

بيجاكس اتوماتيك

Pjax.js هو برنامج نصي لبرنامج jQuery يستخدم ajax و pushState ويكتشف الروابط والنماذج تلقائيًا، لتكوين الصفحة تحتاج إلى استخدام id="pjax-container" في جميع الصفحات، على سبيل المثال:

 < div id =" pjax-container " >
    ...
</ div >

يقوم Pjax بتحميل كل المحتوى من الصفحات، لكنه يستخدم محتويات العنصر الأول فقط باستخدام pjax-container ، إذا لم تكن بحاجة إلى Pjax في رابط أو نموذج محدد، فاستخدم سمة data-pjax-ignore ، على سبيل المثال:

 < p >
    Hello world!
    Example < a data-pjax-ignore href =" /page.html " > page </ a > .
</ p >

يثبت

تضمين ليب

 < link rel =" stylesheet " type =" text/css " href =" pjax.min.css " data-pjax-resource =" true " >
< script src =" pjax.min.js " > </ script >

أو استخدم CDN:

 < link rel =" stylesheet " type =" text/css " href =" https://cdn.jsdelivr.net/npm/[email protected]/pjax.min.css " data-pjax-resource =" true " >
< script src =" https://cdn.jsdelivr.net/npm/[email protected]/pjax.min.js " > </ script >

ملاحظة: CSS اختياري، يمكنك إنشاء المُحمل الخاص بك أو تخصيص البنية التالية باستخدام CSS (يتم إنشاء البنية بواسطة Pjax.js):

 < div class =" pjax-loader pjax-start pjax-inload pjax-end pjax-hide " >
    < div class =" pjax-progress " > </ div >
</ div >

يستورد:

 const Pjax = require ( 'pjax.js' ) ;

...

استيراد ESM/ES6:

 import Pjax from 'pjax.js' ;

...

يتطلبJS:

 requirejs ( [ 'folder/foo/bar/pjax' ] , function ( Pjax ) {
    ...
} ) ; 

يدعم

يدعم pjax.js الروابط والنماذج باستخدام الطريقة GET والنماذج باستخدام الطريقة POST وملفات الدعم والملفات المتعددة ( <input type="file" multiple> ).

متطلبات:

• DOMParser أو document.implementation
• pushState و replaceState و popstate (معالجة محفوظات DOM)
• FormData (XMLHttpRequest المستوى 2) - إذا كنت بحاجة إلى تحميل الملفات باستخدام PJAX ( enctype="multipart/form-data" )

تم اختباره في:

• إنترنت إكسبلورر 10
• فايرفوكس
• جوجل كروم
• دائرة الرقابة الداخلية 10
• أندرويد 2.3+

الاستخدام

للاستخدام:

 Pjax . start ( ) ; 

واجهة برمجة تطبيقات بيجاكس

طريقة	وصف
Pjax.supported	يُرجع true إذا كان يدعم هذا lib، وإلا يُرجع false
Pjax.remove();	إزالة طلبات وأحداث PJAX
Pjax.on(event, function (...) {...});	تحديد حدث
Pjax.off(event, function (...) {...});	إزالة حدث
Pjax.request(url[, config])	الطلب باستخدام البرنامج النصي

طريقة Pjax.request()

معلمة config اختيارية، يمكنك تحديدها على النحو التالي:

 Pjax.request("/foo/bar", {
    method: "POST",
    replace: true,
    data: "foo=1&bar=2&baz=3"
});

تحميل الملف:

 const formdata = new FormData;
const blob = new Blob(["Hello World!"], {
  type: "text/plain"
});

formdata.append("file", blob, "hello.txt");

Pjax.request("/foo/bar", {
    method: "POST",
    replace: true,
    data: formdata
});

تفاصيل data: :

ملكية	يكتب	تقصير	وصف
replace:	bool	false	يضبط وضع حالة السجل، إذا قمت بتعيينه على false (أو تم حذفه) فسوف يستخدم history.pushState() ، ولكن إذا قمت بتعيينه على true فسوف يستخدم history.replaceState() .
method:	string	GET	تحديد طريقة HTTP
data:	bool	false	لإرسال البيانات في الطلب، يمكنك استخدام String أو FormData

أحداث بيجاكس

مثال	وصف
Pjax.on("initiate", function (url, config) {...});	يتم تشغيله عند النقر فوق رابط أو إرسال نموذج أو تنفيذ طريقة Pjax.request()
Pjax.on("done", function (url, status) {...});	يتم تشغيله عند تحميل الصفحة، وترجع status رمز HTTP
Pjax.on("fail", function (url, status) {...});	يتم تشغيله عند فشل تحميل الصفحة، وترجع status رمز HTTP
Pjax.on("then", function (url) {...});	يتم تنفيذه في كل مرة يتم فيها إكمال الطلب، حتى لو فشل أو نجح
Pjax.on("history", function (url, stateData) {...});	ينفذ كل استخدام للخلف أو للأمام
Pjax.on("handler", function (data, config, callbackDone, callbackFail) {...});	قم بإنشاء استجابة المالك لطلب Pjax.js
Pjax.on("dom", function (url, newdocument) {...});	يسمح لك بمعالجة تغيير العنصر يدويًا، على سبيل المثال، يمكنك إنشاء انتقالات أو تغيير مستند جديد

نصيحة: يمكنك استخدام Pjax.on("dom", ...); لإزالة الأحداث في DOM

تكوينات بيجاكس

ملكية	يكتب	تقصير	وصف
containers:	array	[ "#pjax-container" ]	يعلم العناصر التي سيتم تحديثها على الصفحة
updatecurrent:	bool	false	إذا تم تنفيذ نفس عنوان URL للطلب true المستخدم في الصفحة الحالية، history.replaceState ، وإلا فلن يتم تنفيذ أي شيء
updatehead:	bool	true	يحتوي "pjax.js" على نظام تحديث ذكي يساعد على تجنب تأثير "الوميض"، لأنه بدلاً من تحديث كل شيء، يقوم فقط بتحديث ما تم تغييره، ولكن إذا كنت متأكدًا من أنه لن يتغير شيء أثناء صفحتك، فيمكنك ضبطه إلى خطأ، فإن العلامة الوحيدة التي سيستمر تحديثها هي علامة <title>
insertion:	string	undefined	قيم الدعم append prepend ، إذا تم حذفها فسوف تحل محل المحتوى
scrollLeft:	number	0	بعد تحميل الصفحة عبر PJAX، يمكنك تحديد المكان الذي يجب أن يتم التمرير فيه لليسار. اضبط -1 لتعطيل التمرير التلقائي في x-cord
scrollTop:	number	0	بعد تحميل الصفحة عبر PJAX، يمكنك تحديد المكان الذي يجب أن يتم التمرير فيه. اضبط -1 لتعطيل التمرير التلقائي في الحبل y
loader:	bool	true	يضيف محمل Pjax الأصلي، إذا كنت تريد إنشاء محمل خاص بك، فاضبطه على false
nocache:	bool	false	منع ذاكرة التخزين المؤقت
proxy:	string	""	تعيين وكيل الويب
formSelector:	string	form:not([data-pjax-ignore]):not([action^='javascript:'])	قم بتعيين محدد النموذج، وقم بتعيينه فارغًا لمنع استخدام النماذج Pjax
linkSelector:	string	a:not([data-pjax-ignore]):not([href^='#']):not([href^='javascript:'])	قم بتعيين محدد النموذج، وقم بتعيينه فارغًا لمنع الروابط التي تستخدم Pjax
headers:	object	إضافة رؤوس مخصصة، على سبيل المثال: { "foo": "bar", "test": "baz" }

PJAX مع سمة بيانات HTML5

إذا لزم الأمر، يمكنك استبدال خصائص رابط أو نموذج محدد باستخدام سمات HTML:

ملكية	مقابل	مثال	وصف
data-pjax-containers	containers:	<a href="..." data-pjax-containers="[ &quot;#foo&quot;, &quot;#bar&quot;, &quot;#baz&quot; ]"	ضبط الحاويات عندما يأتي الطلب من نموذج أو رابط محدد
data-pjax-updatehead	updatehead:	<a href="..." data-pjax-updatehead="false"	السماح/عدم السماح بتحديث علامة الرأس عندما يأتي الطلب من نموذج أو رابط محدد
data-pjax-insertion	insertion	<a href="..." data-pjax-insertion="append"	قم بإلحاق البيانات بالحاويات أو إضافتها مسبقًا بدلاً من التحديث
data-pjax-scroll-left	scrollLeft:	<form action="..." data-pjax-scroll-left="10"	التمرير المخصص لليسار إلى نموذج أو رابط محدد
data-pjax-scroll-top	scrollTop:	<form action="..." data-pjax-scroll-top="-1"	قم بالتمرير لأعلى إلى نموذج أو رابط محدد
data-pjax-loader	loader:	<a href="..." data-pjax-loader="false"	السماح/عدم السماح لمحمل الرسوم المتحركة بنموذج أو رابط محدد
data-pjax-done	-	<a href="..." data-pjax-done="console.log('success', this);"	حدث "تم" مخصص لنموذج أو رابط محدد
data-pjax-fail	-	<a href="..." data-pjax-fail="console.log('error', this);"	حدث "خطأ" مخصص لنموذج أو رابط محدد
data-pjax-ignore	-	<a href="..." data-pjax-ignore="true">	التنقل العادي إلى نموذج أو رابط محدد
data-pjax-resource	-	<link href="..." data-pjax-resource="true">	منع إزالة العنصر بعد تحديث DOM (في الوقت الحالي يعمل فقط في <head> )

لتغيير التكوينات استخدم مثل هذا:

 Pjax . start ( {
    containers : [ "#my-container" ] , //Change container element
    scrollLeft : - 1 , //Disable autoscroll
    scrollTop : - 1 //Disable autoscroll
} ) ; 

تحديث عنصرين (أو أكثر)

يمكنك تغيير العنصر الذي تريد تحديثه أو حتى إضافة المزيد من العناصر، على سبيل المثال:

 < div id =" navbar " >
    ...
</ div >
< div id =" my-container " >
    ...
</ div >
< script >
Pjax . start ( {
    containers : [ "#navbar" , "#my-container" ] //Change containers element
} ) ;
</ script >

يمكنك تغيير التكوينات في initiate الحدث، على سبيل المثال:

 < div id =" pjax-container " >
    < div id =" filter " >
        < form >
            ...
        </ form >
    </ div >
    < div id =" search-container " >
        ...
    </ div >
</ div >
< script >
Pjax . start ( ) ;

Pjax . on ( "initiate" , function ( url , configs ) {
    if ( url . indexOf ( "/search/" ) === 0 && window . location . href . indexOf ( "/search/" ) === 0 ) {
        configs . containers = [ "#search-container" ] ;
    }
} ) ;
</ script >

إذا كنت في صفحة بحث عن منتج وتقوم بإجراء بحث جديد بدلاً من تحديث الحاوية بأكملها، فسوف يتم تحديث العنصر الذي توجد به المنتجات فقط، وستستمر الصفحات الأخرى في تحديث الحاوية بأكملها.

Pjax في جانب الخادم

من الممكن اكتشاف ما إذا كان الطلب قد جاء من PJAX باستخدام رؤوس الطلب:

رأس	وصف
X-PJAX	يشير إلى أنه تم طلب الصفحة عبر PJAX
X-PJAX-Container	إبلاغ محددات الحاوية المستخدمة

مثال باستخدام PHP:

 if ( isset ( $ _SERVER [ ' HTTP_X_PJAX ' ])) {
    echo ' You using pjax ' ;
}

إعادة التوجيه باستخدام PJAX

يمكنك استخدام رأس استجابة HTTP X-PJAX-URL في الواجهة الخلفية لعمليات إعادة التوجيه القسرية لـ Pjax.js، على سبيل المثال:

 header ( ' X-PJAX-URL: /new-page.html ' );

. . . 

تغيير أو إضافة حاوية باستخدام PJAX

يمكنك استخدام رأس استجابة HTTP X-PJAX-URL في الواجهة الخلفية لفرض عمليات إعادة توجيه Pjax.js، على سبيل المثال:

 if ( isset ( $ _SERVER [ ' HTTP_X_PJAX ' ])) {
    header ( ' X-PJAX-Container: #foo,#bar ' );

    echo ' <div id="foo"> ... </div> ' ;

    echo ' <div id="bar"> ... </div> ' ;
}

محمل مخصص مع Pjax

يمكنك تخصيص CSS، على سبيل المثال تغيير اللون والحجم، ووضع ملف CSS جديد أو علامة <style> :

. pjax-loader . pjax-progress {
    height : 6 px ;
    background-color : blue;
}

إذا كنت بحاجة إلى "المزيد" مخصص، فقم أولاً بإزالة المُحمل الافتراضي:

 Pjax . start ( {
    loader : false
} ) ;

وبعد الاستخدام initiate then الأحداث:

 Pjax . on ( "initiate" , function ( ) {
    $ ( ".my-custom-loader" ) . css ( "display" , "block" ) ;
} ) ;

Pjax . on ( "then" , function ( ) {
    $ ( ".my-custom-loader" ) . css ( "display" , "none" ) ;
} ) ;

HTML:

 < div class =" my-custom-loader " >
    < img src =" loader.gif " >
</ div > 

استجابة معالج Pjax

لإنشاء استجابات مخصصة لـ Pjax، يمكنك استخدام حدث handler ، على سبيل المثال:

 Pjax . start ( ) ;

Pjax . on ( "handler" , function ( details , done , fail ) {
    console . log ( "handler request:" , details . method , details . url ) ;
    console . log ( "handler target:" , details . element ) ;
    console . log ( "handler mode history:" , details . state ) ; // 1 == push, 2 == replace

    setTimeout ( function ( ) {
        if ( < condition for history state > ) {
            done ( '<div id="pjax-container">Foo: ' + new Date ( ) + '</div>' ) ;
        } else {
            fail ( "Custom Error" ) ;
        }
    } , 1000 ) ;
} ) ;