[تعلم أجاكس في أربعة أيام] اليوم الأول لتعلم برنامج أجاكس التعليمي

يتكون Ajax من تقنية HTML وJavaScript™ وDHTML وDOM، وهو طريقة رائعة لتحويل واجهات الويب المرهقة إلى تطبيقات Ajax تفاعلية. يوضح هذا المقال، الذي كتبه أحد خبراء Ajax، كيفية عمل هذه التقنيات معًا — بدءًا من نظرة عامة إلى مناقشة تفصيلية — لجعل تطوير الويب الفعال حقيقة واقعة. كما أنه يزيل الغموض عن مفاهيم Ajax الأساسية، بما في ذلك كائن XMLHttpRequest.

قبل خمس سنوات، إذا كنت لا تعرف لغة XML، فقد كنت بطة قبيحة لم يأخذها أحد على محمل الجد. منذ ثمانية عشر شهرًا، أصبحت روبي مركز الاهتمام، ولم يكن بإمكان المبرمجين الذين لا يعرفون روبي سوى الجلوس على مقاعد البدلاء. اليوم، إذا كنت تريد مواكبة أحدث صيحات التكنولوجيا، وجهتك هي Ajax.

لكن Ajax هو أكثر من مجرد موضة، فهو وسيلة قوية لبناء مواقع الويب التي ليست صعبة مثل تعلم لغة جديدة تمامًا.

ولكن قبل أن ندخل في تفاصيل ما هو Ajax، دعونا نأخذ بضع دقائق لفهم ما يفعله Ajax. يوجد حاليًا خياران أساسيان عند كتابة التطبيقات:

· تطبيقات سطح المكتب · تطبيقات الويب.

الاثنان متشابهان، وعادةً ما تأتي تطبيقات سطح المكتب على قرص مضغوط (يمكن تنزيلها أحيانًا من موقع ويب) ويتم تثبيتها بالكامل على جهاز الكمبيوتر الخاص بك. قد تستخدم تطبيقات سطح المكتب الإنترنت لتنزيل التحديثات، ولكن الكود الذي يقوم بتشغيل هذه التطبيقات موجود على كمبيوتر سطح المكتب. تعمل تطبيقات الويب على خادم ويب في مكان ما، وليس من المستغرب أن يتم الوصول إلى هذه التطبيقات من خلال متصفح الويب.

ومع ذلك، فإن الأهم من مكان وضع الكود الذي يقوم بتشغيل هذه التطبيقات هو كيفية عمل التطبيقات والتفاعل معها. تتميز تطبيقات سطح المكتب بشكل عام بالسرعة (يتم تشغيلها مباشرة على جهاز الكمبيوتر الخاص بك دون انتظار اتصال بالإنترنت)، ولها واجهة مستخدم جميلة (تعتمد عادةً على نظام التشغيل)، كما أنها ديناميكية بشكل ملحوظ. يمكنك النقر على القوائم والقوائم الفرعية وتحديدها وكتابتها وفتحها والتنقل فيها وعدم الانتظار أبدًا.

من ناحية أخرى، تعد تطبيقات الويب أحدث الاتجاهات، حيث تقدم خدمات غير ممكنة على سطح المكتب (مثل Amazon.com وeBay). ومع ذلك، مع قوة الويب تأتي الحاجة إلى الانتظار، وانتظار استجابة الخادم، وانتظار تحديث الشاشة، وانتظار عودة الطلب وإنشاء صفحة جديدة.

من الواضح أن هذا تبسيط مبالغ فيه، لكن المفهوم الأساسي هو هذا. كما كنت قد خمنت، يحاول Ajax ربط وظائف تطبيقات سطح المكتب وتفاعلها مع تطبيقات الويب المتطورة باستمرار. يمكنك استخدام واجهات المستخدم الديناميكية وعناصر التحكم الجميلة مثل تلك الموجودة في تطبيقات سطح المكتب، ولكن في تطبيق الويب.

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

التكنولوجيا القديمة، الحيل الجديدة

