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

محروم.كوم · #1 02-13-2014, 06:51 AM

<div><div align="center">
مقدمة:

نظرا لأهميتها، سوف اشرح في هدا المقال التعليمي كيفية إستخدام الدالة jQuery.ajax () الخاصة بالجكويري، وكيف ستفيدنا.
سنبدأ في الجانب النظري مع أحد أساسيات الـ Ajax، وهو الـ Object الخاص بالجافاسكريبت XMLHttpRequest.

إذا كنت لا ترغب في قرائة الجزء النظري يمكن الانتقال مباشرة الى الجزء التطبيقي في الاسفل.

-الـ Ajax و الـ Object الخاص بالجفاسكريبت XMLHttpRequest :

تعريف :

ajax يعني Asynchronous Javascript And XML هناك من يستبدل XML بـــ JSON التي أصبحت مؤخرا متداولة بصفة متزايدة, لاعليك سنفصل هدا الامر خلال المقال .

أكيد أنك ستتسائل عن الكلمة الاخيرة (Asynchronous)؟ قبل شرحها يجب أن نعرف مامعنى (Synchronous) أولا.

بكل بساطة، وعند الانتقال إلى صفحة في موقع ويب، لايمكنك القيام بأي شيء في الموقع ما دام السيرفر الخاص به لم يرسل لك طلبك على سبيل المثال "إضافة تعليق"، وبالتالي يتحتم عليك الانتظار. نقول في هده الحالة أن طلب التعليق في صفحة الموقع متزامن (Synchronous).

على النقيض من ذلك، مع ajax، يمكن تقديم الطلبات إلى السيرفر، ومواصلة القيام بما تريد في الصفحة كالتعليق مثلا دون انتظار الاستجابة من السيرفر. نقول في هده الحالة أن طلب التعليق في صفحة الموقع غير متزامن (Asynchronous).

ملاحظة : إستجابة السيرفر لطلبك أي أن تعليقك مثلا لن يظهر في الموقع إلا بعد القيام بــ Loading للصفحة.

XMLHttpRequest :

XMLHttpRequest هو Object خاص بجافا سكريبت تعتمده جميع المتصفحات الحالية. هو الذي يسمح لنا بالقيام بطلبات غير متزامنة (Asynchronous). يمكنك استخدامه في الكود جافا سكريبت الخاصة بك ولكن مايعاب فيه أنه يحتاج إعادة إعداد كل مرة وعلى المدى الطويل، وهدا الامر جد ممل وغير عملي . لذلك قام المختصين بإدماج هذا Object مع jQuery باستخدام الدالة jQuery.ajax ().

الان, من الأسهل استخدام هذه الدالة بدلاً من إعادة إعداد هذا Object كل مرة.

إنتهى الجزء النظري الخاص بالمقالة نتقل الساعة الى الجزء التطبيقي.

الدالة jQuery.ajax () :

تتطلب الدالة jQuery.ajax العديد من Parametres (في Object يدعى JSON) حتى تشتغل. يتم استدعاؤها كما يلي:

رمز Code:
$(document).ready(function() {

jQuery.ajax({
// Your Parametres here
});

});

: $(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 كما هو موضح في الصورة أدناه.

ننتقل بعد ذلك إلى الـ 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(' تحميل...');

// الان سنرسل البيانات
$.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: __DEFINE_LIKE_SHARE__

أدوات الموضوع
مشاهدة صفحة طباعة الموضوع أرسل هذا الموضوع إلى صديق
انواع عرض الموضوع
الانتقال إلى العرض العادي الانتقال إلى العرض المتطور العرض الشجري

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
أقوى أفلام الــ رعب إثارة ( The Omen ) بعد سلسة من الرعب دامت مسيرة 4 سنوات	【الهامورة】	افلام عربية , أجنبية, هندية , يابانية , كورية وغيرها	38	04-25-2014 08:07 PM
[ درس ] برمجة فورم للبحث : PHP \| jQuery \| aJax	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	02-09-2014 01:50 AM
[ jquery ] إضافة مربع نص بشكل حيوي باستخدام Jquery	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	08-30-2013 08:10 PM
[طلب] : سكربت دردشة jquery أو ajax	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	01-07-2012 07:40 PM
للبيع كشاف وله عدة إستخدامات	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	07-19-2009 10:30 AM