الفرق بين المراجعتين ل"jQuery/ajaxSuccess"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
(أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:التابع <code>‎‎.ajaxSuccess()‎‎</code>‎ في jQuery}}</noinclude>')
 
سطر 1: سطر 1:
 
<noinclude>{{DISPLAYTITLE:التابع <code>‎‎.ajaxSuccess()‎‎</code>‎ في jQuery}}</noinclude>
 
<noinclude>{{DISPLAYTITLE:التابع <code>‎‎.ajaxSuccess()‎‎</code>‎ في jQuery}}</noinclude>
 +
 +
== <code>‎.ajaxSuccess( handler )‎</code> ==
 +
 +
=== القيمة المعادة ===
 +
كائن [[jQuery/jQuery|jQuery]].
 +
 +
=== الوصف ===
 +
يُستخدَم التابع <code>‎.ajaxSuccess()</code>‎ لإرفاق دالة لتنفيذها عند اكتمال تنفيذ طلب Ajax، يُعدُّ هذا التّابع حدثًا من [[jQuery/Ajax Events|أحداث Ajax]].
 +
 +
=== <code>‎.ajaxSuccess( handler )‎</code> ===
 +
أضيفت في الإصدار: 1.0.
 +
 +
==== <code>handler</code> ====
 +
دالة على الشكل [[JavaScript/Function|‎<code>Function</code>]]<code>( [[JavaScript/Event|Event]] event, [[JavaScript/jqXHR|jqXHR]] jqXHR, [[JavaScript/Object|PlainObject]] ajaxOptions, [[JavaScript/Object|PlainObject]] data )</code>‎، وهي الدالة المطلوب استدعاؤها.
 +
 +
عندما يكتمل تنفيذ طلب Ajax، تُطلِق jQuery الحدث <code>ajaxSuccess</code>، وتُنفَّذ عندها كافّة مُعالجات الأحداث المُسجَّلة مع التّابع <code>‎.ajaxSuccess()</code>‎.
 +
 +
لمشاهدة مثال عملي عن هذا التّابع نُجهِّز طلب بسيط لتحميل Ajax:<syntaxhighlight lang="html">
 +
<button class="trigger">إطلاق مُعالِج الحدث</button>
 +
<div class="result"></div> <!--تُعرَض هنا النتيجة-->
 +
<div class="log"></div> <!--تُعرَض هنا رسالة السّجل-->
 +
 +
</syntaxhighlight>أرفِق مُعالِج الحدث (event handler) إلى أي عنصر:<syntaxhighlight lang="javascript">
 +
$(document).ajaxSuccess(function() {
 +
 $( ".log" ).text( ".‏ajaxSuccess‏أُطلِق مُعالِج الحدث ‏" );
 +
});
 +
 +
 +
</syntaxhighlight>نفذ الآن طلب Ajax باستخدام أي تابع jQuery:<syntaxhighlight lang="javascript">
 +
$( ".trigger" ).on( "click", function() {
 +
 $( ".result" ).load( "ajax/test.html" );
 +
});
 +
 +
 +
</syntaxhighlight>عندما يضغط المستخدم على العنصر الذي يمتلك الصنف <code>trigger</code> ويكتمل تنفيذ طلب Ajax، ستُعرَض رسالة السّجل.
 +
 +
تُستدعَى كافة مُعالِجات الحدث <code>ajaxSuccess</code> قبل إرسال أي طلب Ajax، إن كنت تريد التفريق بين الطلبات فاستخدم الممررة لمُعالِج الأحداث، ففي كل مرة يُنفَّذ فيها مُعالِج الحدث <code>ajaxSuccess</code> يُمرِّر كائن الحدث، والكائن <code>XMLHttpRequest</code>، وكائن الإعدادات الذي استخدم في إنشاء الطلب. بإمكاننا على سبيل المثال حصر الاستدعاء فقط من أجل الأحداث التي تتعامل مع روابط معينة:<syntaxhighlight lang="javascript">
 +
$( document ).ajaxSuccess(function( event, xhr, settings ) {
 +
 if ( settings.url == "ajax/test.html" ) {
 +
   $( ".log" ).text( "أُطلِق مُعالِج الحدث ajaxSuccess. كانت استجابة Ajax هي‏" +
 +
     xhr.responseText );
 +
 }
 +
});
 +
 +
 +
</syntaxhighlight>'''ملاحظة:''' بإمكاننا الحصول على محتوى Ajax المعاد عن طريق <code>xhr.responseXML</code> أو <code>xhr.responseText</code> وذلك من أجل xml و html على التوالي وبالترتيب.
 +
 +
=== ملاحظات إضافية ===
 +
بدءًا من إصدار jQuery 1.9 أصبح إرفاق مُعالِجات الأحداث لأحداث Ajax العامة (jQuery global Ajax events) بالمستند إجباريًّا، بما في ذلك مُعالِجات الأحداث المُضافة عن طريق التّابع <code>‎.ajaxSuccess()‎</code>.
 +
 +