عندما يتعلق الأمر بـ Ajax، فهو يتضمن في الواقع مجموعة متنوعة من التقنيات، ويتطلب استخدامه بمرونة فهمًا عميقًا لهذه التقنيات المختلفة (ستناقش المقالات القليلة الأولى في هذه السلسلة كل تقنية من هذه التقنيات على حدة). والخبر السار هو أنك على الأرجح على دراية بمعظم هذه التقنيات، والأفضل من ذلك هو أنها سهلة التعلم وليست صعبة مثل لغة البرمجة الكاملة مثل Java أو Ruby.

فيما يلي التقنيات الأساسية المستخدمة في تطبيقات Ajax:

· يتم استخدام HTML لبناء نماذج الويب وتحديد الحقول المستخدمة بواسطة الأجزاء الأخرى من التطبيق.
· كود JavaScript هو الكود الأساسي الذي يقوم بتشغيل تطبيقات Ajax ويساعد على تحسين الاتصال مع تطبيقات الخادم.
· DHTML أو HTML الديناميكي لتحديث النماذج ديناميكيًا. سنستخدم div، والامتدادات، وعناصر HTML الديناميكية الأخرى لترميز HTML.
· يتم استخدام نموذج كائن المستند DOM لمعالجة (عبر كود JavaScript) بنية HTML و(في بعض الحالات) ملف XML الذي يتم إرجاعه بواسطة الخادم.

تعريف Ajax

بالمناسبة، Ajax هو اختصار لـ Asynchronous JavaScript وXML (وDHTML، وما إلى ذلك). هذه العبارة صاغها جيسي جيمس جاريت من Adaptive Path (انظر الموارد)، وكما يوضح جيسي، فهي ليست اختصارًا.

دعونا نحلل بشكل أكبر مسؤوليات هذه التقنيات. سأناقش هذه التقنيات بعمق في المقالات المستقبلية، لكن في الوقت الحالي فقط تعرف على المكونات والتقنيات. كلما كنت أكثر دراية بهذه الرموز، أصبح من الأسهل الانتقال من الفهم المتناثر لهذه التقنيات إلى الفهم الحقيقي لهذه التقنيات (مما يفتح الباب أيضًا لتطوير تطبيقات الويب).

كائن XMLHttpRequest

قد يكون الكائن الوحيد الذي عليك فهمه هو أيضًا الكائن غير المألوف بالنسبة لك، وهو XMLHttpRequest. هذا كائن JavaScript، وإنشاءه أمر بسيط، كما هو موضح في القائمة 1.

القائمة 1. إنشاء كائن XMLHttpRequest جديد

<script language="javascript" type="text/javascript">
var xmlHttp = new XMLHttpRequest();
</script>

سنناقش هذا الكائن بمزيد من التفصيل في المقالة التالية، لكن اعلم الآن أن هذا هو الكائن الذي يتعامل مع جميع اتصالات الخادم. قبل مواصلة القراءة، توقف وفكر في هذا: تقنية JavaScript هي التي تتحدث إلى الخادم من خلال كائن XMLHttpRequest. هذا ليس تدفقًا عاديًا للتطبيق، ومن هنا تأتي قوة Ajax.

في تطبيق ويب نموذجي، يقوم المستخدم بملء حقول النموذج والنقر فوق الزر إرسال. يتم بعد ذلك إرسال النموذج بأكمله إلى الخادم، الذي يعيد توجيهه إلى برنامج نصي يتعامل مع النموذج (عادةً PHP أو Java، وربما عملية CGI أو شيء مشابه)، ثم يرسل مرة أخرى صفحة جديدة تمامًا عند اكتمال البرنامج النصي. قد تكون الصفحة بتنسيق HTML مع نموذج جديد تم ملؤه بالفعل ببعض البيانات، أو قد تكون صفحة تأكيد، أو قد تكون صفحة تحتوي على بعض الخيارات المحددة بناءً على البيانات التي تم إدخالها في النموذج الأصلي. بالطبع، يجب على المستخدم الانتظار حتى يقوم البرنامج النصي أو البرنامج الموجود على الخادم بمعالجة النموذج الجديد وإرجاعه. تصبح الشاشة فارغة وتنتظر حتى يتم إرجاع البيانات من الخادم قبل إعادة الرسم. ولهذا السبب يكون التفاعل ضعيفًا، ولا يحصل المستخدم على تعليقات فورية، لذلك يبدو الأمر مختلفًا عن تطبيق سطح المكتب.

