استخدام jQuery مع AJAX

تحتوي لغة jQuery على مكتبة غنية من الطرائق و الأكواد الوظيفية functions من أجل التطوير مع لغة AJAX .

مثال

دع أجاكس يقوم بتغيير المحتوى

تم استدعاء المثال السابق من خلال دورة AJAX و لكن تم تعديله مع لغة jQuery .


ماهي لغة AJAX؟

لغة AJAX هي اختصار Asynchronous JavaScript And XML أي تداخل الجافاسكربت مع xml والتي تعني أجاكس .

ان لغة الأجاكس AJAX ليست لغة برمجية جديدة ولكن طريقة جديدة لاستخدام المعايير الحالية .

تبادل لغة AJAX البيانات مع السيرفر وتقوم بتحديث جزء من صفحة الويب بدلاً من تحميل الصفحة كلها .

بعض الأمثلة التي تستخدم الأجاكس AJAX هي : Google Maps و Gmail و Youtube و Facebook وغيرها .

إن أردت البدء بتعلم لغة AJAX يمكنك زيارة دورة AJAX .


AJAX و jQuery

تحتوي لغة jQuery على مكتبة غنية من الطرائق و الأكواد الوظيفية functions من أجل التطوير مع لغة AJAX .

باستخدام jQuery مع AJAX يمكنك طلب بيانات من ملفات TXT و HTML و XML و JSON ومن خلال السيرفر باستخدام أوامر HTTP Get و HTTP Post .

كما يمكنك تحميل بيانات مباشرة الى عناصر و أماكن معينة على صفحتك الانترنت .


قلّ ما تكتب كثيراً ما تفعل

تعتبر الطريقة load() طريقة بسيطة ولكنها فعالة جداً من طرائق AJAX functions . تتكون من التركيبة التالية :

$(selector).load(url,data,callback)

استخدم المنتقى selector لتحديد عناصر HTML التي تود تغييرها و أيضاً الرابط url لتحديد عنوان الموقع لبياناتك .

فقط اذا أردت ارسال البيانات الى السيرفر ستحتاج الى الكود data . وأيضاً اذا أردت تغيير كود وظيفي function بعد الانتهاء يمكنك استخدام callback .


مستوى منخفض من AJAX

يعتبر الكود $.ajax(options) هو التركيبة الأساسية للأكواد الوظيفية functions في المستوى المنخفض من AJAX .

تقدم $.ajax فعالية أكثر وسلاسة أكثر من الأكواد الوظيفية ذات المستوى المرتفع مثل load و get و post وغيرها الا أنه أيضاً من الصعب استخدامها .

تقدم الخيارات مجموعة من الاسماء name و القيم value وذلك بتعريف url و data و passwords و data types و filters و character sets و timeout و error functions . أي تقوم بتعريف الرابط و البيانات و كلمات المرور و نوع البيانات و التصفية و ضبط الأحرف و انتهاء الوقت و الأخطاء البرمجية .


طرائق jQuery مع AJAX
الطلب الشرح
$(selector).load(url,data,callback) تحميل بيانات الى العناصر المحددة
$.ajax(options) تحميل بيانات الى كائن XMLHttpRequest