الفرق بين المراجعتين لصفحة: «jQuery/load»

من موسوعة حسوب
مرئينص الويكي
إضافة محتويات الصفحة.
 
 
(مراجعتان متوسطتان بواسطة مستخدمين اثنين آخرين غير معروضتين)
سطر 3: سطر 3:


=== القيم المعادة ===
=== القيم المعادة ===
يعيد كائنًا من النوع jQuery.
يعيد كائنًا من النوع [[jQuery/jQuery|jQuery]].


=== الوصف ===
=== الوصف ===
سطر 22: سطر 22:
'''ملاحظة''': قبل الإصدار jQuery 3.0، كان لدى مجموعة معالجة الحدث تابع أيضًا يدعى ‎<code>.load()</code>‎. تحدِّد إصدارات jQuery القديمة أي دالة يجب اطلاقها اعتمادًا على مجموعة المعاملات الممرَّرة إليها.
'''ملاحظة''': قبل الإصدار jQuery 3.0، كان لدى مجموعة معالجة الحدث تابع أيضًا يدعى ‎<code>.load()</code>‎. تحدِّد إصدارات jQuery القديمة أي دالة يجب اطلاقها اعتمادًا على مجموعة المعاملات الممرَّرة إليها.


هذه الدالة هي أبسطة طريقة لجلب البيانات من الخادم. تشبه إلى حد ما ‎<code>$.get(url, data, success)</code>‎ باستثناء أنَّه تابع وليس دالة عامة ولديه دالة رد نداء مضمَّنة. عندما يُكشتف رد ناجح (مثل أن يكون textStatus هو "success" أو "notmodified")، فإن التابع ‎<code>.load()</code>‎ يضع البيانات المعادة في محتوى [[HTML]] للعنصر المتطابق. هذا يعني أنه أغلب استخدامات هذا التابع يمكن تبسيطها بالشكل:<syntaxhighlight lang="javascript">
هذه الدالة هي أبسطة طريقة لجلب البيانات من الخادم. تشبه إلى حد ما ‎<code>$.get(url, data, success)</code>‎ باستثناء أنَّه تابع وليس دالة عامة ولديه دالة رد نداء مضمَّنة. عندما يُكشتف رد ناجح (مثل أن يكون <code>textStatus</code> هو <code>"success"</code> أو <code>"notmodified"</code>)، فإن التابع ‎<code>.load()</code>‎ يضع البيانات المعادة في محتوى [[HTML]] للعنصر المتطابق. هذا يعني أنه أغلب استخدامات هذا التابع يمكن تبسيطها بالشكل:<syntaxhighlight lang="javascript">
$( "#result" ).load( "ajax/test.html" );
$( "#result" ).load( "ajax/test.html" );
</syntaxhighlight>إن لم يطابق المحدد أي عنصر (أي إن لم يكن هنالك عنصر في الصفحة ذي المعرف "result")، فلن يُرسل الطلب Ajax.
</syntaxhighlight>إن لم يطابق المحدد أي عنصر (أي إن لم يكن هنالك عنصر في الصفحة ذي المعرف "result")، فلن يُرسل الطلب Ajax.


=== دالة رد النداء (Callback) ===
=== دالة رد النداء (Callback) ===
إن زُود رد النداء "complete"، فسينفذ بعد إنجاز عملية الإرسال باستعمال POST وادراج محتوى [[HTML]]. ستستدعى دالة رد النداء مرةً لكل عنصر في مجموعة jQuery، وستشير <code>this</code> إلى كل عنصر DOM.<syntaxhighlight lang="javascript">
إن زُود رد النداء <code>"complete"</code>، فسينفذ بعد إنجاز عملية الإرسال باستعمال POST وادراج محتوى [[HTML]]. ستستدعى دالة رد النداء مرةً لكل عنصر في مجموعة jQuery، وسيشير <code>[[JavaScript/this|this]]</code> إلى كل عنصر DOM.<syntaxhighlight lang="javascript">
$( "#result" ).load( "ajax/test.html", function() {
$( "#result" ).load( "ajax/test.html", function() {
 alert( "Load was performed." );
  alert( "اكتملت عملية التحميل" );
});
});
</syntaxhighlight>في كلا المثالين السابقين، إن لم تحتوي الصفحة الحالية على عنصر ذي المعرف "result"، فلن يُنفذ التابع ‎<code>.load()</code>‎.
</syntaxhighlight>في كلا المثالين السابقين، إن لم تحتوي الصفحة الحالية على عنصر ذي المعرف "result"، فلن يُنفذ التابع ‎<code>.load()</code>‎.
سطر 36: سطر 36:
سيُستعمل التابع POST إن مُرِّرت البيانات إلى المعامل <code>data</code> على أنَّها كائن. خلا ذلك، سيُستعمل التابع GET.
سيُستعمل التابع POST إن مُرِّرت البيانات إلى المعامل <code>data</code> على أنَّها كائن. خلا ذلك، سيُستعمل التابع GET.