يقوم Ajax بشكل أساسي بوضع تقنية JavaScript وكائن XMLHttpRequest بين نموذج الويب والخادم. عندما يقوم المستخدم بملء النموذج، يتم إرسال البيانات إلى بعض أكواد JavaScript بدلاً من إرسالها مباشرة إلى الخادم. وبدلاً من ذلك، يقوم كود JavaScript بالتقاط بيانات النموذج وإرسال طلب إلى الخادم. وفي الوقت نفسه، لن يومض النموذج الموجود على شاشة المستخدم أو يختفي أو يتأخر. بمعنى آخر، يرسل كود JavaScript الطلب خلف الكواليس دون أن يعلم المستخدم حتى أنه تم تقديم الطلب. والأفضل من ذلك، أنه يتم إرسال الطلب بشكل غير متزامن، مما يعني أن كود JavaScript (والمستخدم) لا يتعين عليهم انتظار استجابة من الخادم. بحيث يمكن للمستخدم الاستمرار في إدخال البيانات والتمرير واستخدام التطبيق.

يقوم الخادم بعد ذلك بإرجاع البيانات إلى كود JavaScript (الذي لا يزال في نموذج الويب)، والذي يقرر ما يجب فعله بالبيانات. يقوم بتحديث بيانات النموذج بسرعة، مما يعطي الانطباع بأن الطلب قد اكتمل على الفور، دون إرسال النموذج أو تحديثه والحصول على بيانات جديدة للمستخدم. يمكن لرمز JavaScript إجراء بعض العمليات الحسابية على البيانات المستلمة وإرسال طلب آخر، كل ذلك دون تدخل المستخدم! هذه هي قوة XMLHttpRequest. ويمكنه التفاعل مع الخادم من تلقاء نفسه حسب الحاجة، وقد يكون المستخدم غير مدرك تمامًا لما يحدث خلف الكواليس. والنتيجة هي تجربة ديناميكية وسريعة الاستجابة وتفاعلية للغاية تشبه تطبيقات سطح المكتب، ولكن مع كل قوة الإنترنت التي تدعمها.

إضافة بعض JavaScript

للحصول على مقبض XMLHttpRequest، أصبح رمز JavaScript الآخر بسيطًا جدًا. في الواقع، سوف نستخدم كود جافا سكريبت لإنجاز المهام الأساسية للغاية:

· الحصول على بيانات النموذج: يمكن لكود جافا سكريبت استخراج البيانات بسهولة من نموذج HTML وإرسالها إلى الخادم.
· تعديل البيانات في النموذج: يعد تحديث النموذج أمرًا سهلاً أيضًا، بدءًا من تحديد قيم الحقول وحتى استبدال الصور بسرعة.
· تحليل HTML وXML: استخدم كود JavaScript لمعالجة DOM (انظر القسم التالي) ومعالجة بنية بيانات XML التي يتم إرجاعها بواسطة خادم نماذج HTML.

بالنسبة للنقطتين الأوليين، يجب أن تكون على دراية جيدة بطريقة getElementById()، كما هو موضح في القائمة 2.

القائمة 2. التقاط وتعيين قيم الحقول باستخدام كود JavaScript

// احصل على قيمة حقل "الهاتف" وقم بوضعه في متغير يسمى الهاتف
var phone = document.getElementById("phone").value;

// قم بتعيين بعض القيم في النموذج باستخدام مصفوفة تسمى الاستجابة
document.getElementById("order").value = Response[0];
document.getElementById("address").value = Response[1];

