‫الفصل الثالث ‪ :‬تقنية الجاكس‬

‫أهداف الفصل‬
‫‪ .1‬التعرف علي مفهوم تقنية الجاكس‪.‬‬
‫‪ .2‬الطريقة العامة لعمل التطبيقات القائمة على تقنية الجاكس ‪.‬‬
‫‪ .3‬مقارنة طريقة عمل نموذج تطبيقات الجاكس مع نموذج تطبيقات‬
‫الويب العادية ‪.‬‬
‫‪ .4‬التزامن في نموذج الجاكس و النموذج العادي في تطبيقات الويب ‪.‬‬
‫‪ .5‬الدوات المستخدمة في تطبيقات الويب القائمة على تقنية‬
‫الجاكس‪.‬‬
‫‪ .6‬ملخص الفصل‬

‫‪ mud_saad@yahoo.com‬ا‪.‬مدثر سعد احمد سعد –جامعة كردفان‬

 ‫(‬ ‫)‪AJAX Technology‬‬ ‫‪1.3‬تقنية الجاكس‬
‫هي إختصار للمصصصطلح )‪ (Asynchronous JavaScript And XML‬وهصي تقنيصصة أو‬
‫طريقة بواسطتها يمكن تطوير تطبيقات الويب بحيث تصصصبح أكصصثر تفاعليصصة‬
‫وإستجابة للمستخدم ‪،‬حيث يتم التقليل من حالت العودة للمخصصدم وإعصصادة‬
‫تحميل الصفحات من جديد ‪ .‬في الواقع هصصذه التقنيصصة ليسصصت بتقنيصصة قائمصصة‬
‫بحد ذاتها أو مفهوم جديد في مجال برمجصة الصصويب بصل أنهصا مجموعصة مصن‬
‫التقنيات الموجودة أصل ً ‪ ،‬بحيث تكون مجتمعة مايعرف بالجصصاكس )‪(AJAX‬‬
‫والتقنيات هي‪(2):‬‬
‫‪HTML,CSS,DHML‬‬ ‫•‬
‫‪JavaScript‬‬ ‫•‬
‫‪XML‬‬ ‫•‬
‫‪XmlHTTPRequest‬‬ ‫•‬

‫‪1.1.3‬دواعي إستخدام تقنية الجاكس )‪(AJAX‬‬

‫لقد أدخلت تقنية الجاكس تطورا ً كبيرا ً فصصي مجصصال تطبيقصصات الصصويب حيصصث‬
‫ساعدت في حل المشاكل المتعلقة بصالويب ‪ ،‬كمصصا أنهصا سصصاهمت فصصي حصل‬
‫أوجه القصور الموجودة في تقنية التخزين المصصؤقت )‪ (Cache‬فلصصذلك يمكصصن‬
‫تلخيص اسباب إستخدامها في التي )‪: (3‬‬
‫لتحتاج إلي إعدادات خاصة في المخدم ‪.‬‬ ‫‪.1‬‬
‫تخفيف العبء علي المخدم ‪.‬‬ ‫‪.2‬‬
‫سهولة التعامل مع المخدم ‪ ،‬وذلك بأن يتقاسم معه العميل )‬ ‫‪.3‬‬
‫‪ (client‬بعض المعاملت‪.‬‬
‫خفة التصفح بجعل المتصفح ل يعيد تحميل الصفحات من‬ ‫‪.4‬‬
‫جديد‪.‬‬
‫تخفيف العبء علي قواعد البيانات حيث ليتم استدعاء‬ ‫‪.5‬‬
‫البيانات الموجودة مرة أخرى‪.‬‬
‫إمكانية إجراء عملية الرتباط بين العميل )‪ (Client‬و المخدم‬ ‫‪.6‬‬
‫دون أن يكون للمستخدم الحساس بعملية الرتباط التي تمت )اى‬
‫من وراء المستخدم(‪.‬‬
‫إمكانية تحديث الصفحة دون إعادة تحميلها من جديد ‪ ،‬كما‬ ‫‪.7‬‬
‫يتم إرسال الطلبات التي تحتاج الي تحديث فقط للمخدم‪.‬‬
‫رغم الجيابيات السابقة إل انه تقنيسسة الجسساكس بهسا السسسلبيات‬
‫التالية ‪:‬‬
‫بالضرورة يجب أن يكون المتصفح يدعم ‪ java script‬ومع‬ ‫•‬
‫هذا يجب أن يدعم الكائن ‪.HTTP Requests‬‬

‫‪ mud_saad@yahoo.com‬ا‪.‬مدثر سعد احمد سعد –جامعة كردفان‬

‫ملفات الجافا اسكيربت )‪ (Java Script‬التي يتصصم تحميلهصا‬ ‫•‬
‫مع صفحات التطبيق دون ان يعلصصم بهصصا المسصصتخدم يمكصصن ان‬
‫تستغل بصورة سيئة ‪.‬‬
‫بمأن الصفحة ليعاد تحميلهامن جديد فيتصصم إلغصصاء الداة‬ ‫•‬
‫‪ Back‬و الداة ‪Forward‬‬
‫يتم إخفاء عنوان الصفحة التي يصصاتي منهصصا الصصرد و ذلصصك‬ ‫•‬
‫لن هذه الصفحة لتتم مناداتها مباشرة بل عن طريق برنامصصج‬
‫الجافا اسكيربت )‪ (JavaScript‬يتم مناداة الجزء مصصن البرنامصصج‬
‫الذي يقوم بتحديد الرد )‪. (Response‬‬
‫‪2.1.3‬الطريقة العامة لعمسسل تطبيقسسات السسويب القائمسسة‬
‫على تقنية الجاكس‬
‫في المتصفح تتم كتابة برامصصج ‪ JavaScript‬لجلصصب البيانصصات مصصن‬ ‫•‬
‫المخدم ‪.‬‬
‫إذا كانت البيانات المراد جلبهصصا مصصن المخصصدم كصصبيرة فصصإنه يتصصم‬ ‫•‬
‫إستخدام الكائن ‪ XmlHTTPRequest‬لرسصصال الطلصصب للمخصصدم دون أن‬
‫يتسصصبب ذلصصك فصصي تحميصصل الصصصفحة الحاليصصة ويمكصصن للمسصصتخدم ان‬
‫يواصل بقية عمله في هذه الصفحة ‪.‬‬
‫البيانات التي تأتي من المخدم يمكن أن تكون ملفات ‪ XML‬أو‬ ‫•‬
‫ملفات نصصص فقصصط ويمكصصن لبرامصصج ‪ JavaScript‬أن تقصصرأ هصصذه البيانصصات‬
‫وتضعها للستخدام ‪.‬‬
‫‪3.1.3‬مقارنة طريقة عمل نموذج تطبيقات الجسساكس و‬
‫تطبيقات الويب العادية‬
‫في تطبيقات الويب العادية تكون أغلب نشصصاطات المسصصتخدم متمثلصصة فصصي‬
‫إرسال طلبات إلي المخدم ثم يقوم المخدم بمعالجة الطلبصصات و الحصصصول‬
‫علي البيانات ثم إرسالها في صورة ملفات لغة النصوص التشعبية ‪(HTML‬‬
‫)إلي متصفح المسصصتخدم وبالتصصالي تحصصديث كامصصل للصصصفحة الموجصصودة فصصي‬
‫المتصفح وبإستخدام هذه الطريقة يكون المستخدم في حالة انتظصصار حصصتى‬
‫يأتيه الرد من المخدم بينما فصصي التطبيقصصات القائمصصة علصصي تقنيصصة الجصصاكس‬
‫فإن المر يختلف تماما ً عما سبق ‪ ،‬حيث أن الطلبات التي يتم إرسالها إلي‬
‫المخدم هي الطلبات الصتي تحتصاج إلصي تحصديث فقصط ويتصم ذلصك بواسصطة‬
‫محصصرك الجصصاكس )‪ ( AJAX Engine‬وهصصو عبصصارة عصصن برنامصصج ‪ JavaScript‬يتصصم‬
‫تحميله مع الصصصفحة إلصصي المتصصصفح دون أن يكصصون لصصدى المسصصتخدم علصصم‬
‫بعملية التحميل ووظيفة هذا البرنامصصج هصصي إرسصصال الطلبصصات الصصى المخصصدم‬
‫لحظة كتابتها حيث يتم كتابة أسماء المتغيرات التي سوف يتم إرسالها في‬

‫‪ mud_saad@yahoo.com‬ا‪.‬مدثر سعد احمد سعد –جامعة كردفان‬

‫هصصذا البرنامصصج وبالتصصالي لتوجصصد حوجصصة لعصصادة تحصصديث كصصل الصصصفحة الصصتي‬
‫يستخدمها المستخدم حاليا ً حيصث يمكصن للمسصتخدم مواصصلة عملصه علصي‬
‫ذات الصفحة ‪ ،‬بينما يتم إرسال الطلب وتحديث جزء محدد مصصن الصصصفحة ‪،‬‬
‫حيث يتم تسمية هصصذا الجصصزء ويتصصولى برنامصصج الجافصصا إسصصكربت )‪(JavaScript‬‬
‫تحديث هذا الجزء من الصصصفحة‪ .‬والشصصكل )‪ (1.3‬يوضصصح نمصصوذج تطبيقصصات‬
‫الويب القائمة علي الجاكس ‪.‬‬
‫العميل‬
‫‪Client‬‬ ‫واجهة المستخدم‬

‫‪JavaScript call‬‬ ‫‪HTML /CSS data‬‬

‫محرك الجاكس‬

‫‪HTTP Request‬‬
‫‪HTTP Transport‬‬

‫‪Web and /or xml server‬‬

‫المخدم ‪Server‬‬
‫‪Data store‬‬

‫شكل )‪ (1.3‬نموذج تطبيقات الويب القائمة علي تقنية الجاكس‪.‬‬

‫أما في تطبيقات الويب العادية ليحدث هذا السصصيناريو حيصصث تكصصون عمليصصة‬
‫الرتباط بالمخدم مباشرة كما في الشكل)‪. (2.3‬‬

‫واجهة المستخدم‬

‫‪ mud_saad@yahoo.com‬ا‪.‬مدثر سعد احمد سعد –جامعة كردفان‬

 ‫العميل ‪Client‬‬

‫‪HTTP Request‬‬ ‫‪HTTP Transport‬‬ ‫‪HTML+CSS Data‬‬

‫‪Web Server‬‬

‫‪Data Store‬‬

‫المخدم ‪Server‬‬

‫شكل )‪ (2.3‬نموذج تطبيقات الويب العادية‪.‬‬

‫‪4.1.3‬التزامن في نموذج تطبيقسسات الجسساكس و نمسسوذج‬
‫تطبيقات الويب العادية‬
‫في نموذج الجاكس في كل عملية يقوم بها المستخدم عادة ما يتصصم توليصصد‬
‫طلصصب ‪ (HTTP (HTTP Request‬و الصصذي يقصصوم بالرتبصصاط بمحصصرك الجصصاكس‬
‫بواسطة برنامصصج )‪ (JavaScript‬ولكصصن ليصصس كصصل عمليصصة رد )‪ (Response‬تحتصصاج‬
‫للرجوع للمخدم مثال لذلك أن تتم عمليات كتابة البيانات في الذاكرة وفي‬
‫عمليات البحث التي يقصصوم بهصصا المحصصرك بنفسصصه فصصإذا كصصانت هنالصصك حوجصصة‬
‫لبعض الشياء في المخدم أو عمليات تقصصديم بيانصصات للمعالجصصة أو عمليصصات‬
‫تحميل واجهات إستخدام أو بيانصصات جديصصدة فصصإن المحصصرك )‪( Ajax Engine‬‬
‫يجعلها متزامنة ويتم ذلصصك عصصادة بإسصصتخدام ملفصصات ‪ Xml‬ول يوجصصد عمليصصة‬
‫إيقاف لعملية تواصل المسصصتخدم مصصع التطصصبيق ‪ ،‬إذ يمكصصن للمسصصتخدم أداء‬
‫عدة مهام في آن واحد و يؤدي إلي زيييادة الداء بالنسييبة للمسييتخدم وكييذلك تقييل كمييية‬
‫البيانات المنقولة عبر الشبكة ‪.‬‬
‫‪3.2‬الدوات المستخدمة في التصميم بإستخدام تقنية‬
‫الجاكس‬

‫‪ mud_saad@yahoo.com‬ا‪.‬مدثر سعد احمد سعد –جامعة كردفان‬

‫كما ذكر سابقا ً فإن تقنية الجاكس عبارة عن مجموعة مصصن التقنيصصات وكصصل‬
‫من هذه التقنيات يؤدي وظيفة معينة و التقنيات هي ‪:‬‬
‫‪ 1.2.3‬لغة ‪JavaScript‬‬
‫تستخدم الن في مليين صفحات الويب لعدة أغراض منها ‪:‬‬
‫تطوير التصميم‬ ‫•‬

‫عمليات التحقق في النماذج )‪.(Form‬‬ ‫•‬

‫إكتشاف المتصفحات‪.‬‬ ‫•‬

‫كما أنها تؤدي عدة أغراض أخصصرى فلصصذلك هصصي مصصن اللغصصات المفضصصلة فصصي‬
‫تطبيقصصات النصصترنت ولصصذلك فإنهصصا تسصصتخدم فصصي معظصصم المتصصصفحات مثصصل‬
‫‪ Internet Explorer , ،Mozilla‬وكذلك في عدد من المتصفحات الخرى ‪.‬‬
‫‪ 1.1.2.3‬الخدمات و المزايا التي تقدمها الجافا إسكربت‬
‫)‪(JavaScript‬‬
‫تعطي المصممين الذين يستخدمون لغة النصوص التشصصعبية )‬ ‫•‬

‫‪(HTML‬أداة لغصصة برمجيصصة وذلصصك لن )‪ (HTML‬بطبيعتهصصا لغصصة ترميزيصصة‬

‫وليست برمجية‪.‬‬
‫تمكن من وضع نصصصوص متغيصصرة فصصي صصصفحات ‪ HTML‬ومثصصال‬ ‫•‬

‫لذلك ‪ (""<Document.write("<h1>+name+"</h1‬حيصصث يمكصصن بإسصصتخدام‬

‫هذه الجملة طباعة قيمة المتغير ‪.name‬‬
‫توفر إمكانية التعامل مع الحداث التي تنشأ نتيجصصة لسصصتخدام‬ ‫•‬

‫التطصصصبيق فيمكنهصصصا أن تجعصصصل التطصصصبيق يتغيصصصر وفقصصصا ً لنشصصصاطات‬

‫المستخدم ‪.‬‬
‫يمكن إستخدام ‪ JavaScript‬لقراءة و كتابة مكونات )‪.(HTML‬‬ ‫•‬

‫تستخدم في عمليات التحقق من القيم المرسلة للمخدم قبل‬ ‫•‬

‫إجراء عملية إرسالها‪.‬‬

‫إذا كان حجم البيانات المراد إسترجاعها من المخدم متعصصددة‬ ‫•‬

‫فإنها )‪ (JavaScript‬تسمح للكائن ‪ XmlHTTPRequest‬بالرتبصصاط بالمخصصدم‬

‫دون أن يكون لدى المستخدم الحساس بعملية الرتباط إضافة إلصصي‬

‫‪ mud_saad@yahoo.com‬ا‪.‬مدثر سعد احمد سعد –جامعة كردفان‬

‫ذلك فإن هذه العملية تتم دون أن يتم إيقاف نشاط المسصصتخدم فصصي‬
‫إستخدام التطبيق‪.‬‬
‫‪ 2.1.2.3‬وضع عبارات ‪ JavaScript‬داخل ملف ‪HTML‬‬
‫يمكصصن لملصصف ‪ HTML‬أن يحتصصوي علصصي العبصصارات البرمجيصصة المكتوبصصة بلغصصة‬
‫‪ JavaScript‬والشكل )‪ (3.3‬يوضح وضع عبصصارة بسصصيطة مكتوبصصة داخصصل ملصصف‬
‫‪ HTML‬باستخدام ‪. JavaScript‬‬

‫>‪< html‬‬
‫>‪< body‬‬
‫>‪<"Script type="text/javascript‬‬
‫‪("Document.write("hello javascript‬‬
‫>‪<script/‬‬
‫>‪<body/‬‬
‫>‪<html/‬‬
‫شكل )‪ (3.3‬وضع عبارات ‪ JavaScript‬داخل ملف ‪HTML‬‬

‫‪2.2.3‬لغة ‪( XML (eXtensible Markup Language‬‬

‫هي إحدي اللغات الوصفية للبيانات وتتميز عن ‪ HTML‬في التي)‪: (1‬‬
‫‪ XML‬صصصممت لتختصصص بوصصصف البيانصصات بينمصصا ‪ HTML‬تختصصص‬ ‫•‬

‫بكيفية عرض البيانات‪.‬‬

‫عصصدد الوسصصام )‪ (Tags‬فصصي ‪ HTML‬محصصدودة و معروفصصة ولكصصل‬ ‫•‬

‫واحد وظيفة معينصصة يؤديهصصا امصصا فصصي ‪ XML‬فعصصددها غيصصر محصصدد فكصصل‬
‫مستخدم يستطيع ان يعرف مايحتاج اليه من أوسام )‪ ( tags‬لوصف‬
‫بياناته‪.‬‬
‫تتيصصح ‪ XML‬إمكانيصصة التحقصصق مصصن نوعيصصة البيانصصات ويتصصم ذلصصك‬ ‫•‬

‫بإستخدام ‪ DTD‬و ‪. XML Schema‬‬

‫يمكن عصصرض البيانصصات الصصتي توجصصد فصصي الوسصصام ) ‪ ( tags‬فصصي‬ ‫•‬

‫صورة ‪ HTML‬باستخدام ‪.Xslt‬‬

‫‪ XML‬مكملة ‪ HTML‬وليست بديلة لها‪.‬‬ ‫•‬

‫‪ mud_saad@yahoo.com‬ا‪.‬مدثر سعد احمد سعد –جامعة كردفان‬

‫باسصصتخدام ‪ XML‬يمكصصن الفصصصل بيصصن طريقصصة عصصرض البيانصصات‬ ‫•‬

‫ومحتوي البيانات‪.‬‬
‫تسصصتخدم ‪ XML‬لتبصصادل البيانصصات حيصصث يمكصصن إسصصتخدامها فصصي‬ ‫•‬

‫النظمة غير المتوافقة مع بعضها البعض ‪.‬‬

‫يمكن إستخدام ‪ XML‬في البيانصصات المشصصتركة حيصصث ان ملصصف‬ ‫•‬

‫البيانات يمكن إستخدامه بواسطة عدد من المستخدمين‪.‬‬

‫بإستخدام ‪ XML‬تكون البيانصصات مفيصصدة أكصصثر حيصصث أنهصصا تكصصون‬ ‫•‬

‫متاحة لعدد من المستخدمين‪.‬‬

‫من المصادر المفتوحة)‪.( open source‬‬ ‫•‬

‫‪1.2.2.3‬قواعد بناء عناصر ‪XML‬‬

‫يمكصصن أن يحتصصوي السصصم علصصي حصصروف ‪،‬أرقصصام ورمصصوز‬ ‫•‬

‫أخرى ‪.‬‬
‫السم ليحتوي علي مسافات فارغة‪.‬‬ ‫•‬

‫يجب أن يوضع بين العلمتين >‪.<name_of tag‬‬ ‫•‬

‫تعتبر حساسة لحالة الحرف حيث تفرق بيصصن الحصصروف‬ ‫•‬

‫الكبيرة و الصغيرة‪.‬‬
‫كل عنصصصر يجصصب أن يكصصون لصصه نهايصصة علصى الشصصكل >‪/‬‬ ‫•‬

‫‪<name_oftag‬‬
‫‪2.2.2.3‬الشكل العام لملف ‪XML‬‬
‫يتكون من مجموعة من الوسام)‪(Tags‬حيث لكل وسصصم )‪ (Tag‬رمصصز بدايصصة و‬
‫نهاية وبينهما البيانات المراد وصفها ‪.‬يمكن وصف ذلك في الشكل )‪(4.3‬‬

‫>‪<root_element‬‬
‫>‪<child_element >data…………</child_element‬‬
‫>‪<root_element/‬‬

‫‪ mud_saad@yahoo.com‬ا‪.‬مدثر سعد احمد سعد –جامعة كردفان‬

 ‫شكل )‪ (4.3‬الشكل العام لملف ‪.XML‬‬

‫‪ 3.2.3‬لغة ‪(PHP (Personal Home Page‬‬

‫إحدي المصادر المفتوحة)‪ ( open source‬والتي تختص في برمجصصة العمليصصات‬
‫التي تحدث في المخدم ‪،‬حيث يمكن بواسطتها إجصصراء كصل العمليصصات علصصي‬
‫البيانات في قواعد البيانصصات مصصن إدخصصال‪،‬تحصصديث‪،‬إسصصتعلم ‪ ،‬حصصذف‪ .‬فعلصصى‬
‫سبيل المثال إذا كانت صفحة تسصصمى ‪ index.php‬تخصصص تطصصبيق معيصصن فعنصصد‬
‫إجراء عملية طلب لهذه الصفحة كما في الشصصكل ) ‪ (5.3‬فصصي المتصصصفح ‪،‬‬
‫فبعد أن يقوم المخدم بمعالجة البيانصصات المطلوبصصة فصصي الصصصفحة يجصصب أن‬
‫يعيد الرد )‪ (Response‬للمستخدم في صورة ‪ HTML‬أو بأي لغة يفهمهصصا جهصصاز‬
‫العميل )‪. (client‬‬

‫طلب)‪ (Request‬صفحة ‪index.php‬‬ ‫معالجة‬

‫صفحة ‪PHP‬‬
‫وبناء‬
‫‪HTML‬‬

‫رد )‪ (Response‬في صورة ‪HTML‬‬

‫المخدم ‪Server‬‬
‫جهاز العميل ‪Client‬‬

‫شكل )‪ ( 5.3‬عملية الطلب)‪ (Request‬والرد)‪ (Response‬باستخدام ‪.PHP‬‬

‫‪ mud_saad@yahoo.com‬ا‪.‬مدثر سعد احمد سعد –جامعة كردفان‬

 ‫‪1.3.2.3‬دواعي استخدام ‪PHP‬‬
‫بما أن لغات برمجة تطبيقات الويب كصصثيرة العصصدد و الصصتي يمكصصن أن تصصؤدي‬
‫وظائف )‪ (PHP‬فيتم إستخدام )‪ (PHP‬للسباب التية )‪: (4‬‬
‫من المصادر المفتوحة‬ ‫•‬

‫بعد أن أصبح أغلب مستخدمي تطبيقات الويب يسصصعون إلصصي تقليصصل‬

‫تكصصاليف تسصصكين برامجهصصم ‪،‬إتجصصه مصصصممي تطبيقصصات الصصويب إلصصي‬
‫المصادر المفتوحة والتي يقوم بتطويرها مطوري الويب حيث ليوجد‬
‫عملية دفع عند إستخدام إحدى أدوات المصادر المفتوحة‪.‬‬
‫قابلية التوسعة‬ ‫•‬

‫يمكن توسعة مترجم ‪ PHP‬بسهولة وإضافة إليه ميصصزات أخصصرى وذلصصك‬

‫باستخدام لغة ‪ C‬وذلك لن الشفرة التي كتب بها مفتوحة‪.‬‬
‫سريعة وسهلة‬ ‫•‬

‫إن عملية المقارنة بين اللغات من حيث السرعة عملية صعبة فعلصصي‬
‫سبيل المثال إن البرامج المكتوبة بلغة ‪ C‬تكون سريعة ولكنها صعبة‬
‫لحد ما ‪ ،‬كما أنها طويلة مقارنة باللغصصات الخصصرى فلغصصة ‪ PHP‬سصصريعة‬
‫مقارنة باللغات الخرى كما أن سياقها قريب جدا ً مصصن لغصصات ‪ASP،JS‬‬

‫‪.P‬‬
‫متعددة بيئات العمل‬ ‫•‬

‫عند إجراء عملية تنفيذ لبرنامج ‪ PHP‬فيمكصصن تنفيصصذه فصصي عصصدة بيئات‬
‫مختلفة منها ‪:‬‬
‫‪Windows 2000/NT‬‬ ‫•‬
‫‪.Unix‬‬ ‫•‬

‫مع كل من ‪ IIS ،Apache‬وفي عدد من المتصفحات‪.‬‬ ‫•‬

‫‪Apache 4.2.3‬‬

‫‪ mud_saad@yahoo.com‬ا‪.‬مدثر سعد احمد سعد –جامعة كردفان‬

‫يعتصصبر مصصن مخصصدمات الصصويب )‪ (Web Server‬المحببصصة لصصدى أغلصصب مصصصممي‬
‫تطبيقات الويب إذ أنه من المصادر المفتوحة إضافة إلي ذلصصك أنصصه ليعمصصل‬
‫فقط تحت بيئة ‪ Unix‬فيمكن له أن يعمل في بيئة ‪ Windows‬إضافة إلي ذلصصك‬
‫انه سريع ‪.‬‬
‫‪(DOM 5.2.3 (Document Object Model‬‬
‫عبارة عن تمثيصصل كصصائني مصصوجه لملفصصات ‪XML‬و ‪ HTML‬حيصصث تقصصوم بتمثيصصل‬
‫الهيكل العام لملف ‪XML‬و ‪ HTML‬لكائنات متدرجة لجراء عملية إعراب لها‬
‫بواسطة أدوات ‪ XML‬القياسية)‪(1‬‬
‫‪MYSQL 6.2.3‬‬
‫إحدى المصادر المفتوحة وتخص أنظمصصة قواعصصد البيانصصات كمصصا تتميصصز بعصصدة‬
‫مزايا من بينها ‪:‬‬
‫سهولة الستخدام‪.‬‬ ‫•‬

‫يمكن إستخدامها مع أدوات تجعلها عملية‪.‬‬ ‫•‬

‫من المصادر المفتوحة )‪.(open source‬‬ ‫•‬

‫تعمل في مختلف البيئات ‪.‬‬ ‫•‬

‫لتحتاج إلي ذاكرة كبيرة‪.‬‬ ‫•‬

‫سريعة في عمليصصات السصصترجاع وغيرهصصا مصصن العمليصصات الصصتي‬ ‫•‬

‫تجرى على البيانات‪.‬‬

‫يمكن أن تستخدم عندما يكون حجم البيانصصات المصصراد تخزينهصصا‬ ‫•‬

‫كبير‪.‬‬

‫‪XmlHTTPRequest Object 7.2.3‬‬

‫‪ mud_saad@yahoo.com‬ا‪.‬مدثر سعد احمد سعد –جامعة كردفان‬

‫يعتبر العمود الفقري في التطبيقات القائمة على تقنية الجاكس )‪، (AJAX‬‬
‫فيجب قبل إرسال طلصصب )‪ (Request‬أو إسصصتقبال رد)‪ (Response‬مصصن المخصصدم‬
‫‪،‬إستخدام ‪ JavaScript‬لنشاء كائن ‪ XmlHTTPRequest‬فهصصو صصصيغة غيصصر قياسصصية‬
‫من ‪ W3C‬فعند إستخدام ‪ Internet Explorer‬كمتصصصفح فيتصصم تعريفصصه مصصن نصصوع‬
‫‪ ActiveX‬أما المتصفحات الخرى مثل سفاري ‪ Safari‬فيتم تنفيذه ككائن مصصن‬
‫نصصوع ‪ JavaScript‬ونسصصبة لهصصذه الختلفصصات فيجصصب أن تحتصصوي ‪ JavaScript‬علصصى‬
‫منطق لنشاء ‪ XmlHTTPRequest‬بإستخدام تقنية ‪ ActiveX‬أو إستخدام كائن )‬
‫‪.JavaScript( 2‬‬
‫‪1.7.2.3‬كيفية إنشاء الكائن ‪XmlHTTPRequest‬‬
‫‪;Var xmlHttp‬‬
‫‪()Function createXMLHttpRequest‬‬
‫}‬
‫‪(If(window.ActiveXObject‬‬
‫}‬
‫‪;("xmlHttp=new ActiveXObject("Microsoft.XMLHTTP‬‬
‫‪(else if(window.XMLHTTPRequest‬‬
‫}‪;()xmlHttp=new XMLHTTPRequest‬‬
‫{‬
‫{‬
‫شكل )‪ (6.3‬كيفية إنشاء كائن ‪(XMLHTTPRequest (2‬‬
‫يلحظ من العبارات السابقة إن عملية إنشاء ‪ XmlHTTPRequest‬تتطلصصب اول ً‬
‫تعريف متغير عصصام يصصدعى ‪ xmlHttp‬وذلصصك لتخزيصصن مرجصصع لهصصذا الكصصائن‪ .‬أمصصا‬
‫الدالصصة المسصصماة ‪ createXMLHttpRequest‬تقصصوم بالفعصصل بإنشصصاء هصصذا الكصصائن‬
‫‪،‬فالدالة تحتوي علي عبارات منطقية بسيطة وذلك لتحديد كيفية إنشاء هذا‬
‫الكائن ‪،‬فعملية التصال ‪ window.ActiveXObject‬ترجع هصصذا الكصصائن أو لشصصي )‬
‫‪ (Null‬ويحدد ذلك بواسطة عبارة ‪ if‬فإذا كصصان المتصصصفح يصصدعم ‪ ActiveX‬فهصصو‬
‫‪ Internet Explorer‬والكائن ‪ XMLHTTPRequest‬سوف يتم إنشاءه حيث يتم ذلك‬
‫بتمريصصصر نصصصص يوضصصصح نصصصوع الكصصصائن ‪.ActiveX‬أمصصصا إذا فشصصصلت العبصصصارة‬

‫‪ mud_saad@yahoo.com‬ا‪.‬مدثر سعد احمد سعد –جامعة كردفان‬

 ‫‪ window.ActiveXObject‬فصصان عبصصارة عصصدا ذلصصك )‪ (else‬تنفصصذ‪ .‬فتتصصم معرفصصة أن‬
‫المتصفح يدعم ‪ XmlHTTPRequest‬ككائن من نوع ‪.JavaScript‬‬
‫‪XmlHTTPRequest‬‬ ‫‪ 2.7.2.3‬الدوال الموجودة في الكائن‬
‫يوجد عدد من الدوال في الكائن ‪ XmlHTTPRequest‬ولكل منها وظيفة تؤديها‬
‫‪.‬الجدول )‪ ( 1.3‬يوضح وصف هذه الدوال)‪. ( 2‬‬
‫الوصف‬ ‫الدالة‬
‫‪ ()Abort‬إيقاف الطلب الحالي‬
‫‪ ("getResponseHeader("header‬ترجع نص هو قيمة الترويسة‬
‫الرئيسية المحددة‬
‫‪ ()getAllResponseHeader‬ترجع كل الترويسة الرئيسية‬
‫لنتيجة طلب ‪HTTP‬‬
‫‪ ("Open("method","url‬تقوم بوضع مرحلة الرتباط‬
‫بالمخدم حيث يمكن للدالة أن‬
‫تكون ‪ post،get‬أو ‪ put‬أما ‪url‬‬

‫فيمكن أن يكون أي عنوان يتم‬

‫تحديده‬
‫‪ (Send(content‬إرسال الطلب للمخدم‬
‫‪ ("setRequestHeader("header","value‬تقوم بوضع القيمة المعطاة‬
‫للعنوان المحدد‬
‫جدول )‪ ( 1.3‬الدوال الموجودة في الكائن ‪(XmlHTTPRequest (2‬‬

‫‪ 3.7.2.3‬الخصائص القياسية في الكائن ‪XmlHTTPRequest‬‬

‫يوجد عدد من الخصائص القياسية في كائن ‪ XmlHTTPRequest‬والصصتي تعصصبر‬

‫الحالية فيمكن وصفها في الجدول ) ‪( 2.3‬‬ ‫عن الحالة‬
‫الوصف‬ ‫الخاصية‬
‫يتم معالجة الحدث في كل عملية‬ ‫‪Onreadystatechange‬‬

‫تغيير للحالة وكأنها عملية مناداة‬

‫لدالة ‪javascript‬‬
‫تأخذ القيم )‪ 0‬لحالة البداية‪ 1،‬يتم‬ ‫‪Readystate‬‬

‫التحميل‪ 2،‬تمت عملية التحميل‪3،‬‬

‫تعمل الن ‪ 4،‬إكتملت(‬

‫‪ mud_saad@yahoo.com‬ا‪.‬مدثر سعد احمد سعد –جامعة كردفان‬

‫تحدد إن الرد الذي سوف يأتي من‬ ‫‪responseText‬‬

‫المخدم عبارة عن نص‬

‫تحدد إن الرد عبارة عن ‪XML‬‬ ‫‪responseXML‬‬
‫تعبر عن حالت ‪ HTTP‬حيث ‪200‬‬ ‫‪Status‬‬

‫لعملية ‪ OK،404‬لعملية ‪NotFound‬‬

‫لتحدد إصدار النص في ‪HTTP‬‬ ‫‪statusText‬‬
‫جدول )‪ ( 2.3‬الخصائص القياسية في الكائن ‪(XmlHTTPRequest (1‬‬

‫‪4.7.2.3‬إجراءات إرسال كائن ‪XmlHTTPRequest‬‬

‫تتضمن عملية إجراءات إرسال كائن ‪ XmlHTTPRequest‬التي )‪(1‬‬
‫تضمين دالة ‪ JavaScript‬في أحداث ‪.HTML‬‬ ‫•‬

‫إنشاء كائن ‪ XMLHTTPRequest‬في دالة ‪.JavaScript‬‬ ‫•‬

‫فتح كائن ‪ XMLHTTPRequest‬لتحديد العنوان المحدد ودالة‬ ‫•‬

‫‪.HTTP‬‬
‫تسجيل عملية حدوث رجوع وذلك عند إكتمال الطلب‪.‬‬ ‫•‬

‫إرسال كائن ‪ XMLHTTPRequest‬متزامنا ً ‪.‬‬ ‫•‬

‫إسترجاع الرد )‪ (Response‬كهيئة ‪ Xml‬ثم تغيير صفحة ‪.HTML‬‬ ‫•‬

‫)‪Processing‬‬ ‫‪ 3.3‬كيفية معالجة الرد الذي يأتي من المخدم‬

‫‪(the Server Response‬‬
‫يوفر كائن ‪ XMLHTTPRequest‬خاصيتين للتعامصصل مصصع الصصرد الصصذي يصصأتي مصصن‬
‫المخدم هما ‪:‬‬
‫الرد النصي ‪:‬‬ ‫•‬

‫في هذه الحالة يتم التعامل مع الرد كنص عادي‪.‬‬

‫التعامل مع الرد كهيئة ‪.XML‬‬ ‫•‬

‫‪ mud_saad@yahoo.com‬ا‪.‬مدثر سعد احمد سعد –جامعة كردفان‬

‫فعندما تكون حالة الرد بسيطة فالجدى التعامل معها كنص بسصصيط ومثصصال‬
‫لذلك عندما نستخدم مربع التحذير )‪ (Alert Box‬لعصصرض رسصصالة تحصصذير كصصرد‬
‫قادم من المخدم)‪. ( 2‬‬
‫‪1.3.3‬إستخدام خاصية ‪ innerHTML‬لنشاء محتوى ديناميكي‬
‫إن عملية معالجة الرد الذي يأتي من المخدم كنصصص عصصادي ليصصس بالمرونصصة‬
‫الكبيرة حيث أن طريقة النص تعاني من عدة أمور منها البنية التركيبية كما‬
‫توجصصد صصصعوبة فصصي عمليصصة إعرابصصه )‪ (Parsing‬بإسصصتخدام ‪ JavaScript‬كمصصا أن‬
‫عملية إنشاء صصصفحة متغيصصرة المحتصصوى فصصي غايصصة الصصصعوبة‪ .‬يمكصصن إعتبصصار‬
‫طريقة النص العادي للتعامل مع الرد كفوءة إذا تم إستخدامها مصصع خاصصصية‬
‫‪ innerHTML‬لعناصصصر ‪ HTML‬حيصصث يصصتيم إسصصتخدام نصصص بسصصيط لتمثيصصل‬
‫المحتصصوى بيصصن مجموعصصة رموزالبدايصصة والنهايصصة وذلصصك بإسصصتخدام النصصص و‬
‫‪ innerHTML‬مع بعضهما حيث يمكن للمخدم إنتاج محتوى ‪ HTML‬يعالصصج فصصي‬
‫المتصفح باستخدام خاصية ‪(innerHTML (2‬‬
‫‪ 4.3‬التعامل مع الحداث التي تنشأ في المتصفح‬
‫إن طبيعة التطبيقات المتفاعلة تحتم على برامجهصصا المكتوبصصة التفاعصصل مصصع‬
‫الحداث التي تحدث في المتصفح نتيجصصة لسصصتخدام التطصصبيق ومثصصال لتلصصك‬
‫الحداث‪ ،‬الضغط على أيقونة ‪،‬رابط ‪ ،‬تحريك الماوس أو تحميصصل صصصفحة ‪.‬‬
‫الجدول )‪( 3.3‬يوضح بعض هذه الحداث ودواعي ظهورها‪.‬‬
‫الوصف‬ ‫الحدث‬
‫يحدث عندما يرفض المستخدم حدثا معينا ً‬ ‫‪Onabort‬‬

‫يحث عندما تتغير البيانات في أداة تحكم معينة مثل‬ ‫‪Onchange‬‬

‫مربع نص‬
‫يظهر عند الضغط على عنصر معين‬ ‫‪Onclick‬‬
‫يحدث عندما يكون هنالك خطا في عبارات ‪JavaScript‬‬ ‫‪Onerror‬‬
‫يحدث عند تحميل الصفحة‬ ‫‪Onload‬‬
‫نتيجة للضغط على أيقونة الرسال يتولد هذا الحدث‬ ‫‪Onsubmit‬‬
‫يحدث عندما ليحمل المتصفح الصفحة وينتقل لصفحة‬ ‫‪Onunload‬‬

‫أخرى‬
‫يظهر عند الضغط على أي مفتاح‬ ‫‪Onkeypress‬‬
‫يظهر عندما يحرك المستخدم زر الماوس عند عنصر‬ ‫‪Onmouseout‬‬

‫‪ mud_saad@yahoo.com‬ا‪.‬مدثر سعد احمد سعد –جامعة كردفان‬

 ‫محدد‬
‫‪ Onmousedown‬يظهر هذا الحدث عند تحريك مؤشر الماوس أسفل‬
‫أيقونة معينة‬
‫جدول )‪ (3.3‬بعض الحداث التي تنشا في المتصفح عند إستخدام تطبيق‬
‫معين‪.‬‬

‫‪ mud_saad@yahoo.com‬ا‪.‬مدثر سعد احمد سعد –جامعة كردفان‬

 ‫‪5.3‬ملخص الفصل‬
‫في هذا الفصل تمت مناقشة مفهوم تقنية الجاكس))‪AJAX‬‬

‫‪ ((HTML,CSS,DHML,JavaScriptXMLXmlHTTPRequest‬و الدوات المكونة لها‬

‫والدور الذي تلعبه كل أداة إضافة لذلك تم توضيح التزامن في كل من‬
‫تطبيقات الويب القائمة على الطريقة العادية لعمل الويب و التطبيقات‬
‫القائمة على تقنية الجاكس‪ ،‬كما تم شرح بعض الحداث التي تنشأ في‬
‫المتصفح ودواعي ظهور كل حدث‪.‬‬

‫‪ mud_saad@yahoo.com‬ا‪.‬مدثر سعد احمد سعد –جامعة كردفان‬