=== تحميل أجزاء الصفحة (Loading Page Fragments) ===
=== تحميل أجزاء من الصفحة (Loading Page Fragments) ===
يسمح لنا التابع <code>‎.load()‎</code>، خلافًا للتابع ‎<code>[[juery/get|$.get()]]</code>‎، بتحديد جزء الصفحة البعيدة المطلوب إدراجه، وهذا يتحقق باستعمال صياغة مخصصة للمعامل <code>url</code>. إن أضيف محرف المسافة مرة واحدة أو أكثر في السلسلة النصية للمعامل <code>url</code>، فالجزء الذي يلي أول مسافة يُمثل محدد jQuery الذي يحدد المحتوى المطلوب تحميله.
يسمح لنا التابع <code>‎.load()‎</code>، خلافًا للتابع ‎<code>[[jQuery/jQuery/get|$.get()]]</code>‎، بتحديد جزء الصفحة البعيدة المطلوب إدراجه، وهذا يتحقق باستعمال صياغة مخصصة للمعامل <code>url</code>. إن أضيف محرف المسافة مرة واحدة أو أكثر في السلسلة النصية للمعامل <code>url</code>، فالجزء الذي يلي أول مسافة يُمثل محدد jQuery الذي يحدد المحتوى المطلوب تحميله.