لا يوجد شيء خاص يجب ملاحظته هنا، إنه رائع! يجب أن تدرك أنه لا يوجد شيء معقد للغاية هنا. بمجرد أن تتقن XMLHttpRequest، فإن بقية تطبيق Ajax الخاص بك عبارة عن كود JavaScript بسيط، كما هو موضح في القائمة 2، ممزوجًا بكمية صغيرة من HTML. في الوقت نفسه، نحتاج أيضًا إلى استخدام القليل من DOM، لذلك دعونا نلقي نظرة.

تنتهي بـ DOM

وأخيرًا هناك DOM، نموذج كائن المستند. قد يكون DOM مخيفًا بعض الشيء لبعض القراء. نادرًا ما يستخدمه مصممو HTML، وحتى مبرمجو JavaScript نادرًا ما يستخدمونه إلا إذا كانوا يريدون إكمال مهمة برمجة متطورة. تستخدم برامج Java وC/C++ المعقدة نموذج DOM بشكل مكثف، وهو ما قد يكون السبب وراء صعوبة تعلم DOM.

لحسن الحظ، يعد العمل مع DOM في تقنية JavaScript أمرًا سهلاً وبديهيًا للغاية. الآن، تقليديًا، ربما ينبغي عليك شرح كيفية استخدام DOM، أو على الأقل تقديم بعض الأمثلة على التعليمات البرمجية، ولكن القيام بذلك قد يؤدي أيضًا إلى تضليلك. حتى لو تجاهلت DOM، فلا يزال بإمكانك التعمق في Ajax، وهذا هو النهج الذي سأتبعه. سنعود إلى DOM في مقال مستقبلي، ولكن يكفي الآن أن تعرف أنك قد تحتاج إليه. سنتعمق أكثر في DOM عندما نحتاج إلى تمرير XML بين كود JavaScript والخادم وتغيير نماذج HTML. يمكنك القيام ببعض الأعمال المثيرة للاهتمام بدونه، لذا ضع DOM جانبًا في الوقت الحالي.

الحصول على كائن الطلب

باستخدام المعرفة الأساسية المذكورة أعلاه، دعنا نلقي نظرة على بعض الأمثلة المحددة. يقع XMLHttpRequest في قلب تطبيقات Ajax وقد يكون غير مألوف للعديد من القراء، لذلك دعونا نبدأ من هنا. كما ترون من القائمة 1، فإن إنشاء هذا الكائن واستخدامه أمر بسيط للغاية، أليس كذلك؟ انتظر.

هل تتذكر حروب المتصفحات السيئة تلك منذ بضع سنوات مضت؟ لا شيء يعطي نفس النتائج عبر متصفحات مختلفة. صدق أو لا تصدق، لا تزال هذه الحروب مستمرة، ولو على نطاق أصغر. لكن الغريب أن XMLHttpRequest أصبح أحد ضحايا هذه الحرب. ولذلك فإن الحصول على كائن XMLHttpRequest قد يتطلب أسلوبًا مختلفًا. سأشرح ذلك بالتفصيل أدناه.

استخدام مستعرض Microsoft

يستخدم مستعرض Microsoft Internet Explorer محلل MSXML لمعالجة XML (يمكنك معرفة المزيد حول MSXML في الموارد). لذلك، إذا قمت بكتابة تطبيق Ajax يتفاعل مع Internet Explorer، فيجب عليك إنشاء كائنات بطريقة خاصة.

لكن الأمر ليس بهذه البساطة. يوجد في الواقع إصداران مختلفان من MSXML اعتمادًا على إصدار تقنية JavaScript المثبتة في Internet Explorer، لذا يجب عليك كتابة تعليمات برمجية منفصلة لكل حالة. راجع القائمة 3، التي تحتوي على التعليمات البرمجية التي تنشئ طلب XMLHttpRequest على متصفح Microsoft.

القائمة 3. إنشاء كائن XMLHttpRequest على متصفح Microsoft

var xmlHttp = false;
يحاول {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} قبض (ه) {
يحاول {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} قبض (e2) {
xmlHttp = false;
}
}

