شرح استخدام تقنية AJAX لبناء تطبيقات الويب التفاعلية

code4arab · 09-08-2005, 09:12 AM

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

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

تعريفها:
AJAX اختصار لعبارة Asynchronous JavaScript and XML وتتكون من التقنيات التالية:

HTML أو XHTML و CSS لعرض المعلومات
Document Object Model لعرض والتفاعل مع المعلومات المعروضة من خلال JavaScript
كائن XMLHttpRequest لتبادل البيانات بشكل متزامن مع المزود او الخادم.
تقنية XML وهي جزء اختياري لن نحتاج إليه حاليا.

استخدامها:
هذه التقنية تستخدم كوسيلة مساعدة في بناء تطبيقات الويب التفاعلية مثلا عند الحاجة لإرسال او جلب بيانات بدون شرح استخدام تقنية AJAX لبناء تطبيقات الويب التفاعلية. ويمكن استخدامها على أيٍ متصفح يدعم التقنيات المذكورة سابقا وتشمل Internet Explorer و FireFox و Opera وغيرها.

مثال عملي:
سنقوم بإنشاء تطبيق يقوم بجلب بيانات من قاعدة بيانات MySQL بناءا على اختيار المستخدم ومن ثم عرضها له بدون شرح استخدام تقنية AJAX لبناء تطبيقات الويب التفاعلية.

يتكون المثال الذي سنقوم بتطبيقه من ثلاث ملفات:

ملف index.html ويستخدم لعرض البيانات للمستخدم.
ملف test.php ويستخدم لجلب البيانات من قاعدة البيانات.
ملف main.js ويحتوي على دوال الاتصال بالخادم وجلب البيانات وعرضها

ملف index.html

كود HTML:

<html> <head> <title>تجربة</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1256" /> <script src="main.js"></script> </head> <body> <form name="myform"> <select name="myselect" onChange="getInfo()"> <option value="" selected="selected">اختر رقما</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> </form> <div id="mydiv"></div> </body> </html>

ملف main.js

كود HTML:

var http = createRequestObject();
function createRequestObject(){
    var request_;
    var browser = navigator.appName;
    if(browser == "Microsoft Internet Explorer"){
        request_ = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else{
        request_ = new XMLHttpRequest();
    }
    return request_;
}
function getInfo(){
    http.open('get', 'test.php?id='+ document.myform.myselect.selectedIndex);
    http.onreadystatechange = handleInfo;
    http.send(null);
}
function handleInfo(){
    if(http.readyState == 1){
        document.getElementById('mydiv').innerHTML = 'جاري جلب البيانات...';
    }
    if(http.readyState == 4){
        var response = http.responseText;
        document.getElementById('mydiv').innerHTML = response;
    }
}

ملف test.php

كود PHP:

  <?php

header('Content-Type: text/html; charset=windows-1256');

 
$id=intval($_GET['id']);

$dbhost="localhost";

$dbuser="root";

$dbpass="";

$database="test";

$link = @mysql_connect( $dbhost, $dbuser, $dbpass );

$db = @mysql_select_db( $database,$link );

$result = mysql_query("SELECT * FROM mytable WHERE id=$id");

while ( $row = mysql_fetch_array($result) ){

    echo $row['name'];

 
}

mysql_free_result($result);

mysql_close($link);

?>

تركيزنا على ملف main.js وهو يتكون من ثلاثة دوال:
دالة createRequestObject لانشاء كائن الاتصال بالخادم.
دالة getInfo لارسال البيانات إلى ملف test.php
دالة handleInfo وهي دالة مساعدة لدالة getInfo وتقوم بعرض البيانات بعد جلبها

في الغالب لن تحتاج للتعديل على دالة createRequestObject
قم بالتعديل فقط في دالتي getInfo و handleInfo ولك ان تسميها كما تشاء
التعديل الذي ستحتاجه في دالة getInfo

اسم ملف php الذي نستخدمه لعرض البيانات
اسم النموذج في صفحة HTML وهو في المثال الحالي myform
اسم صندوق القائمة المنسدلة وهو في المثال الحالي myselect

نلاحظ أن هذا التغيير سيكون في السطر التالي

كود HTML:

http.open('get', 'test.php?id='+ document.myform.myselect.selectedIndex);

التعديل الذي ستحتاجه في دالة handleInfo

اسم وسم div الذي ستسخدمه لعرض البيانات وهو في المثال الحالي mydiv

نلاحظ ان هذا التغيير سيكون في السطرين التاليين:

كود HTML:

document.getElementById('mydiv').innerHTML = 'جاري جلب البيانات...';

document.getElementById('mydiv').innerHTML = response;

أيضا لاتنسى ان تعدل في ملف test.php حسب إعدادات قاعدة البيانات لديك والمعلومات التي تريد عرضها.

لمشاهدة هذا المثال حيا على الهواء مباشرة

اضغط هنا
http://www.aknet.com/ajax/
يوجد في المرفقات ملف مضغوط يحتوي على كامل ملفات هذا التطبيق.

تحياتي وتقديري لكم
أخوكم بدر
4/7/1426 هـ

omars · 09-08-2005, 09:30 AM

الله يعطيك العافية يا شيخ

شرحٌ وافٍ كافٍ ..

الله يوفقك دنيا و آخرة ..

sobhi85 · 09-08-2005, 09:31 AM

الف شكر لك اخي على الشرح الواضح الجميل
ممكن اني استفيد منه

تحياتي

شــــــامل · 09-08-2005, 09:38 AM

بارك الله فيك

كنت ناوي أفتح موضوع أتحدث فيه عن هالتقنية العجيبة

وفقت في شرحك الله يجزاك خير

هالتقنية هي المطبقة في إصدارات منتدى ال VB و IB الحديثة وقرأت في البولق الشخصي لمبرمج بريطاني إن موقع Gmail كان أول تطبيق لها

وما أدري عن صحة المعلومة

بس تقنية رائعة جدا تخيل كل تطبيقات الإنترنت تستخدمها ؟ راح تحفظ موارد النظام على السيرفر وتسرع تفاعل الموقع مع الزائر

ياليت الخبراء يتوسعون بالموضوع أكثر

وموضوع يستحق التثبيت

aldosari · 09-08-2005, 01:15 PM

عجيب المواضيع المفيدة تحت !!
جزاك الله خير اخوي

PHP Expert · 09-08-2005, 01:22 PM

ممتاز جدا....

شكرا لك على الشرح...

haidar · 09-08-2005, 01:53 PM

موضوع مميز

ما قرأت كل الموضوع، سأراجعه
مشكور وعاشت ايديك وجزاك الله خير الجزاء
أرجو التثبيت

Al Mobarmeg المبرمج · 09-08-2005, 02:09 PM

إقتباس:

المشاركة الأصلية بواسطة code4arab

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

استخدم ترميز UTF-8 ولن تواجهك مشاكل بإذن الله

بالنسبة لدالة CreateRequestObject في ملف الجافاسكربت، من الممكن استخدام:

كود:

//From: http://www.webpasties.com/xmlHttpRequest
function createRequestObject()
{
 var xmlhttp;
  /*@cc_on

  @if (@_jscript_version >= 5)

    try {

      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");

    } catch (e) {

      try {

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

      } catch (E) {

        xmlhttp = false;

      }

    }

  @else

  xmlhttp = false;

  @end @*/

 if(!xmlhttp && typeof XMLHttpRequest != 'undefined')
 {
  try
  {
   xmlhttp = new XMLHttpRequest();

  }
  catch(e)
  {
   xmlhttp = false;
  }

 }

 return xmlhttp;
}

والتي أعتقد أنها أفضل من الموجودة (رأي شخصي)

seifss · 09-08-2005, 06:42 PM

ياسلام عليك اخوووي بدر .........مشكووور على الموضوع الرائع

code4arab · 09-08-2005, 07:09 PM

omars >>> الله يعافيك وجزاك الله خير على الدعاء الطيب ولك بمثله

sobhi85 >>> العفو وان شاء الله راح تستفيد منه

شــــــامل >>> وياك يارب وفعلا موضوع شيّق ويستحق المناقشة

aldosari >>> يمكن الشباب ما انتبهوا للموضوع او مافهموه من عنوانه ... اهم شي انه يكون نقطة بداية لمحبي تطوير الويب العرب بمواكبة احدث التقنيات

f555f >>> العفو اخوي وان شاء الله تكون استفدت ونشوف تطبيقاتك للدرس قريبا

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

Al Mobarmeg المبرمج >>> ترميز UTF-8 خيار اكيد وسيعمل لا محالة لكن معظم بيانات المواقع العربية تكون مخزنة في قواعد البيانات بترميز windows-1256 والافضل ان نبحث عن طريقة لعرضها بهذا الترميز.

seifss >>> الله يسلمك .. تمنياتي لك بالفائدة دوما

illusion · 09-08-2005, 07:16 PM

مشكور اخوي بدر على الشرح

وبصراحة تقنية ممتازة ... وتوفر الوقت

ومفيدة خاصة لأصحاب الاتصال الهاتفي

ElNeMr · 09-08-2005, 07:43 PM

الف الف الف شكر على الشرح المميز والتوضيح يا code4arab
وجارى العمل ...................................

JP3003 · 09-08-2005, 07:54 PM

ماشاء الله تبارك الله

جهد متميز يا بدر

الله يعطيك العافية

الحلم العماني · 09-08-2005, 08:13 PM

إقتباس:

المشاركة الأصلية بواسطة code4arab

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

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

تعريفها:
AJAX اختصار لعبارة Asynchronous JavaScript and XML وتتكون من التقنيات التالية:
HTML أو XHTML و CSS لعرض المعلومات

Document Object Model لعرض والتفاعل مع المعلومات المعروضة من خلال JavaScript

كائن XMLHttpRequest لتبادل البيانات بشكل متزامن مع المزود او الخادم.

تقنية XML وهي جزء اختياري لن نحتاج إليه حاليا.

استخدامها:
هذه التقنية تستخدم كوسيلة مساعدة في بناء تطبيقات الويب التفاعلية مثلا عند الحاجة لإرسال او جلب بيانات بدون شرح استخدام تقنية AJAX لبناء تطبيقات الويب التفاعلية. ويمكن استخدامها على أيٍ متصفح يدعم التقنيات المذكورة سابقا وتشمل Internet Explorer و FireFox و Opera وغيرها.

مثال عملي:
سنقوم بإنشاء تطبيق يقوم بجلب بيانات من قاعدة بيانات MySQL بناءا على اختيار المستخدم ومن ثم عرضها له بدون شرح استخدام تقنية AJAX لبناء تطبيقات الويب التفاعلية.

يتكون المثال الذي سنقوم بتطبيقه من ثلاث ملفات:
ملف index.html ويستخدم لعرض البيانات للمستخدم.

ملف test.php ويستخدم لجلب البيانات من قاعدة البيانات.

ملف main.js ويحتوي على دوال الاتصال بالخادم وجلب البيانات وعرضها

ملف index.html

كود HTML:

<html> <head> <title>تجربة</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1256" /> <script src="main.js"></script> </head> <body> <form name="myform"> <select name="myselect" onChange="getInfo()"> <option value="" selected="selected">اختر رقما</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> </form> <div id="mydiv"></div> </body> </html>

ملف main.js

كود HTML:

var http = createRequestObject(); function createRequestObject(){ var request_; var browser = navigator.appName; if(browser == "Microsoft Internet Explorer"){ request_ = new ActiveXObject("Microsoft.XMLHTTP"); } else{ request_ = new XMLHttpRequest(); } return request_; } function getInfo(){ http.open('get', 'test.php?id='+ document.myform.myselect.selectedIndex); http.onreadystatechange = handleInfo; http.send(null); } function handleInfo(){ if(http.readyState == 1){ document.getElementById('mydiv').innerHTML = 'جاري جلب البيانات...'; } if(http.readyState == 4){ var response = http.responseText; document.getElementById('mydiv').innerHTML = response; } }

ملف test.php

كود PHP:

<?php $id=intval($_GET['id']); $dbhost="localhost"; $dbuser="root"; $dbpass=""; $database="test"; $link = @mysql_connect( $dbhost, $dbuser, $dbpass ); $db = @mysql_select_db( $database,$link ); $result = mysql_query("SELECT * FROM mytable WHERE id=$id"); while ( $row = mysql_fetch_array($result) ){ echo $row['name']; } mysql_free_result($result); mysql_close($link); ?>

تركيزنا على ملف main.js وهو يتكون من ثلاثة دوال:
دالة createRequestObject لانشاء كائن الاتصال بالخادم.
دالة getInfo لارسال البيانات إلى ملف test.php
دالة handleInfo وهي دالة مساعدة لدالة getInfo وتقوم بعرض البيانات بعد جلبها

في الغالب لن تحتاج للتعديل على دالة createRequestObject
قم بالتعديل فقط في دالتي getInfo و handleInfo ولك ان تسميها كما تشاء
التعديل الذي ستحتاجه في دالة getInfo
اسم ملف php الذي نستخدمه لعرض البيانات

اسم النموذج في صفحة HTML وهو في المثال الحالي myform

اسم صندوق القائمة المنسدلة وهو في المثال الحالي myselect

نلاحظ أن هذا التغيير سيكون في السطر التالي

كود HTML:

http.open('get', 'test.php?id='+ document.myform.myselect.selectedIndex);

التعديل الذي ستحتاجه في دالة handleInfo
اسم وسم div الذي ستسخدمه لعرض البيانات وهو في المثال الحالي mydiv

نلاحظ ان هذا التغيير سيكون في السطرين التاليين:

كود HTML:

document.getElementById('mydiv').innerHTML = 'جاري جلب البيانات...'; document.getElementById('mydiv').innerHTML = response;

أيضا لاتنسى ان تعدل في ملف test.php حسب إعدادات قاعدة البيانات لديك والمعلومات التي تريد عرضها.

لمشاهدة هذا المثال حيا على الهواء مباشرة اضغط هنا
http://www.aknet.com/ajax/
يوجد في المرفقات ملف مضغوط يحتوي على كامل ملفات هذا التطبيق.

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

تحياتي وتقديري لكم
أخوكم بدر
4/7/1426 هـ

رائع بمعنى الكلمة

ابداع وتميز اخي الكريم

سوف اقوم ان شاء الله بتجربته عند حصولي للوقت الكافي
جزاك الله خيرا

مُجَاهِد · 09-08-2005, 08:32 PM

روعة أخي الكريم ..

ولكن لي استفسار .. حول هذه التقنية ..

هل لك ان تخبرنا عن طرق أخرى في الجلب من قاعدة البيانات ؟؟

لأني ناوي استخدم هذه التقنية في موقعي ..

فهي جميلة جداً..وأكثر من رائعة ..

وخالص المودة

،،

Tec4Serv · 09-08-2005, 08:39 PM

رائع . الله يعطيك العافية استاذ بدر
تحياتي
ahmad

هيرو · 09-08-2005, 10:16 PM

الله يعطيك العــافية أخوي .. و شكرا على الشــرح

Zizwar · 09-08-2005, 10:50 PM

وعليكم السلام ورحمة الله تعالى وبركاته
ماشاء الله عليك بارك الله فيك أخي، كنت سأطرح بدوري موضوع مفصل عن هذه التقنية لكني لم اتممها، وستكون لي عودة لها فيما بعد ان شاءالله
هناك مقالة جميلة وجدتها في المجلة العربية الجديدة الفرقد. ستفيد كل من يريد ان يعرف أكثر عن هذه التقنية
نظرة على تقنية أجاكس!
http://www.farkad.com/2005/07/ajax

Danger_Zone · 10-08-2005, 12:02 AM

يعطيك العافية درس قيم وموضوع رائع

code4arab · 10-08-2005, 02:11 AM

v123v.com >>> العفو اخوي وان شاء الله تتم الاستفادة

ElNeMr >>> العفو وبانتظار تطبيقك

JP3003 >>> الله يعافيك يا ابراهيم وشكرا لمرورك

الحلم العماني >>> شكرا لك وجزاك الله خير

مُجَاهِد >>> شكرا لك .. ماذا تقصد بطرق أخرى لجلب البيانات من قاعدة البيانات؟ أنا وضعت الطريقة في المثال

3rbhost >>> الله يعافيك يا أحمد وشكرا لمرورك

هيرو >>> الله يعافيك ولك تحياتي

Zizwar >>> اهلا بك يا استاذ وبانتظار مشاركتك في الموضوع

Danger_Zone >>> الله يعافيك وباذن الله تستفيد من الدرس

code4arab · 10-08-2005, 02:13 AM

لقد تمكنت بفضل الله من كتابة كود PHP يقوم بتحويل النص من ترميز windows-1256 الى UTF-8 وبالتالي يمكن الاستفادة منه لعرض البيانات المخزنة باللغة العربية في قواعد البيانات

هذا هو الكود

كود PHP:

  $cp1256 = array ("\x81", "\x8A", "\x8D", "\x8E", "\x8F", "\x90", "\x9A", "\x9F", "\xA1",

                 "\xBF", "\xC0", "\xC1", "\xC2", "\xC3", "\xC4", "\xC5", "\xC6", "\xC7",

                 "\xC8", "\xC9", "\xCA", "\xCB", "\xCC", "\xCD", "\xCE", "\xCF", "\xD0",

                 "\xD1", "\xD2", "\xD3", "\xD4", "\xD5", "\xD6", "\xD7", "\xD8", "\xD9",

                 "\xDA", "\xDB", "\xDC", "\xDD", "\xDE", "\xDF", "\xE1", "\xE3", "\xE4",

                 "\xE5", "\xE6", "\xEC", "\xED", "\xF0", "\xF1", "\xF2", "\xF3", "\xF5",

                 "\xF6", "\xF8", "\xFA", "\xFF");

                 

$utf8   = array ("&#x67E;","&#x679;","&#x686;","&#x698;","&#x688;","&#x6AF;","&#x691;",

                 "&#x6BA;","&#x60C;","&#x61F;","&#x6C1;","&#x621;","&#x622;","&#x623;",

                 "&#x624;","&#x625;","&#x626;","&#x627;","&#x628;","&#x629;","&#x62A;",

                 "&#x62B;","&#x62C;","&#x62D;","&#x62E;","&#x62F;","&#x630;","&#x631;",

                 "&#x632;","&#x633;","&#x634;","&#x635;","&#x636;","&#xD7;","&#x637;",

                 "&#x638;","&#x639;","&#x63A;","&#x640;","&#x641;","&#x642;","&#x643;",

                 "&#x644;","&#x645;","&#x646;","&#x647;","&#x648;","&#x649;","&#x64A;",

                 "&#x64B;","&#x64C;","&#x64D;","&#x64E;","&#x64F;","&#x650;","&#x651;",

                 "&#x652;", "&#x6D2;");

 
$arabic = "بسم اللّه الرحمن الرحيم ، أهلا وسهلاً";

 
$utf8 = str_replace($cp1256,$utf8,$arabic);

echo $utf8;

Pal Coder · 10-08-2005, 04:33 AM

ابداع حقيقي منك اخي code4arab

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

بالتوفيق

إنترنت بلس · 10-08-2005, 05:44 AM

جزاك الله كل خير على هذا الدرس والتعريف الممتاز

وسوف تفتح هذه التقنية الباب أمام العديد من التطبيقات التي كنا نتمنى تحقيقها ..
وفقك الله ونفع بك

soso4design · 10-08-2005, 08:33 AM

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

fasal · 10-08-2005, 10:08 AM

الأخ :code4arab
هناك طريقة اسهل يمكنك تجربتها

الملف : file.html

كود:

<html dir="rtl">
<head>
<title>تجربة</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />
<script type="text/javascript" language="javascript">
</script>
<script type="text/javascript" language="javascript">
<!--
function getInfo(cv_id)
{
	document.all('mydiv').innerHTML = 'لحظات جاري البحث ....';
	document.scripts[0].src = 'query.php?id='+cv_id
}
//-->
</script>
</head>

<body>
<form name="myform">
<select name="myselect" onChange="getInfo(this.value)">
<option value="" selected="selected">اختر رقما</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</form>
<div id="mydiv"></div>
</body>
</html>

ملف :query.php

كود PHP:

  <?

if($_GET['id']==1)

echo "document.all('mydiv').innerHTML = 'فيصل';";

elseif($_GET['id']==2)

echo "document.all('mydiv').innerHTML = 'محمد';";

elseif($_GET['id']==3)

echo "document.all('mydiv').innerHTML = 'خالد';";

elseif($_GET['id']==4)

echo "document.all('mydiv').innerHTML = 'عبدالعزيز';";

else

echo "document.all('mydiv').innerHTML = 'غير موجود';";

?>

وبذلك استغنينا عن ملف main.js بجميع محتوياتيه واصبح العمل أسهل