[ jquery ] إستخدامات دالة الــ ajax في الجكويري
 

<div><div align="center">

مقدمة:

: $(document).ready (() {...})

هده الدالة أساسية يتم بداخلها وضع كود الجكويري ليعمل بشكل صحيح. دعونا نتعرف على الـ Parametres الأساسية، التي من دونهم لن تشتغل دالة jQuery.ajax ، ألا وهي:

نوع الطلب (GET،POST، PUT، DELETE)

عنوان URL الذي سوف نقوم بإرسال الطلب.

البيانات التي تريد إرسالها.

ماذا تفعل الدالة في حالة نجاح الطلب (HTTP 2xx).

ماذا تفعل الدالة في حالة خطأ في الطلب (HTTP 4xx أو 5xx).



وكما قلت أعلاه، نحن بحاجة إلى تمرير هذه Prametres في Object يدعى JSON.

كتابة JSON في جافا سكريبت، ببساطة، يتم عن طريق نظام "المفتاح--القيمة" يوضع داخل أقواس مثل هذا:

رمز Code:

{
key1: "value 1",
key2: 100,
key3: false
key4: function() {
alert('Hello World!');
}
}

بهذا الكود يمكن أن نمرر الـ Parametres بسهولة.

في الدالة ajax الموضحة أعلاه، افتراضيا فإن نوع الطلب من السيرفر هو GET .لذالك إذا كان هذا هو الطلب الذي تريد إجرائه، فلا حاجة إذن لتحديده.

رمز Code:

jQuery.ajax({
type: 'GET', // نوع الطلب من السيرفر
url: 'serveur.php', //مسار البيانات التي نريد أن يرسلها السيرفر
data: {
userName: 'Yassin', // البيانات في "جيسون"والتي نريد أن يرسلها السيرفر
age: 16,
admin: true
},
success: function(data, textStatus, jqXHR) {
// البيانات المرسلة من السيرفر
// نستطيع أن نبرمج هنا ما نريد كا رسالة نجاح العملية
},
error: function(jqXHR, textStatus, errorThrown) {
// نستطيع أن نبرمج هنا ما نريد كا رسالة فشل العملية
}
});

كما ترون، فقد أرسلت البيانات إلى السيرفر باستخدام Parametre يدعى data. هذا الاخير هو إختياري، إذا لم يكن لديك أي شيء ترغب في إرساله إلى السيرفر، يمكنك تجاهل هذا الـ Parametre. أيضا في هذا الكود أعلاه، إستخدمنا نوع الطلب من السيرفر GET، ليتم تمرير البيانات عبر الـ Parametres في العنوان url. وهكذا، فالطلب سوف يستدعي الصفحة التالية مثلا :

رمز Code:
server.php?username=abdev&age=25&admin=true.

في حالة إذا ما أرسلنا الطلب بطريقة POST بدلا من GET، فإن الـ Parametres سيتم إرسالها في الـHeader الخاص بـ HTTP وليس في العنوان URL.

إذا كنت مهتما بمعرفة ما الذي يحدث عند إجراء الطلب عبر Ajax أو حتى تصحيح الكود البرمجي الخاصة بك في حالة خطأ ما، يمكنك تحميل برنامج Firebug لفايرفوكس ( بالنسبة للكروم هناك خاصية تدعى developer tools توجد في الخيار Tools ) بعد

تشغيلك لـ Firebug إفتح علامة التبويب Net. سوف تشاهد جميع الطلبات التي قمت بإرسالها عبر Ajax كما هو موضح في الصورة أدناه.
http://www.traidnt.net/vb/images/img...14/02/1117.png



ننتقل بعد ذلك إلى الـ Parametre الموالي success، الذي يأخذ شكل دالة المجهول أي بدون إسم. مايهمنا في هذه الدالة المجهولة هو العنصر data. الموجود داخلها، حيث يحتوي على البيانات المرسلة عند الاستجابة بنجاح من طرف السيرفر. نفترض بأن محتوى بيانات السيرفر المرسلة هي عبارة عن كود PHP الموضح أدناه :

رمز Code:


كما ترون فإن المتغير data يتضمن الرسالة المشهورة Hello World! أي أن الرسالة التي سوف تظهرللمستخدم على سبيل المثال
عندما يسجل تعليقا في موقعك هي Hello World! كإشعار له على تسجيله تعليقا بنجاح وظهوره فورا وهذا كله بدون إعادة تحميل loading للصفحة.

وأخيراً، الـ Parametre المدعو error هو أيضا يتخد شكل دالة مجهولة ذات 3 عناصر.