ربما لم تفهم الكود بالكامل بعد، لكن لا بأس بذلك. بنهاية هذه السلسلة من المقالات، سيكون لديك فهم أعمق لبرمجة JavaScript، ومعالجة الأخطاء، والترجمة الشرطية، والمزيد. الآن فقط تذكر سطرين من التعليمات البرمجية:

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

و

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

يحاول هذان السطران من التعليمات البرمجية بشكل أساسي إنشاء كائن باستخدام إصدار واحد من MSXML، وإذا فشل ذلك، قم بإنشاء الكائن باستخدام إصدار آخر. ليس سيئا، أليس كذلك؟ إذا لم ينجح أي منهما، فسيتم تعيين المتغير xmlHttp على false، لإخبار الكود الخاص بك بوجود مشكلة. إذا حدث هذا، فقد يكون ذلك بسبب تثبيت مستعرض غير تابع لشركة Microsoft يتطلب تعليمات برمجية مختلفة.

التعامل مع متصفحات Mozilla والمتصفحات غير التابعة لشركة Microsoft

إذا اخترت متصفحًا آخر غير Internet Explorer، أو إذا قمت بكتابة تعليمات برمجية لمتصفح غير تابع لشركة Microsoft، فستحتاج إلى استخدام تعليمات برمجية مختلفة. إنه في الواقع سطر بسيط من التعليمات البرمجية الموضح في القائمة 1:

var xmlHttp = new XMLHttpRequest object;.

يقوم هذا السطر الأبسط من التعليمات البرمجية بإنشاء كائن XMLHttpRequest في Mozilla وFirefox وSafari وOpera وأي متصفح غير تابع لشركة Microsoft يدعم Ajax بأي شكل أو طريقة.

الجمع بين هذا

هو دعم جميع المتصفحات. من يريد كتابة تطبيق يعمل فقط مع متصفح Internet Explorer أو متصفحات غير تابعة لشركة Microsoft؟ أو ما هو أسوأ من ذلك، كتابة الطلب مرتين؟ بالطبع لا! لذلك يحتاج الكود إلى دعم كل من Internet Explorer والمتصفحات غير التابعة لـ Microsoft. تعرض القائمة 4 هذا الرمز.

القائمة 4. إنشاء كائن XMLHttpRequest بطريقة تدعم متصفحات متعددة

/* إنشاء كائن XMLHttpRequest جديد للتحدث مع خادم الويب */
var xmlHttp = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
يحاول {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} قبض (ه) {
يحاول {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} قبض (e2) {
xmlHttp = false;
}
}
@end @*/

if (!xmlHttp && typeof XMLHttpRequest != 'undef') {
xmlHttp = new XMLHttpRequest();
}

في الوقت الحالي، تجاهل الرموز الغريبة التي تم التعليق عليها، مثل @cc_on، وهي أوامر خاصة لمترجم JavaScript والتي سيتم مناقشتها بالتفصيل في المقالة التالية حول XMLHttpRequest. ينقسم جوهر هذا الرمز إلى ثلاث خطوات:

1. قم بإنشاء متغير xmlHttp للإشارة إلى كائن XMLHttpRequest الذي سيتم إنشاؤه.
2. حاول إنشاء الكائن في متصفح Microsoft:
1) حاول إنشائه باستخدام كائن Msxml2.XMLHTTP.
2) إذا فشل، حاول استخدام كائن Microsoft.XMLHTTP مرة أخرى.
2. إذا لم يتم إنشاء xmlHttp بعد، فقم بإنشاء الكائن بطريقة غير تابعة لشركة Microsoft.
أخيرًا، يجب أن يشير xmlHttp إلى كائن XMLHttpRequest صالح، بغض النظر عن المتصفح الذي يعمل عليه.

ملاحظة صغيرة حول الأمن

