Hide this notice

مرحبا أنت تستخدم انترنت اكسبلورر ٦ و هو متصفح اصدر في العام 2001 الا يبدو لك ذلك قديما .

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

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

Screenshot

أساسيات AJAX – الجزء الأول

ما هي الأجاكس و كيف تستطيع الاستفادة منها .. بالإضافة لشرح مفصل لمثال بسيط ..

ما هي أجاكس Ajax ؟

هي اختصار لـ Asynchronous JavaScript And XML و هي تقنية من تقنيات التصميم على الويب تسمح بتطوير تطبيقات تفاعلية .لنبسط المسألة لو مثلا عند زيارة أي صفحة على الانترنت هناك محتوى و روابط لو ضغطت على رابط من الروابط سينقلك المتصفحة إلى الصفحة التي ضغط على رابطها … هذا في الأحوال العادية أما عند استخدام تقنية اجاكس فلن يتم إظهار النتائج في نفس الصفحة تلقائيا بدون الانتقال ( ستتم عملية تحميل المحتوى الجديد خلف الكواليس )

لتقريب الفكرة أكثر جرب خدمة Google suggest و التي بطباعة أي حرف في حقل البحث سيقترح عليك جوجل مجموعة من الكلمات التي تبدأ بالحرف .. كيف تم تحميل القائمة بمجرد طباعة الحرف بدون نقلك بالمتصفح .. الكلمة السحرية .. AJAX; كما يمكنك زيارة هذه المواقع للتعرف أكثر على استخداماتها :

  • Google Maps : يمكنك التقريب و الابتعاد و تحريك الخريطة بطريقة سلسلة و تفاعلية بدون نقل المتصفح ( بدون استخدام تقنية أخرى تفاعلية مثل الفلاش)
  • Bliki list : لتجميع و تصنيف مواقعك
  • Flicker : أشهر مجتمع على الانترنت لعرض وتبادل الصور ..لو جرب إنشاء ألبوم لك على فلكر ستجد الكثير من استخدام الاجاكس
  • Gmail: نظام البريد الالكتروني من جوجل .. كل شي يتم بسهولة و سرعة
  • writley : معالج نصوص على الخط

ajax

مما يتكون ؟في

الحقيقة هي ليست تقنية هي مجموعة من التقنيات :

  • (x)html و css : لعرض و تنسيق المعلومات
  • Document Object Model (DOM)يتم الدخول إلى عن طريق client-side scripting language لغة برمجة من جهة العميل مثل الجافا سكريبت أوJscript للتفاعل ديناميكيا و عرض البيانات
  • XML لنقل و تبادل البيانات بالرغم أنه يمكنك استخدام أي صيغة حتى html
  • ناقل للبيانات باستخدام XMLHttpRequest و الذي سنتحدث لاحقا عنه

و بعد قراءتك للسابق قد تفكر ما الجديد أي من التقنيات السابقة معروفة و متداولة .. في الحقيقة AJAX موجودة منذ فترة طويلة على شبكة الانترنت و لكنها سميت أخيرا بهذا الاسم و تم الاخذ بها جديا .

أريد أن استخدم أجاكس اليوم ما الذي علي تعلمه؟

في الحقيقة ليس عليك تعلم شئ جديد لكن عليك تعلم كيفية جمع و توظيف جميع العناصر السابق لتكوين تطبيق تفاعلي.. و إذا لم تستخدمها لا تعتبر نفسك من العصر الجليدي للانترنت في الحقيقة استخدمها عند حاجتك لها فقط ..

الفكرة

لدينا صفحة html عادية مثلا تحتوى على استمارة من حقل واحد لإدخال كلمة اسم المستخدم .. في الأحوال العادية سنهتم بإعطاء الحقل اسم في خاصية الاسم name لكن في الحقيقة هنا نريد إضافة خاصية جديدة للحقل و هي خاصية ID و هي الأهم للوصول لمحتويات الحقل .في حالتنا سنسمي الحقل username و عند الضغط على الزر لن نقوم بوضع اسم الملف الذي سينتقل إلى محتوى الاستمارة لمعالجتها و لكن عند الضغط على الزر سنستدعي دالة من دوال الجافا سكريبت .

ثم هناك ملف الجافا سكريبت ( يمكنك تضمين الجافا سكريبت في نفس الصفحة لكن لترتيب العملية سنضع الجافا سكريبت في ملف منفصل و نستدعيه . ستحتوي على دالة استدعاء كائن XMLHttpRequest و دالة لأخذ قيمة الحقل query و أرسالة لملف المعالجة ( الذي سنذكره في النقطة التالية )و تلقي النتائج و عرضها في الصفحة تلقائيا .

سكريبت الphp ( يمكن أن يكون أي لغة برمجة أخرى لكن في مثالنا بي اتش بي) لمعالجة نتائج الاستمارة و إرسالها مرة أخرى للجافا سكريبت لعرضها .. سكريبت الphp لا يحتوي على الكثير من التغير سوى أن القيم يتم استقبالها بــ $_REQUEST و إرسال النتائج عن طريق طباعتها باستخدام Echo

لتحميل ملف المثال اضغط هنا

التنفيذ

XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl" xml:lang="ar" lang="ar">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />

<script language="javascript" type="text/javascript" src="javaScript.js"></script>

<title>مثال من شبكة الدكتور نت - استخدام AJAX</title>

</head>

<body>

<fieldset style="padding: 2">

<legend>فضلا ادخل أسم المستخدم ...</legend>

<input type="text" name="T1" size="59" id="username" /><input type="submit" name="Submit" value="عرض" onclick="makeRequest();" />

<div id="showithere">

</div>

</fieldset>

</body>

</html>

أولا في رأس المستند استدعينا ملف الجافا سكريبت javascript.php


<script language="javascript" type="text/javascript" src="javaScript.js"></script>

ثم أنشأنا حقل من نوع input و أعطيناه id=username


<input type="text" name="T1" size="59" id="username" />

ثم أضفنا زر لاستدعاء دالة الJavaScript و التي اسمها makeRequest


<input type="submit" name="Submit" value="عرض" onclick="makeRequest();" />

ثم أضفنا منطقة خالية لإظهار النتائج فيها تاليا و أعطيناها id=showithere


<div id="showithere">

</div>

مع مراعاة انه في حالة استخدام الوسم div تأكد من ترك فراغ بواسطة nbsp; لتجنب عدم ظهور النتائج لاحقا

الجافا سكريبت ..


var http_request = false;

function makeRequest() {

if (window.XMLHttpRequest) { // Mozilla, Safari,...

http_request = new XMLHttpRequest();

} else if (window.ActiveXObject) { // IE

http_request = new ActiveXObject("Microsoft.XMLHTTP");

}

var theUsername = document.getElementById('username').value;

http_request.onreadystatechange = alertContents;

http_request.open('POST', 'ajax.php');

http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

http_request.send("username="+theUsername);

}

function alertContents() {

if (http_request.readyState == 4) {

if (http_request.status == 200) {

document.getElementById('showithere').innerHTML = http_request.responseText;

} else {

document.getElementById('showithere').innerHTML ='There was a problem with the request.';

}

}

}

لا تفزع و تهرب في بالرغم من الشفرة تبدو معقدة لكنها سهلة جدا ..

أنشأنا متغير فارغ و أعطيناه الاسم http_request

الدالة الأساسية و التي قمنا باستدعائها من صفحة الاتش تي ام ال السابقة makeRequest

لنبدأ عملية الاتصال سنتأكد من نوع المتصفح لو كانت من نوع انترنت اكسبلورر او Mozilla لان لكل منهم طريقة لو كان من نوع IE فسيتم استدعاء اكتف اكس في المتغير الذي انشأ ناه سابقا http_request


http_request = new ActiveXObject("Microsoft.XMLHTTP")

أما لو كان من نوع سفاري أو موزولا فسيتم تعيين قيمة أخرى للمتغير


http_request = new ActiveXObject("Microsoft.XMLHTTP");

في الجدول التالي بعض أهم الأوامر المرتبطة والمنتشرة لـكائن XMLHttpRequest

الخاصية الوصف
abort() أوقف الاتصال الحالي
getAllResponseHeaders() إرجاع المجموعة الكاملة للـ headers ( الأسم و القيمة ) كنص
getResponseHeader(“headerLabel“) ارجاع قيمة header كنص
open(“method“, “URL“[, asyncFlag[, “userName“[, “password“]]]) خدد طريقة ارسال البيانات Post أو Get ثم عنوان السكريبت أو الصفحة التي ستعالج البيانات بالإضافة لعدد من العناصر الاختيارية
send(content) إرسال الطلب امكانية اختيار ارسال محتويات
setRequestHeader(“label“, “value“) إعطاء اسم وقيمة للheader s

سنحصل على قيمة الحقل التي ادخلها الزائر في المتصفح و ذلك باستخدام getElementById و تذكر اننا عينا القيمة username للخاصية id و سنضع قيمة الحقل في متغير جديد سننشئه اسم theUsername


var theUsername = document.getElementById('username').value;

و الآن سنعين الدالة alertContents و هي الدالة التي سنتحدث عنها لاحقا و لن يتم تنفيذها إلا عندما يكون ترسل حالة الاستدعاء


http_request.onreadystatechange = alertContents;

و الآن نفتح الاتصال


http_request.open('POST', 'ajax.php');

حيث ajax.php اسم الملف الذي سيتم تنفذه و نوع الإرسال سيكون POST يمكنك استخدام Get مع تغيرات بسيطة

نحدد نوع البيانات المرسلة


http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

نرسل قيمة خانة اسم المستخدم


http_request.send("username="+theUsername);

لو كانت لديك أكثر من قيمة نستخدم + و نضيف اسم القيمة نتبعها بـ= ثم القيمة

و الآن تم إرسال جميع البيانات و سيتم تنفيذ الدالة التالي alertContents

في البداية نشاهد سطر شرطي


if (http_request.readyState == 4) {

لاحظ أننا سألنا هنا عن القيمة 4 في الحقيقة قد ترجع العديد من الارقام من هذا الاستدعاء لكن ما يهمنا هو عندما يتم استدعاء الرقم 4 أي أن الطلب تم تنفيذه و تم الحصول على رد ..

بعض الخصائص المنتشرة للكائن

الخاصية الوصف
onreadystatechange للتعامل مع الحدث بحيث يرسله في كل مرة تتغير فيه الحالة
readyState مجموعة من الأرقام0 = uninitialized لم يتم تشغيله1 = loading تحميل2 = loaded تم تحميله

3 = interactive يتفاعل

4 = complete تم بنجاح س

responseText القيمة النصية للنتيجة التي أرجعها السكريبت
responseXML كائن يتم إرساله يحتوي على النتائج كــ object يحتوي على كل البيانات
status رد السيرفر مثلا 404 لم يتم العثور على الصفحة 200 تم بنجاح .. الخ س
statusText الرسالة النصية المرفقة بالحالة

إذا ارجعت لنا عملية المعالجة القيمة 200 اي ان العملية تمت بنجاح


if (http_request.status == 200) {

و الآن ضع النتيجة في المكان الذي اعطيناه الــتعريف id = showithere يمكنك استخلاص القيمة عن طريق http_request.responseText


document.getElementById('showithere').innerHTML = http_request.responseText;

PHP


$_REQUEST['username']= trim($_REQUEST['username'])

if(empty($_REQUEST['username']))

echo 'بيانات ناقصة فضلا حاول مرة أخرى '

}else{

if($_REQUEST['username'] == 'drnet'){

echo 'شكرا لك اسم المستخدم صحيح ..';

}else{

echo ' اسم المستخدم غير صحيح فضلا حاول مرة اخرى ';

}

}

في الملف السابق استقبلنا قيمة اسم المستخدم عن طريق المصفوفة $_REQUEST و سنختبرها و سنرسل النتائج باستخدام الامر Echo

خاتمة

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

مصادر

بقلم : فاطمة العمادي

أم و زوجة .. مصممة حرة و مصورة .. عرف الناس كتاباتي التقنية من خلال شخصية خيالية هي الدكتور نت . اصمم المواقع منذ العام ١٩٩٩م .

أوسمة : , , , , , ,

التعليقات مغلقة .