سنعدِّل على المثال السابق لإعادة جزء من الصفحة فقط بدلًا من إعادتها كلها:<syntaxhighlight lang="javascript">
سنعدِّل على المثال السابق لإعادة جزء من الصفحة فقط بدلًا من إعادتها كلها:<syntaxhighlight lang="javascript">
سطر 60: سطر 60:
تحميل عناصر قائمة لصفحة أخرى وإدراجها ضمن قائمة مرتبة:<syntaxhighlight lang="html">
تحميل عناصر قائمة لصفحة أخرى وإدراجها ضمن قائمة مرتبة:<syntaxhighlight lang="html">
<!doctype html>
<!doctype html>
<html lang="en">
<html lang="ar">
<head>
<head>
   <meta charset="utf-8">
   <meta charset="utf-8">
   <title>load demo</title>
   <title>load مثالٌ عن استعمال التابع</title>
   <style>
   <style>
   body {
   body {
سطر 74: سطر 74:
<body>
<body>
   
   
<b>Projects:</b>
<b>المشاريع:</b>
<ol id="new-projects"></ol>
<ol id="new-projects"></ol>
   
   
سطر 86: سطر 86:
</syntaxhighlight>إظهار تنبيه إذا واجه طلب "Ajax" خطأً ما:<syntaxhighlight lang="html">
</syntaxhighlight>إظهار تنبيه إذا واجه طلب "Ajax" خطأً ما:<syntaxhighlight lang="html">
<!doctype html>
<!doctype html>
<html lang="en">
<html lang="ar">
<head>
<head>
   <meta charset="utf-8">
   <meta charset="utf-8">
   <title>load demo</title>
   <title>load مثالٌ عن استعمال التابع</title>
   <style>
   <style>
   body {
   body {
سطر 100: سطر 100:
<body>
<body>
   
   
<b>Successful Response (should be blank):</b>
<b>ردٌ ناجح (يجب أن يكون فارغًا):</b>
<div id="success"></div>
<div id="success"></div>
<b>Error Response:</b>
<b>ردٌ خطأ:</b>
<div id="error"></div>
<div id="error"></div>
   
   
سطر 108: سطر 108:
$( "#success" ).load( "/not-here.php", function( response, status, xhr ) {
$( "#success" ).load( "/not-here.php", function( response, status, xhr ) {
   if ( status == "error" ) {
   if ( status == "error" ) {
     var msg = "Sorry but there was an error: ";
     var msg = "نتأسف جدًا، إذ يوجد خطأ: ";
     $( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
     $( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
   }
   }
سطر 120: سطر 120:
$( "#feeds" ).load( "feeds.html" );
$( "#feeds" ).load( "feeds.html" );
</syntaxhighlight>النتيجة ستكون:<syntaxhighlight lang="html">
</syntaxhighlight>النتيجة ستكون:<syntaxhighlight lang="html">
<div id="feeds"><b>45</b> feeds found.</div>
<div id="feeds"><b>45</b> تمت عملية التحميل بنجاح</div>
 
</syntaxhighlight>تمرير مصفوفة من البيانات إلى الخادم:<syntaxhighlight lang="javascript">
</syntaxhighlight>تمرير مصفوفة من البيانات إلى الخادم:<syntaxhighlight lang="javascript">
$( "#objectID" ).load( "test.php", { "choices[]": [ "Jon", "Susan" ] } );
$( "#objectID" ).load( "test.php", { "choices[]": [ "أحمد", "ليلى" ] } );
 
</syntaxhighlight>مثال مشابه للمثال السابق ولكن المعاملات الإضافية ستُرسل باستعمال POST إلى الخادم وسيُنفذ رد النداء عندما ينتهي الخادم من استلام الطلب:<syntaxhighlight lang="javascript">
</syntaxhighlight>مثال مشابه للمثال السابق ولكن المعاملات الإضافية ستُرسل باستعمال POST إلى الخادم وسيُنفذ رد النداء عندما ينتهي الخادم من استلام الطلب:<syntaxhighlight lang="javascript">
$( "#feeds" ).load( "feeds.php", { limit: 25 }, function() {
$( "#feeds" ).load( "feeds.php", { limit: 25 }, function() {
 alert( "The last 25 entries in the feed have been loaded" );
  alert( "اكتمل تحميل 25 من المدخلات الأخيرة" );
});
});
</syntaxhighlight>
</syntaxhighlight>


== مصادر ==
== مصادر ==
* [http://api.jquery.com/load/ صفحة التابع ‎‎.load()‎ في توثيق jQuery الرسمي.]
* [http://api.jquery.com/load/ صفحة التابع ‎‎.load()‎ في توثيق jQuery الرسمي.]
[[تصنيف:jQuery]]
[[تصنيف:jQuery]]
[[تصنيف:jQuery Ajax]]
[[تصنيف:jQuery Ajax]]

المراجعة الحالية بتاريخ 13:28، 1 يوليو 2018

‎.load( url [, data ] [, complete ] )‎

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

يعيد كائنًا من النوع jQuery.

الوصف

يحمِّل هذا التابع البيانات من الخادم ثمَّ يضع محتوى HTML المُعاد في العنصر المتطابق.

‎.load( url [, data ] [, complete ] )‎

أُضيف مع الإصدار: 1.0.

url

سلسلة نصية تمثل الرابط URL الذي سيُرسل إليه الطلب.

data

كائن مجرد (Object) أو سلسلة نصية يُراد إرسالها إلى الخادم مع الطلب.

complete

دالة من الشكل Function( String responseText, String textStatus, jqXHR jqXHR )‎، وتمثِّل دالة ردِّ النداء التي ستُنفَّذ عند اكتمال إرسال الطلب.

ملاحظة: قبل الإصدار jQuery 3.0، كان لدى مجموعة معالجة الحدث تابع أيضًا يدعى ‎.load()‎. تحدِّد إصدارات jQuery القديمة أي دالة يجب اطلاقها اعتمادًا على مجموعة المعاملات الممرَّرة إليها.

هذه الدالة هي أبسطة طريقة لجلب البيانات من الخادم. تشبه إلى حد ما ‎$.get(url, data, success)‎ باستثناء أنَّه تابع وليس دالة عامة ولديه دالة رد نداء مضمَّنة. عندما يُكشتف رد ناجح (مثل أن يكون textStatus هو "success" أو "notmodified")، فإن التابع ‎.load()‎ يضع البيانات المعادة في محتوى HTML للعنصر المتطابق. هذا يعني أنه أغلب استخدامات هذا التابع يمكن تبسيطها بالشكل:

$( "#result" ).load( "ajax/test.html" );

إن لم يطابق المحدد أي عنصر (أي إن لم يكن هنالك عنصر في الصفحة ذي المعرف "result")، فلن يُرسل الطلب Ajax.

دالة رد النداء (Callback)

إن زُود رد النداء "complete"، فسينفذ بعد إنجاز عملية الإرسال باستعمال POST وادراج محتوى HTML. ستستدعى دالة رد النداء مرةً لكل عنصر في مجموعة jQuery، وسيشير this إلى كل عنصر DOM.

$( "#result" ).load( "ajax/test.html", function() {
  alert( "اكتملت عملية التحميل" );
});

في كلا المثالين السابقين، إن لم تحتوي الصفحة الحالية على عنصر ذي المعرف "result"، فلن يُنفذ التابع ‎.load()‎.

تابع الطلب (request)

سيُستعمل التابع POST إن مُرِّرت البيانات إلى المعامل data على أنَّها كائن. خلا ذلك، سيُستعمل التابع GET.

تحميل أجزاء من الصفحة (Loading Page Fragments)

يسمح لنا التابع ‎.load()‎، خلافًا للتابع ‎$.get()‎، بتحديد جزء الصفحة البعيدة المطلوب إدراجه، وهذا يتحقق باستعمال صياغة مخصصة للمعامل url. إن أضيف محرف المسافة مرة واحدة أو أكثر في السلسلة النصية للمعامل url، فالجزء الذي يلي أول مسافة يُمثل محدد jQuery الذي يحدد المحتوى المطلوب تحميله.

سنعدِّل على المثال السابق لإعادة جزء من الصفحة فقط بدلًا من إعادتها كلها:

$( "#result" ).load( "ajax/test.html #container" );

سيجلب التابع عند تنفيذه كل محتوى الصفحة ajax/test.html، ولكن ستحلل jQuery هذا المحتوى للبحث عن العنصر ذي المعرِّف "container". بعد إيجاد هذا العنصر، سيضاف هو ومحتواه إلى العنصر الذي يملك المعرِّف "result" وسيُهمل بعدئذٍ بقية محتوى الصفحة.

تستعمل jQuery خاصية المتصفح ‎.innerHTML لتحلِّل محتوى الصفحة المُعاد وتدرجه إلى الصفحة الحالية. يرشِّح المتصفحات غالبًا خلال هذه العملية العناصر الموجودة في الصفحة مثل العنصر <html>، أو العنصر <title>، أو العنصر <head>. نتيجةً لذلك، قد لا تكون العناصر المعادة باستعمال ‎.load()‎ نفسها تمامًا فيما لو أُعيدت الصفحة مباشرةً باستعمال المتصفح.

تنفيذ السكربت

عند استدعاء التابع ‎.load()‎ مع استعمال رابط URL دون إلحاقه بتعبير محدِّد، فسيُمرر المحتوى إلى التابع ‎.html()‎ قبل إزالة السكربتات منه، وستُنفذ آنذاك هذه السكربتات قبل أن تُتجاهل. إن استُدعي التابع ‎.load()‎ مع إضافة تعبير محدد إلى العنوان URL، فستُزال السكريتات على أي حال قبل بدء تحديث شجرة DOM، ولن تُنفَّذ حينها. ستُشرح هاتان الحالتان في المثالين التاليين:

في هذا المثال، أي شيفرات JavaScript ستُحمل إلى العنصر ذي المعرف "a" الذي يمثل جزءًا من الصفحة الحالية فإنها ستنفَّذ بنجاح:

$( "#a" ).load( "article.html" );

من جهة أخرى، إنَّ كتل السكربتات في المثال التالي الموجودة في الصفحة التي حُمِّلت إلى ‎#b ستُزال ولن تُنفذ:

$( "#b" ).load( "article.html #target" );

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

بسبب القيود الأمنية للمتصفحات، فإنَّ أغلب طلبات "Ajax" تخضع إلى سياسة المصدر الواحد (Same origin policy). لن يتمكن الطلب آنذاك من جلب البيانات بنجاح من نطاقات أو نطاقات فرعية أو منافذ أو بروتوكولات مختلفة.

أمثلة

تحميل عناصر قائمة لصفحة أخرى وإدراجها ضمن قائمة مرتبة:

<!doctype html>
<html lang="ar">
<head>
  <meta charset="utf-8">
  <title>load مثالٌ عن استعمال التابع</title>
  <style>
  body {
    font-size: 12px;
    font-family: Arial;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<b>المشاريع:</b>
<ol id="new-projects"></ol>
 
<script>
$( "#new-projects" ).load( "/resources/load.html #projects li" );
</script>
 
</body>
</html>

إظهار تنبيه إذا واجه طلب "Ajax" خطأً ما:

<!doctype html>
<html lang="ar">
<head>
  <meta charset="utf-8">
  <title>load مثالٌ عن استعمال التابع</title>
  <style>
  body {
    font-size: 12px;
    font-family: Arial;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<b>ردٌ ناجح (يجب أن يكون فارغًا):</b>
<div id="success"></div>
<b>ردٌ خطأ:</b>
<div id="error"></div>
 
<script>
$( "#success" ).load( "/not-here.php", function( response, status, xhr ) {
  if ( status == "error" ) {
    var msg = "نتأسف جدًا، إذ يوجد خطأ: ";
    $( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
  }
});
</script>
 
</body>
</html>

تحميل الملف feeds.html إلى العنصر <div> ذي المُعرِّف "feeds":

$( "#feeds" ).load( "feeds.html" );

النتيجة ستكون:

<div id="feeds"><b>45</b> تمت عملية التحميل بنجاح</div>

تمرير مصفوفة من البيانات إلى الخادم:

$( "#objectID" ).load( "test.php", { "choices[]": [ "أحمد", "ليلى" ] } );

مثال مشابه للمثال السابق ولكن المعاملات الإضافية ستُرسل باستعمال POST إلى الخادم وسيُنفذ رد النداء عندما ينتهي الخادم من استلام الطلب:

$( "#feeds" ).load( "feeds.php", { limit: 25 }, function() {
  alert( "اكتمل تحميل 25 من المدخلات الأخيرة" );
});

مصادر

مجلوبة من «https://wiki.hsoub.com/index.php?title=jQuery/load&oldid=11683»