يتكون Ajax من تقنية HTML وJavaScript™ وDHTML وDOM، وهو طريقة رائعة لتحويل واجهات الويب المرهقة إلى تطبيقات Ajax تفاعلية. بالنسبة لـ Ajax، الكائن الأساسي هو XMLHttpRequest، وجميع عمليات Ajax لا يمكن فصلها عن تشغيل هذا الكائن.
دعونا نفهم أولاً كيفية إنشاء هذا الكائن في جافا سكريبت:
varxmlHttp=newXMLHttpRequest();
يقوم هذا السطر البسيط من التعليمات البرمجية بإنشاء كائن XMLHttpRequest في Mozilla وFirefox وSafari وOpera وأي متصفح غير تابع لشركة Microsoft يدعم Ajax بأي شكل أو طريقة. لكن بالنسبة إلى IE، الذي تبلغ حصته في السوق 70%، فإن هذه الطريقة غير ممكنة، وإصدارات IE المختلفة لها طرق إنشاء مختلفة، لذلك نحتاج إلى استخدام الطريقتين التاليتين لإنشاء كائنات ضمن IE:
حاول{
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");// للمتصفحات الأحدث
}قبض(يخطئ){
يحاول{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");// للمتصفحات الأقدم
}قبض(يخطئ2){
xmlHttp=false;
}
}
ومع ذلك، لا يمكننا التنبؤ بأن بعض المتصفحات قد لا تتمكن من إنشاء هذا الكائن، لذلك إذا لم ينجح الإنشاء، فعلينا إضافة جملة:
if(!xmlHttp){
تنبيه ("لا يمكن إنشاء كائن XMLHttpRequest!")؛
}
المجموعة هي:
varxmlHttp=false;
يحاول{
xmlHttp=newXMLHttpRequest();
}قبض(تريمايكروسوفت){
يحاول{
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");
}قبض(othermicrosoft){
يحاول{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}الإمساك (فشل){
xmlHttp=false;
}
}
}
إذا (!xmlHttp){
تنبيه ("لا يمكن إنشاء كائن XMLHttpRequest!")؛
}
بعد ذلك، لنقم بإنشاء دالة getInfo() لتمكين الطلبات غير المتزامنة:
functiongetInfo(){
varnum=document.getElementById("num").value;//احصل على بيانات النموذج
varurl="/ajax/1.php?n="+escape(num);
xmlHttp.open("GET",url,true);//صحيح هنا يمثل طلبًا غير متزامن
}
بمجرد تكوينه باستخدام open()، يمكنك إرسال الطلبات. على الرغم من أنه يمكنك إرسال البيانات باستخدام send()، إلا أنه يمكنك أيضًا إرسال البيانات من خلال عنوان URL نفسه. في الواقع، في معظم طلبات GET، يكون إرسال البيانات باستخدام عنوان URL أسهل بكثير، لذا استخدم فقط null كمعلمة لـ send() هنا. ملف php الموجود في عنوان url هو ملف php المطلوب لمعالجة البيانات المطلوبة، تمامًا كما هو الحال عندما نستخدم PHP عادةً، ويمكن إضافة معلمات متعددة وفصلها بواسطة &.
xmlHttp.send(null);
بعد إرسال البيانات، نحتاج إلى استخدام طريقة رد الاتصال للحصول على حالة الخادم، لذلك يتم استخدام سمة onreadystatechange.
xmlHttp.onreadystatechange=updatePage;
يجب وضع هذا البيان قبل بيان الإرسال () حتى يصبح فعالاً. صفحة التحديث اللاحقة هي وظيفة تعالج المعلومات التي يتم إرجاعها. getInfo () الكامل هو كما يلي:
وظيفةجيتينفو (){
varnum=document.getElementById("num").value;//احصل على بيانات النموذج
varurl="/ajax/1.php?n="+escape(num);
xmlHttp.open("GET",url,true);//صحيح هنا يمثل طلبًا غير متزامن
xmlHttp.onreadystatechange=updatePage;
xmlHttp.send(null);
}
نحتاج أيضًا إلى تشغيل هذه الوظيفة في html:
<inputname = "num"id = "num"onblur = "getInfo ()"type = "text"/>
بعد ذلك نحتاج إلى كتابة وظيفة updatePage():
functionupdatePage(){
إذا (xmlhttp.readyState==4){
varresponse=xmlhttp.responseText;
document.getElementById("city").value=response;
}
}
حالة الاستعداد في الكود أعلاه هي حالة تم إرجاعها بواسطة الخادم. تشير هذه الحالة 4 إلى أن الطلب قد تم إرساله ومعالجته. يهدف ResponseText إلى الحصول على المعلومات التي يعرضها الخادم، ثم تعيينها إلى النموذج بمعرف المدينة من خلال جافا سكريبت.
عند هذه النقطة، يكون برنامج Ajax البسيط قد اكتمل. رمز جافا سكريبت الكامل هو كما يلي:
varxmlHttp=false;
يحاول{
xmlHttp=newXMLHttpRequest();
}قبض(تريمايكروسوفت){
يحاول{
xmlHttp=newActiveXObject("Msxml2.XMLHTTP");
}قبض(othermicrosoft){
يحاول{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}الإمساك (فشل){
xmlHttp=false;
}
}
}
إذا (!xmlHttp){
تنبيه ("لا يمكن إنشاء كائن XMLHttpRequest!")؛
}
وظيفةجيتينفو (){
varnum=document.getElementById("num").value;//احصل على بيانات النموذج
varurl="/ajax/1.php?n="+escape(num);
xmlHttp.open("GET",url,true);//صحيح هنا يمثل طلبًا غير متزامن
xmlHttp.onreadystatechange=updatePage;
xmlHttp.send(null);
}
وظيفة تحديث الصفحة () {
إذا (xmlhttp.readyState==4){
varresponse=xmlhttp.responseText;
document.getElementById("city").value=response;
}
}
لا يزال هناك ملف php مفقود هنا نظرًا لأن طريقة المعالجة مختلفة وطريقة الكتابة مختلفة، وهذا ليس الجزء الرئيسي من Ajax، فلن يتم تضمين الكود هنا. فقط تذكر أن PHP تقوم بإخراج البيانات المطلوبة وإرجاعها،
ولم يتم تحديثها منذ فترة طويلة، وقد رأيت هذا البرنامج التعليمي اليوم وهو مناسب جدًا للمبتدئين.