الآن سأقدم لكم كود كامثال يمكنك تحميله في أسفل المقال . فيما يخص السيرفر، لدينا ملف PHP نسميه index.php والذي يحتوي على الكود التالي :

رمز Code:


الآن ننشئ صفحة HTML، تحتوي على حقل لاسم المستخدم وزر إرسال البيانات.أيضا سنضيف كود PHP يقوم بعرض اسم
المستخدم إذا قام بتسجيل الدخول الى session. في بادء الامر ستذهب الى الصفحة، ولن تجد سوى Form تسجيل الدخول.

رمز Code:


أدخل معلوماتك


Your name :.







user Name :






دخول



الآن ننتقل الى جزء الـ Javascript :

رمز Code:

var loader = "loader.gif";

$('#classic-button').click(function() {

// إسترداد إسم المستخدم
var username = $('#userName').val();

// إذا كان الحقل الخاص بإسم المستخدم فارغ ستظهر رسالة خطأ
if (username.length < 1) {
$('#classic-response').html('').html('أدخل الاسم
');
// الخروج الكود
return false;
}

// إذا لم يكون حقل إسم المستخدم فارغ
// ستظهر صورة التحميل دلالة على الشروع بالدخول الى الحساب
$('#classic-response').html('').html('http://vb.ma7room.com/' + loader + ' تحميل...');

// الان سنرسل البيانات
$.ajax({
url: 'index.php',
type: 'POST',
data: {
username: username
},
error: function(jqXHR, textStatus, errorThrown) {
// رسالة تظهر في حالة وجود خطأ
$('#classic-use-response').html('').html('خطأ في الدخول
');
},
success: function(data, textStatus, jqXHR) {
// إعادة تحميل الصفحة في حالة نجاح الولوج
window.location.href = "index.php";
}
});

});

الكود أعلاه يستخدم الـ Parametres التي ذكرناها آنفا. ولذلك، فإن الامر واضح وجد بسيط.

الدالة ajax مرتبطة بـ Event، تدعى Click المعرفة بـ Id التالي classic-use-button#. عند الضغط على هذا الزر، الكود الذي بداخلها يقوم باسترداد اسم المستخدم الذي تم إدخاله في حقل النموذج والتحقق ما إن كان عبارة عن String فارغ.

بعد ذالك أدرجنا في الصفحة صورة فضلا عن كلمة صغيرة للإشارة إلى أننا في طور معالجة طلب الدخول الى الحساب. ثم نقوم بإرسال البيانات إلى ملف PHP باستخدام الطلب POST.

أخيرا، عند الاستجابة من السيرفر،إما فشل أو نجاح، نستبدل صورة Loading برسالة.


- إسترداد JSON مع jQuery.getjson:

الدالة jQuery.ajax () يمكن أن تأخذ أيضا Parametre يدعى، datatype. يتم استخدام هذا Parametre لتحديد نوع الاستجابة التي تريدها أن تأتي من السيرفر. على سبيل المثال، html، json أو xml. عندما لا يتم تحديد هذا Parametre،فإن jQuery يقوم بتخمين ما هو نوع الاستجابة المناسبة من خلال Headers - HTTP.

لاسترداد المحتوى JSON، يجب علينا استخدام الدالة jQuery.getjson().

طريقة عملها أسهل من الدالة السابقة لانها تأخد في Parametres كعنوان الـ URL الذي من خلاله سيتم إسترداد ملف JSON ودالة مجهول تتعامل مع الاستجابة من السيرفر. هنا كمايلي الكود.

رمز Code:

$.getJSON('getJson.php', function(data) {

// إنشاء لائحة تضم البيانات الموجودة في جيسون
var output = "

• ";
  
  // إرفاق المتغير بقيمته
  $.each(data, function(key, value) {
  output += '
• ' + key + ' : ' + value + '';
  });
  
  output += "

"

// وفي الاخير ندرج الائحة في الصفحة
$('#json-response').html('').html(output);

});
وهاهو كود PHP الذي يمثل إستجابة السيرفر على النحو التالي:

رمز Code:



استرداد أي نوع من البيانات مع jQuery.get() سواء HTML أوغيرها:


بنفس طريقة الدالة السابقة، jQuery.get ستقوم بإسترداد البيانات على السيرفر ولكن بغض النظر عن نوع هذه البيانات.

مثال للتوضيح :

رمز Code:
$.get('get.php', function(data) {

// إسترداد البيانات
$('#get-response').html('').html(data);

});
<div style="margin:20px; margin-top:5px"> رمز Code: