درس تبسيط تقنية الـ AJAX مع مثال تطبيقي ( قائمة تعتمد على قائمة )

MEG · 27-08-2008, 12:49 AM

المقدمة :

AJAX هي اختصار لـ Asynchronous JavaScript And XML

و قد اخذت بالانتشار في عام 2005 بواسطة Google في مشروعهم Google Suggest

و هي ليست بـ "لغة برمجة" جديدة , بل هي تقنية لانشاء تطبيقات ويب تفاعلية افضل و اسرع !

بفضلها يمكن لـ JavaScript التواصل مباشرة مع الخادم ( Server ) باستخدام كائن XMLHttpRequest

حيث يمّكن هذا الكائن JavaScript من تبادل البيانات مع الخادم دون الحاجة لاعادة تحميل الصفحة في كل مرة

حيث يقوم بطلب جزء صغير من البيانات من الخادم بدلا من طلب الصفحة كاملة كما هو معلوم عند الغالبية منا

اخيراً , تقنية AJAX مدعومة في كل المتصفحات الحديثة خصوصاً متصفح Firefix المفتوح المصدر و Opera

لغات يفضل ان تلم باساسياتها قبل البدء :

HTML / XHTML
JavaScript

الموضوع جداً بسيط و لا يتطلب منك تعلم اشياء جديدة ما دمت تلم بالاساسيات

فقط قم بنقل الاكواد الى جهازك و نفذها على خادمك المحلي ثم ابدأ بالتعديل عليها لتفهم اكثر

مثال تطبيقي :

مثالنا سيكون عبارة عن قائمة تعتمد على قائمة اخرى في اظهار عناصرها [ مثال ]

عند اختيار احد المصنعين من القائمة الاولى سيتم عرض موديلات سيارته في قائمة الثانية

اولاً : ملف الـ HTML و نموذج عرض القوائم

كود هتمل:

<html>
	<head>
		<title>ajax</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script src="main.js"></script> <!-- استدعاء ملف الجافا سكربت -->
	</head>

	<body>

		<form name="car">
			<select name="make" onChange="getInfo()"> <!-- قائمة المصنعين -->
				<option value="0">- Select Make</option>
				<option value="1">Toyota</option>
				<option value="2">Nissan</option>
				<option value="3">GMC</option>
			</select>
		</form>

		<div id="main"> <!-- هنا سيتم طباعة قائمة الموديلات --></div>


	</body>
</html>

اسم النموذج : car , اسم قائمة المصنعين : make

( عند اختيار عنصر منها سيتم استعداء دالة getInfo من ملف الجافا سكربت

ثانياً : ملف PHP لجلب بيانات القائمة من قاعدة البيانات

كود PHP:

  <?
    header('Content-Type: text/html; charset=UTF-8');

    $id = intval($_GET['id']); // رقم المصنع

    $link = mysql_connect("localhost","root",""); // الاتصال بقاعدة البيانات
    $db = mysql_select_db("car",$link); // تحديد قاعدة البيانات

    $sql = "SELECT * FROM model WHERE make=$id"; // البحث في قاعدة البيانات
    $result = mysql_query($sql);

    echo "<select name='model'>";
    echo "<option value='0'>-- Select Model</option>"; 

    while ( $row = mysql_fetch_array($result) )
    {
        echo "<option value='{$row['id']}'>{$row['name']}</option>"; // طباعة عناصر القائمة
    }

    echo "</select>";

    mysql_free_result($result);
    mysql_close($link);
?>

اسم قاعدة البيانات : car ( ملف قاعدة البيانات و باقي الملفات في المرفقات )

المتغير id : يحمل رقم المصنع في قاعدة البيانات المرسل عن طريق النموذج

اذن سيقوم السكربت بالبحث في جدول موديلات السيارات ( model )

عن الموديل الذي ينتمي للمصنع رقم id ثم يطبع الناتج في القائمة model

ثالثاً : ملف الجافا سكربت الذي يطلب من الخادم و يرسل الى المتصفح

كود PHP:

  var xmlHttp = new XMLHttpRequest(); // تعريف الكائن

function getInfo()
{
    xmlHttp.open('get','test.php?id='+ document.car.make.selectedIndex); // ارسال الطلب
    xmlHttp.onreadystatechange = handleInfo;
    xmlHttp.send(null); // انهاء الطلب
}

function handleInfo()
{
    if(xmlHttp.readyState == 1)
    {
        document.getElementById('main').innerHTML = 'loading ..';
    }

    else if(xmlHttp.readyState == 4)
    {
        var response = xmlHttp.responseText; // رد الخادم
        document.getElementById('main').innerHTML = response; // طباعة القائمة
    }
}

اهم خواص الكائن XMLHttpRequest

1. الخاصية onreadystatechange

تحتفظ هذه الخاصية بالدالة التي ستقوم بمعالجة طلب الخادم

2. الخاصية readyState

تعيد هذه الخاصية حالة الطلب كما يلي :

0 = لم يجهز الطلب

1 = الطلب جُهــز

2 = الطلب ارسل

3 = جاري معالجة الطلب

4 = الطلب اكتمل

3. الخاصية responseText

تعيد هذه الخاصية رد الخادم و هو هنا عناصر القائمة التي تم طباعتها في ملف الـ PHP

- كي نرسل طلب الى الخادم نحتاج الى الطريقة open و التالي تأخذ المعطيات التالية :

1. طريقة ارسال الطلب GET او POST

2. عنوان سكربت الـ php و طريقة ارسال المتغير id اليه

- كي ننهي الطلب نحتاج الى الطريقة send

اعتقد انه كل شئ اصبح واضح لكن تبقى اهم نقطة و هي ما يلي :

كود PHP:

      else if(xmlHttp.readyState == 4)
    {
        var response = xmlHttp.responseText;
        document.getElementById('main').innerHTML = response;
    }

في حال اكتمل الطلب سيتم اسناد رد الخادم الى المتغير response

ثم ارساله الى الـ div ذا الاسم main اي في المكان المحدد لقائمة الموديلات

اعذروني على التقصير فانا على عجل , لمزيد من التفاصيل راجعوا الرابط التالي :

AJAX Tutorial

توشكى · 27-08-2008, 06:00 AM

السلام عليكم ورحمة الله وبركاته

جزاك الله اخى خير الجزاء لكن لدى استفسار وارجوا الرد باسرع وقت لاننى نفذت هذا الشرح ولكن هناك اخطاء حدثت

واننى بحاجة الى هذه الاوامر ولكن اريد اضافة بعض الاشياء لها

فأنا لدى اسكربت واريد التطوير عليه

التطوير المطلوب هو كالتالى

1- اضافة المحافظات والمناطق : يتم اضافة المحافظات اولاً وبعد ذلك يتم ادخال المناطق حسب كل المحافظة
2- إضافة نوع العقار : هنا تدع لي الخيار في ادخال نوع العقار (عمارات – اراضي – شقق ) الخ
3- اضافة عقار : يكون فيه قوائم الاولى المحافظة والثانية المنطقة (تتغير حسب المحافظة) والقائمة الثالثة هي نوع العقار .. طبعاً محتويات هذه القوائم سبق وتم ادخاله عن طريق الخطوة 1 و 2 .. وقائمة رابعة يكون فيها نوع العملية وتكون بثلاث خيارات (بيع – شراء – ايجار) وبعد ذلك العنوان وطريقة الاتصال سواء ايميل أو رقم واضافة صورة وتدع لي مربع للمعلومات الاضافية اكتب فيه ما اشاء .. طبعاً جميع هذه المعلومات تظهر في الموقع 
4- اضافة خدمات : ستكون عبارة عن مربع اضغط فيه معلومات عن خدمات معين مختلفة بحيث انني لو اضفت خدمة معينة مثل (الضبغ او السباكة) اضع فيها الشركات التي تقوم بهذه الاعمال وتكون هذه الخدمات بقائمة خاصة فيها بالصفحة الرئيسية ..
5- طبعاً كل ما تم اضافته لابد من طريقة للتعديل والحذف من لوحة التحكم

ويكون لكم جزيل الشكر واسال الله التوفيق لكم ولى

وكان الله فى عون الجميع

واترككم فى حفظ الله

MEG · 27-08-2008, 12:54 PM

^^^

ما هي هذه الاخطاء ( ضعها هنا ) ؟

بالنسبة للتعديل على السكربت ضع هنا ما تريد التعديل عليه لتعم الفائدة

و في حال لم استطع افاتدك يفيدك غيري

توشكى · 27-08-2008, 07:32 PM

اسف اخى الاخطاء كانت من التطبيق الخاص فينى

هذا مثال السكربت

لوحة تحكم الادمن

اليوزر نيم : admin
الباسورد : 123456

وابى انى اضيف خاصية البحث كما الموجوده هنا

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

ارجوا منك عن جد المساعدة وفى اسرع وقت

achraf_algno · 12-09-2008, 06:57 AM

شكرا لك أخي الكريم

ابووائل · 11-08-2009, 03:42 AM

شكرا لك اخي فعلا شرح واضح ... نحو الامام

Not Yet !! · 14-08-2009, 12:36 AM

قرأت الكثير و تصفحت الكثير و لكن هناك شئ غامض بالنسبة لي وهو كيف أقوم باستخراج معلومات من الداتا بيس و تعرض على شكل select list
و عند إختيار اي خيار يتم عرض select list أخرى
و عند إختيار اي خيار من select list الثانية يتم عرض السعر على سبيل المثال .

مثال :
في القائمة الاولى أنواع السيارات مثلا ford - lexus - toyota
و بعد اختيار اي نوع من السيارات يتم عرض اسماء السيارات التي تنتمي لنوع السيارة مثلا من toyota يتم إظهار camry - corola - VXR
و عند إختيار اسم السيارة camry ، يتم عرض سعر في حقل input

ما توصلت له إلى الان هو عرض السيارات بعد عرض انواع السيارات ، ارجو إفادتي بالمتبقي كما هو موضح أعلاه و لكم جزيل الشكر ..

PHPCODE · 14-08-2009, 12:49 PM

اقتباس:

في القائمة الاولى أنواع السيارات مثلا ford - lexus - toyota
و بعد اختيار اي نوع من السيارات يتم عرض اسماء السيارات التي تنتمي لنوع السيارة مثلا من toyota يتم إظهار camry - corola - VXR
و عند إختيار اسم السيارة camry ، يتم عرض سعر في حقل input

ما توصلت له إلى الان هو عرض السيارات بعد عرض انواع السيارات ، ارجو إفادتي بالمتبقي كما هو موضح أعلاه و لكم جزيل الشكر ..

نفس السؤال ... حيث اني اريد اخذ قيمة من القائمة الاهخرى لتخزينها في القاعدة ولكن القيمة تظهر دائما فارغه فنأمل الحل

يحيى عبدالله · 19-08-2009, 01:11 PM

تسلم اخوي على الشرح

وعندي سؤال
في عملة الرسال المدخلات
لو بدل القائمة المنسدلة صندوق نصي كيف راح يكون الكود

أبورنه · 05-10-2009, 11:56 PM

اخي جزاك الله خير

لا اعلم هل الموضوع قديم ام جديد

عموما
قمت بتطبيق المثال ونجح معي ولله الحمد

ولكن اذا كنت اريد ان تكون قائمتين وليس قائمة في نفس الصفحة

يعني
المدينة --- الدولة
مسمى الوظيفة ---- مدير ، موظف ... الخ

emirates · 23-10-2009, 07:48 PM

درس جميل طبقته واشتغل اريد اضيف عليه بعض الميزات

انشاء صفحه واحده القائمة الاولى تستدعى من قاعدة البيانات
وتحتها القائمة الثانيه

انا جربت ولكن طلعت بعض الاخطاء وهي ان القائمة الاولى تكررت مرتين <---------------- تجربه فاشله

غيرت الصفحه منindex.html الى index.php

كود PHP:

  <?php
         include ('config.php');
         echo"<form name='car'>
         <select size='1' name='make' onChange='getInfo()' >
         <option value='0'>select</option>";
         $sql5= mysql_query(" select * from make order by id");
         while($row=mysql_fetch_array($sql5)){
         echo"<option value ='$row[id]'>$row[name]</option>";
         }
         echo"</select></form>
        <div id='main'>";
        $id = intval($_GET['id']);
        $sql = "SELECT * FROM model WHERE make=$id";
        $result = mysql_query($sql);
        echo "<select name='model'>";
        echo "<option value='0'>-- Select Model</option>";
        while ( $row = mysql_fetch_array($result) )
        {
                echo "<option value='{$row['id']}'>{$row['name']}</option>";
        }
        echo "</select></div>";
?>

في صفحة main.js
غيرت رابط الفورم
xmlHttp.open('get','index.php?id='+ document.car.make.selectedIndex);

emirates · 23-10-2009, 10:01 PM

مبين ان الموضوع قديم راح انقل مشاركتي كموضوع جديد يبحث عن اجابه

pirà · 31-01-2010, 01:55 PM

السلام عليكم
درس واضح ومفهوم

27-08-2008, 06:00 AM	#2 (permalink)
توشكى عضو جديد تاريخ الانتساب: 27-08-2008 مشاركات: 8 مستوى السمعة : 0	رد : تبسيط تقنية الـ AJAX مع مثال تطبيقي ( قائمة تعتمد على قائمة ) السلام عليكم ورحمة الله وبركاته جزاك الله اخى خير الجزاء لكن لدى استفسار وارجوا الرد باسرع وقت لاننى نفذت هذا الشرح ولكن هناك اخطاء حدثت واننى بحاجة الى هذه الاوامر ولكن اريد اضافة بعض الاشياء لها فأنا لدى اسكربت واريد التطوير عليه التطوير المطلوب هو كالتالى 1- اضافة المحافظات والمناطق : يتم اضافة المحافظات اولاً وبعد ذلك يتم ادخال المناطق حسب كل المحافظة 2- إضافة نوع العقار : هنا تدع لي الخيار في ادخال نوع العقار (عمارات – اراضي – شقق ) الخ 3- اضافة عقار : يكون فيه قوائم الاولى المحافظة والثانية المنطقة (تتغير حسب المحافظة) والقائمة الثالثة هي نوع العقار .. طبعاً محتويات هذه القوائم سبق وتم ادخاله عن طريق الخطوة 1 و 2 .. وقائمة رابعة يكون فيها نوع العملية وتكون بثلاث خيارات (بيع – شراء – ايجار) وبعد ذلك العنوان وطريقة الاتصال سواء ايميل أو رقم واضافة صورة وتدع لي مربع للمعلومات الاضافية اكتب فيه ما اشاء .. طبعاً جميع هذه المعلومات تظهر في الموقع  4- اضافة خدمات : ستكون عبارة عن مربع اضغط فيه معلومات عن خدمات معين مختلفة بحيث انني لو اضفت خدمة معينة مثل (الضبغ او السباكة) اضع فيها الشركات التي تقوم بهذه الاعمال وتكون هذه الخدمات بقائمة خاصة فيها بالصفحة الرئيسية .. 5- طبعاً كل ما تم اضافته لابد من طريقة للتعديل والحذف من لوحة التحكم ويكون لكم جزيل الشكر واسال الله التوفيق لكم ولى وكان الله فى عون الجميع واترككم فى حفظ الله

27-08-2008, 12:54 PM	#3 (permalink)
MEG عضو جديد تاريخ الانتساب: 20-02-2008 المكان: السعودية مشاركات: 42 مستوى السمعة : 0	رد : تبسيط تقنية الـ AJAX مع مثال تطبيقي ( قائمة تعتمد على قائمة ) ^^^ ما هي هذه الاخطاء ( ضعها هنا ) ؟ بالنسبة للتعديل على السكربت ضع هنا ما تريد التعديل عليه لتعم الفائدة و في حال لم استطع افاتدك يفيدك غيري __________________ كود PHP: `echo "I like PHP and C++" ;`

27-08-2008, 07:32 PM	#4 (permalink)
توشكى عضو جديد تاريخ الانتساب: 27-08-2008 مشاركات: 8 مستوى السمعة : 0	رد : تبسيط تقنية الـ AJAX مع مثال تطبيقي ( قائمة تعتمد على قائمة ) اسف اخى الاخطاء كانت من التطبيق الخاص فينى هذا مثال السكربت لوحة تحكم الادمن اليوزر نيم : admin الباسورد : 123456 وابى انى اضيف خاصية البحث كما الموجوده هنا ولقد كتبت موضوع بخصوص هالأمر هنا ومرفق معة نسخة السكربت كاملة لاننى لا اريد تحمليها مرة اخرى حتى لا تضغط على قواعد البيانات حق المنتدى او تشغل مساحة ع الفاضى ارجوا منك عن جد المساعدة وفى اسرع وقت قام بآخر تعديل توشكى يوم 27-08-2008 في 07:44 PM

12-09-2008, 06:57 AM	#5 (permalink)
achraf_algno عضو جديد تاريخ الانتساب: 12-09-2008 مشاركات: 14 مستوى السمعة : 0	رد : تبسيط تقنية الـ AJAX مع مثال تطبيقي ( قائمة تعتمد على قائمة ) شكرا لك أخي الكريم

11-08-2009, 03:42 AM	#6 (permalink)
ابووائل عضو جديد تاريخ الانتساب: 20-10-2008 مشاركات: 35 مستوى السمعة : 0	رد : تبسيط تقنية الـ AJAX مع مثال تطبيقي ( قائمة تعتمد على قائمة ) شكرا لك اخي فعلا شرح واضح ... نحو الامام __________________ Eng. Anas M. Almadhoon Computer Engineer Web Developer & Programmer anas_abuwael@hotmail.com

14-08-2009, 12:36 AM	#7 (permalink)
Not Yet !! عضو جديد تاريخ الانتساب: 16-05-2008 مشاركات: 5 مستوى السمعة : 0	رد : تبسيط تقنية الـ AJAX مع مثال تطبيقي ( قائمة تعتمد على قائمة ) قرأت الكثير و تصفحت الكثير و لكن هناك شئ غامض بالنسبة لي وهو كيف أقوم باستخراج معلومات من الداتا بيس و تعرض على شكل select list و عند إختيار اي خيار يتم عرض select list أخرى و عند إختيار اي خيار من select list الثانية يتم عرض السعر على سبيل المثال . مثال : في القائمة الاولى أنواع السيارات مثلا ford - lexus - toyota و بعد اختيار اي نوع من السيارات يتم عرض اسماء السيارات التي تنتمي لنوع السيارة مثلا من toyota يتم إظهار camry - corola - VXR و عند إختيار اسم السيارة camry ، يتم عرض سعر في حقل input ما توصلت له إلى الان هو عرض السيارات بعد عرض انواع السيارات ، ارجو إفادتي بالمتبقي كما هو موضح أعلاه و لكم جزيل الشكر ..

19-08-2009, 01:11 PM	#9 (permalink)
يحيى عبدالله عضو جديد تاريخ الانتساب: 03-08-2009 مشاركات: 9 مستوى السمعة : 0	رد : تبسيط تقنية الـ AJAX مع مثال تطبيقي ( قائمة تعتمد على قائمة ) تسلم اخوي على الشرح وعندي سؤال في عملة الرسال المدخلات لو بدل القائمة المنسدلة صندوق نصي كيف راح يكون الكود

05-10-2009, 11:56 PM	#10 (permalink)
أبورنه عضو جديد تاريخ الانتساب: 23-11-2008 مشاركات: 18 مستوى السمعة : 0	رد : تبسيط تقنية الـ AJAX مع مثال تطبيقي ( قائمة تعتمد على قائمة ) اخي جزاك الله خير لا اعلم هل الموضوع قديم ام جديد عموما قمت بتطبيق المثال ونجح معي ولله الحمد ولكن اذا كنت اريد ان تكون قائمتين وليس قائمة في نفس الصفحة يعني المدينة --- الدولة مسمى الوظيفة ---- مدير ، موظف ... الخ

23-10-2009, 07:48 PM	#11 (permalink)
emirates عضو جديد تاريخ الانتساب: 23-10-2009 المكان: uae مشاركات: 11 مستوى السمعة : 0	رد : تبسيط تقنية الـ AJAX مع مثال تطبيقي ( قائمة تعتمد على قائمة ) درس جميل طبقته واشتغل اريد اضيف عليه بعض الميزات انشاء صفحه واحده القائمة الاولى تستدعى من قاعدة البيانات وتحتها القائمة الثانيه انا جربت ولكن طلعت بعض الاخطاء وهي ان القائمة الاولى تكررت مرتين <---------------- تجربه فاشله غيرت الصفحه منindex.html الى index.php كود PHP: <?php include ('config.php'); echo"<form name='car'> <select size='1' name='make' onChange='getInfo()' > <option value='0'>select</option>"; $sql5= mysql_query(" select * from make order by id"); while($row=mysql_fetch_array($sql5)){ echo"<option value ='$row[id]'>$row[name]</option>"; } echo"</select></form> <div id='main'>"; $id = intval($_GET['id']); $sql = "SELECT * FROM model WHERE make=$id"; $result = mysql_query($sql); echo "<select name='model'>"; echo "<option value='0'>-- Select Model</option>"; while ( $row = mysql_fetch_array($result) ) { echo "<option value='{$row['id']}'>{$row['name']}</option>"; } echo "</select></div>"; ?> في صفحة main.js غيرت رابط الفورم xmlHttp.open('get','index.php?id='+ document.car.make.selectedIndex);

23-10-2009, 10:01 PM	#12 (permalink)
emirates عضو جديد تاريخ الانتساب: 23-10-2009 المكان: uae مشاركات: 11 مستوى السمعة : 0	رد : تبسيط تقنية الـ AJAX مع مثال تطبيقي ( قائمة تعتمد على قائمة ) مبين ان الموضوع قديم راح انقل مشاركتي كموضوع جديد يبحث عن اجابه

31-01-2010, 01:55 PM	#13 (permalink)
pirà عضو جديد تاريخ الانتساب: 31-01-2010 مشاركات: 42 مستوى السمعة : 0	رد : تبسيط تقنية الـ AJAX مع مثال تطبيقي ( قائمة تعتمد على قائمة ) السلام عليكم درس واضح ومفهوم

زوار هذا الموضوع الآن : 2 (0 عضو و 2 ضيف)

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

مواضيع ذات صلة
الموضوع	الكاتب	المجلس	المشاركات	المشاركة الأخيرة
عمل قائمة تعمتد علي قائمة	melmoaty	لغة Javascript	9	08-12-2008 06:56 PM
كيف اعمل قائمة اعبيها من قاعدة بيانات وفق شرط يعتمد على قيمة من قائمة اخرى	shtayeman	مشاكل وحلول PHP Errors & Troubleshooting	1	27-08-2008 12:51 AM
تعبئة قائمة وفق قائمة اخرى	shtayeman	لغة Javascript	7	27-08-2008 12:50 AM
درس تطبيقي - قائمة تصويت	محب php	دروس متقدمة	11	24-03-2008 09:38 PM
عمل قائمة تنقل سريع قائمة الاختيار	Akwad Net	لغة Javascript	11	15-11-2007 06:40 PM

الاسم		حفظ ؟
كلمة المرور