ماذا عن الأمن؟ تسمح المتصفحات الآن للمستخدمين بزيادة مستوى الأمان الخاص بهم، وإيقاف تشغيل تقنية JavaScript، وتعطيل أي خيار في المتصفح. في هذه الحالة لن يعمل الكود على أية حال. في هذه المرحلة لا بد من التعامل مع المشكلة بشكل مناسب، الأمر الذي يتطلب مقالة منفصلة لوقت لاحق (هذه السلسلة طويلة بما فيه الكفاية، أليس كذلك؟ لا تقلق، قد تحصل عليها قبل الانتهاء من القراءة). الآن دعونا نكتب جزءًا من التعليمات البرمجية قويًا ولكنه ليس مثاليًا، وهو أمر جيد لإتقان Ajax. سنناقش هذا بمزيد من التفصيل لاحقًا.

الطلب/الاستجابة في عالم Ajax

الآن بعد أن قدمنا ​​Ajax، أصبح لدينا فهم أساسي لكائن XMLHttpRequest وكيفية إنشائه. إذا كنت قد قرأت بعناية، فمن المحتمل أنك تعرف بالفعل أن تقنية JavaScript هي التي تتعامل مع تطبيقات الويب على الخادم، وليس نماذج HTML التي يتم إرسالها مباشرة إلى هذا التطبيق.

ما هو المفقود؟ بالضبط كيفية استخدام XMLHttpRequest. نظرًا لأن هذا الرمز مهم جدًا لدرجة أن كل تطبيق Ajax تكتبه سيستخدمه بشكل ما، فلنبدأ بالنظر إلى الشكل الأساسي للطلب/الاستجابة لـ Ajax.

إجراء الطلب

الآن بعد أن أصبح لديك كائن XMLHttpRequest جديد تمامًا، فلندعه يقوم ببعض الأعمال. أولاً، تحتاج إلى طريقة JavaScript يمكن لصفحة الويب الاتصال بها (على سبيل المثال، عندما يقوم المستخدم بإدخال نص أو تحديد عنصر من القائمة). التالي هو العملية نفسها في جميع تطبيقات Ajax:

1. احصل على البيانات المطلوبة من نموذج الويب.
2. قم بإنشاء عنوان URL المراد توصيله.
3. افتح اتصالاً بالخادم.
4. قم بتعيين الوظيفة التي سيتم تشغيلها بواسطة الخادم بعد الانتهاء.
5. أرسل طلبًا.

يتم تنظيم نماذج أساليب Ajax في القائمة 5 بهذا الترتيب:

القائمة 5. تقديم طلب Ajax

وظيفة استدعاء الخادم () {
// احصل على المدينة والدولة من نموذج الويب
فار سيتي = document.getElementById("city").value;
حالة فار = document.getElementById("state").value;
// استمر فقط إذا كانت هناك قيم لكلا الحقلين
if ((city == null) || (city == "")) return;
if ((state == null) || (state == "")) return;

// أنشئ عنوان URL للاتصال به
var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);

// فتح اتصال بالخادم
xmlHttp.open("GET", url, true);

// قم بإعداد وظيفة للخادم ليتم تشغيلها عند الانتهاء
xmlHttp.onreadystatechange = updatePage;

// أرسل الطلب
xmlHttp.send(null);
}

معنى معظم الرموز واضح جدًا. يستخدم الكود في البداية كود JavaScript الأساسي للحصول على قيم عدة حقول نموذج. ثم قم بتعيين برنامج PHP النصي كهدف للارتباط. لاحظ الطريقة التي يتم بها تحديد عنوان URL للبرنامج النصي، حيث يتم إلحاق المدينة والولاية (من النموذج) بعنوان URL باستخدام معلمات GET البسيطة.

ثم يتم فتح اتصال، وهذه هي المرة الأولى التي ترى فيها استخدام XMLHttpRequest. يتم تحديد طريقة الاتصال (GET) وعنوان URL للاتصال به. إذا تم ضبط المعلمة الأخيرة على true، فسوف تطلب اتصالاً غير متزامن (هذا هو أصل Ajax). إذا تم استخدام خطأ، فسينتظر الرمز استجابة من الخادم بعد تقديم الطلب. إذا تم التعيين على "صحيح"، فسيظل بإمكان المستخدمين استخدام النموذج (وحتى استدعاء طرق JavaScript أخرى) بينما يتعامل الخادم مع الطلبات في الخلفية.

السمة onreadystatechange الخاصة بـ xmlHttp (تذكر أن هذا مثيل كائن XMLHttpRequest) تخبر الخادم بما يجب فعله بعد انتهاء التشغيل (والذي قد يستغرق خمس دقائق أو خمس ساعات). نظرًا لأن التعليمات البرمجية لا تنتظر الخادم، فيجب أن تتيح للخادم معرفة ما يجب فعله حتى تتمكن من الاستجابة. في هذا المثال، إذا انتهى الخادم من معالجة الطلب، فسيتم تشغيل طريقة خاصة تسمى updatePage().

أخيرًا، يتم استدعاء الدالة send() بالقيمة null. نظرًا لأنه تمت إضافة البيانات التي سيتم إرسالها إلى الخادم (المدينة والولاية) إلى عنوان URL للطلب، فلا يلزم إرسال أي بيانات في الطلب. بهذه الطريقة يتم الطلب ويعمل الخادم حسب طلبك.

إذا لم تجد أي شيء جديد، يجب أن تقدر مدى بساطة هذا الأمر ومباشرته! بخلاف مراعاة الطبيعة غير المتزامنة لـ Ajax، فإن كل هذا بسيط جدًا. كن ممتنًا لأن Ajax يسمح لك بالتركيز على كتابة تطبيقات وواجهات جميلة بدلاً من القلق بشأن كود طلب/استجابة HTTP المعقد.

يوضح الكود الموجود في القائمة 5 سهولة استخدام Ajax. البيانات عبارة عن نص بسيط ويمكن استخدامها كجزء من عنوان URL للطلب. أرسل الطلبات باستخدام GET بدلاً من POST الأكثر تعقيدًا. لا يوجد XML ولا توجد رؤوس محتوى لإضافتها، ولا توجد بيانات لإرسالها في نص الطلب، وبعبارة أخرى، هذه هي مدينة Ajax الفاضلة.

لا تقلق، فالأمور ستصبح أكثر تعقيدًا مع ظهور هذه السلسلة من المقالات. سترى كيفية إرسال طلب POST، وكيفية تعيين رؤوس الطلب ونوع المحتوى، وكيفية تشفير XML في الرسالة، وكيفية زيادة أمان الطلب، وهناك الكثير الذي يمكنك القيام به! لا تقلق بشأن هذه الصعوبات في الوقت الحالي، فقط أتقن الأشياء الأساسية، وقريبًا سنقوم ببناء مجموعة كاملة من مكتبات أدوات Ajax.

التعامل مع الاستجابة

الآن يأتي رد الخادم. هناك شيئان يجب معرفتهما الآن:

· لا تفعل شيئًا حتى تصبح قيمة الخاصية xmlHttp.readyState تساوي 4.
· سيقوم الخادم بملء خاصية xmlHttp.responseText بالاستجابة.

أولها، حالة الاستعداد، ستتم مناقشتها بالتفصيل في المقالة التالية، وستتعرف على مراحل طلب HTTP أكثر مما كنت تعتقد على الأرجح. في الوقت الحالي يكفي التحقق من قيمة محددة (4) (سيكون هناك المزيد من القيم التي سيتم تغطيتها في المقالة التالية). النقطة الثانية، استخدم خاصية xmlHttp.responseText للحصول على استجابة الخادم، الأمر بسيط للغاية. يمكن استدعاء طريقة المثال في القائمة 6 بواسطة الخادم بناءً على البيانات المرسلة في القائمة 5.

القائمة 6. التعامل مع

وظيفة استجابة الخادم updatePage() {
إذا (xmlHttp.readyState == 4) {
استجابة فار = xmlHttp.responseText;
document.getElementById("zipCode").قيمة = استجابة;
}
}

الرموز أيضًا ليست صعبة ولا معقدة. ينتظر اتصال الخادم، وإذا كان جاهزًا، يقوم بتعيين قيمة حقل نموذج آخر باستخدام القيمة التي أرجعها الخادم (هنا الرمز البريدي للمدينة والولاية الذي أدخله المستخدم). وفجأة يظهر حقل الرمز البريدي الذي يحتوي على الرمز البريدي دون أن يضغط المستخدم على أي أزرار! هذا ما ذكرته سابقًا كتطبيق سطح مكتب. الاستجابة السريعة، والشعور الديناميكي، وما إلى ذلك، كل ذلك بسبب قطعة صغيرة من كود Ajax.

قد يلاحظ القراء الحريصون أن الرمز البريدي هو حقل نص عادي. بمجرد أن يقوم الخادم بإرجاع ترميز ZIP، تقوم طريقة updatePage() بتعيين قيمة هذا الحقل بتشفير ZIP للمدينة/الولاية، والذي يمكن للمستخدم تجاوزه. يتم ذلك لسببين: لإبقاء المثال بسيطًا ولتوضيح أنه في بعض الأحيان قد ترغب في أن يتمكن المستخدم من تعديل البيانات التي يعرضها الخادم. ضع هذين الأمرين في الاعتبار، فهما مهمان لتصميم واجهة المستخدم الجيدة.

ما الذي يوجد أيضًا

للاتصال بنموذج الويب

في الواقع لم يتبق الكثير. تلتقط إحدى طرق JavaScript المعلومات التي يدخلها المستخدم في النموذج وترسلها إلى الخادم، بينما تستمع طريقة JavaScript الأخرى إلى الاستجابة وتعالجها وتعيين قيمة الحقل عندما تعود الاستجابة. يعتمد كل هذا في الواقع على استدعاء طريقة JavaScript الأولى، والتي تبدأ العملية بأكملها. الحل الأكثر وضوحًا هو إضافة زر إلى نموذج HTML، ولكن هذا هو عام 2001، ألا تعتقد ذلك؟ دعونا نستخدم تقنية JavaScript مثل القائمة 7.

القائمة 7. بدء عملية Ajax

<form>
<p>المدينة: <نوع الإدخال = "نص" اسم = "مدينة" معرف = "مدينة" حجم = "25"
onChange="callServer();" /></p>
<p>الحالة: <نوع الإدخال = "نص" اسم = "حالة" معرف = "حالة" حجم = "25"
onChange="callServer();" /></p>
<p>الرمز البريدي: <input type = "text" name = "zipCode" id = "city" size = "5" /></p>
</form>

إذا كان هذا يبدو وكأنه جزء شائع إلى حد ما من التعليمات البرمجية، فأنت على حق، إنه كذلك! عندما يقوم المستخدم بإدخال قيمة جديدة في حقل المدينة أو الولاية، يتم تشغيل طريقة callServer () ويبدأ تشغيل Ajax. هل تفهم قليلا ما يحدث؟ حسنا، هذا كل شيء!

الاستنتاج:

ربما تكون الآن جاهزًا لبدء كتابة تطبيق Ajax الأول الخاص بك، وتريد على الأقل قراءة المقالات الموجودة في المصادر بعناية، أليس كذلك؟ ولكن يمكنك البدء بفكرة أساسية عن كيفية عمل هذه التطبيقات وفهم أساسي لكائن XMLHttpRequest. في الدفعة التالية، ستتقن هذا الكائن وتتعلم كيفية التعامل مع الاتصال بين JavaScript والخادم، وكيفية استخدام نماذج HTML، وكيفية الحصول على مقبض DOM.

توقف الآن للحظة للتفكير في مدى قوة تطبيقات Ajax. تخيل نموذج ويب يستجيب على الفور عند النقر فوق زر، أو إدخال حقل، أو تحديد خيار من مربع التحرير والسرد، أو سحب الماوس عبر الشاشة. فكر فيما يعنيه عدم المزامنة فعليًا، وفكر في تشغيل كود JavaScript وعدم انتظار استجابة الخادم لطلبه. ما نوع المشاكل التي ستواجهها؟ ما هو نوع المجال الذي سيدخله؟ بالنظر إلى هذا النهج الجديد، كيف يجب علينا تغيير تصميم النموذج عند البرمجة؟

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