إن استدعينا التابع ‎<code>[[JQuery/jQuery/ajax|$.ajax()]]</code>‎ أو ‎<code>[[JQuery/jQuery/ajaxSetup|$.ajaxSetup()]]</code>‎ مع تعيين الخيار <code>global</code> إلى القيمة <code>false</code>، فلن يُنفَّذ التّابع <code>‎.ajaxSuccess()</code>‎.
 +
 +
=== أمثلة ===
 +
إظهار رسالة عند اكتمال تنفيذ طلب Ajax:<syntaxhighlight lang="javascript">
 +
$( document ).ajaxSuccess(function( event, request, settings ) {
 +
 $( "#msg" ).append( "<li>طلب ناجح!</li>" );
 +
});
 +
 +
 +
</syntaxhighlight>
 +
 +
== مصادر ==
 +
* [http://api.jquery.com/ajaxSuccess/ صفحة التابع ‎‎‎.ajaxSuccess()‎‎ في توثيق jQuery الرسمي].
 +
[[تصنيف:jQuery]]
 +
[[تصنيف:jQuery Method]]
 +
[[تصنيف:jQuery Ajax]]

مراجعة 16:03، 9 مايو 2018


‎.ajaxSuccess( handler )‎

القيمة المعادة

كائن jQuery.

الوصف

يُستخدَم التابع ‎.ajaxSuccess()‎ لإرفاق دالة لتنفيذها عند اكتمال تنفيذ طلب Ajax، يُعدُّ هذا التّابع حدثًا من أحداث Ajax.

‎.ajaxSuccess( handler )‎

أضيفت في الإصدار: 1.0.

handler

دالة على الشكل Function( Event event, jqXHR jqXHR, PlainObject ajaxOptions, PlainObject data )‎، وهي الدالة المطلوب استدعاؤها.

عندما يكتمل تنفيذ طلب Ajax، تُطلِق jQuery الحدث ajaxSuccess، وتُنفَّذ عندها كافّة مُعالجات الأحداث المُسجَّلة مع التّابع ‎.ajaxSuccess()‎.

لمشاهدة مثال عملي عن هذا التّابع نُجهِّز طلب بسيط لتحميل Ajax:

<button class="trigger">إطلاق مُعالِج الحدث</button>
<div class="result"></div> <!--تُعرَض هنا النتيجة-->
<div class="log"></div> <!--تُعرَض هنا رسالة السّجل-->

أرفِق مُعالِج الحدث (event handler) إلى أي عنصر:

$(document).ajaxSuccess(function() {
 $( ".log" ).text( ".‏ajaxSuccess‏أُطلِق مُعالِج الحدث ‏" );
});

نفذ الآن طلب Ajax باستخدام أي تابع jQuery:

$( ".trigger" ).on( "click", function() {
 $( ".result" ).load( "ajax/test.html" );
});

عندما يضغط المستخدم على العنصر الذي يمتلك الصنف trigger ويكتمل تنفيذ طلب Ajax، ستُعرَض رسالة السّجل. تُستدعَى كافة مُعالِجات الحدث ajaxSuccess قبل إرسال أي طلب Ajax، إن كنت تريد التفريق بين الطلبات فاستخدم الممررة لمُعالِج الأحداث، ففي كل مرة يُنفَّذ فيها مُعالِج الحدث ajaxSuccess يُمرِّر كائن الحدث، والكائن XMLHttpRequest، وكائن الإعدادات الذي استخدم في إنشاء الطلب. بإمكاننا على سبيل المثال حصر الاستدعاء فقط من أجل الأحداث التي تتعامل مع روابط معينة:

$( document ).ajaxSuccess(function( event, xhr, settings ) {
 if ( settings.url == "ajax/test.html" ) {
   $( ".log" ).text( "أُطلِق مُعالِج الحدث ajaxSuccess. كانت استجابة Ajax هي‏" +
     xhr.responseText );
 }
});

ملاحظة: بإمكاننا الحصول على محتوى Ajax المعاد عن طريق xhr.responseXML أو xhr.responseText وذلك من أجل xml و html على التوالي وبالترتيب.

ملاحظات إضافية

بدءًا من إصدار jQuery 1.9 أصبح إرفاق مُعالِجات الأحداث لأحداث Ajax العامة (jQuery global Ajax events) بالمستند إجباريًّا، بما في ذلك مُعالِجات الأحداث المُضافة عن طريق التّابع ‎.ajaxSuccess()‎.

إن استدعينا التابع ‎$.ajax()‎ أو ‎$.ajaxSetup()‎ مع تعيين الخيار global إلى القيمة false، فلن يُنفَّذ التّابع ‎.ajaxSuccess()‎.

أمثلة

إظهار رسالة عند اكتمال تنفيذ طلب Ajax:

$( document ).ajaxSuccess(function( event, request, settings ) {
 $( "#msg" ).append( "<li>طلب ناجح!</li>" );
});

مصادر