مقدمة إلى Ajax Calls

نشرت: 2021-11-01

مرحبًا بكم في مقدمتنا إلى Ajax! في هذه المقالة ، سنستعرض أساسيات Ajax وكيفية استخدامه في مثال من العالم الحقيقي. سننظر أيضًا في مثال على مكالمة Ajax-PHP. على الرغم من أننا بذلنا قصارى جهدنا لتبسيط هذا البرنامج التعليمي ، إلا أن المعرفة العملية بجافا سكريبت و PHP و WordPress مهمة جدًا في الفهم الكامل لما يلي. مع وضع هذا في الاعتبار لنبدأ!

ما هو اياكس؟

Ajax تعني Asynchronous JavaScript و XML.

Ajax ليست لغة برمجة ، ولكنها مجموعة من التقنيات التي تجمع بين تقنيات الويب الحالية لإنشاء تطبيقات ويب أفضل.

تحسين مواقع الويب مع Ajax

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

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

كيف تعمل خاصية Ajax Call؟

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

داخل الوظيفة ، يتم تشغيل استدعاء Ajax وبمساعدة XML ، يتم حزم المعلومات وإرسال الطلب إلى برنامج نصي للخادم.

N OTE: في الوقت الحاضر ، في جميع المناسبات تقريبًا ، يُفضل JSON على XML لأنه أسرع وأسهل في القراءة والبرمجة والمزيد.

داخل البرنامج النصي ، تتم معالجة الطلب بمساعدة لغة برمجة نصية من جانب الخادم مثل PHP و Java و Ruby و Python وما إلى ذلك.

يتم إرسال الاستجابة مرة أخرى إلى العميل ، وتقوم وظيفة رد الاتصال بتحديث جزء المحتوى المقابل بالبيانات المستلمة.

دعنا نلقي نظرة على كيفية عمل هذا في مثال

مثال بسيط على نداء Ajax

لنقم بإنشاء تطبيق بحث يسمح لك بمشاهدة نتائج البحث في الوقت الفعلي عند البحث في قائمة عناوين المقالات.

سنستخدم PHP كلغة برمجة نصية من جانب الخادم ، وسنوجهك خلال هذا من وجهة نظر المستخدمين النهائيين.

الخطوة 1: نموذج HTML

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

 <html> <body> <p><b>Search in articles:</b></p> <form> <input type="text" onkeyup="foundArticles(this.value)"> </form> <p>Articles available: <span></span></p> </body> </html>

الخطوة 2: وظيفة جافا سكريبت

عندما يقوم المستخدم بإدخال نص ، نريد أن نرى النتائج في الوقت الحقيقي ، إذا كانت متوفرة. سنستخدم حدث جافا سكريبت onkeyup الذي يطلق وظيفة عندما يحرر المستخدم مفتاحًا على لوحة المفاتيح.

يجب أن تحصل الوظيفة على النص الحالي كمعامل من أجل مواصلة العملية.

 <html> <body> <p><b>Search in articles:</b></p> <form> <input type="text" onkeyup="foundArticles(this.value)"> </form> <p>Articles available: <span></span></p> <script type="text/javascript"> function foundArticles(str) { } </script> </body> </html>

دعنا نملأ الدالة.

الخطوة الثالثة: الطلب

داخل الوظيفة ، يتعين علينا أولاً إنشاء كائن XMLHttpRequest من أجل التفاعل مع الخادم ثم استدعاء وظيفة أخرى تقوم بشيء ما بالقيمة التي تم تمريرها في foundArticles() بنا.

في العملية الموضحة أعلاه ، يتم إنجاز التفاعل مع الخادم باستخدام معالج حدث جافا readyState XMLHttpRequest.onready . دعنا نوضح هذه الخطوات بشكل أكبر:

  • تُرجع الخاصية readyState الحالة التي يكون فيها طلب XMLHttpRequest للعميل.
  • كلما تغيرت حالة readystatechange ، يتم تشغيل حدث readyState .
  • تحتوي الخاصية onreadystatechange على معالج الأحداث المراد استدعاؤه عند تشغيل الحدث readystatechange .

الخطوة 4: ما يجب القيام به مع الطلب

الآن ، نحتاج إلى القيام بشيء ما عند اكتمال العملية ، وبعد الرجوع إلى الحالات المتاحة ، قمنا بتعيين هذا على الحالة 4.

لذلك ، عند اكتمال العملية ، يجب استبدال النص الموجود داخل عنصر HTML بالمعرف txtHint الخادم. هذا عندما يتعين علينا استخدام خاصية responseText ، والتي تُرجع النص المستلم من الخادم بعد إرسال الطلب.

الآن دعنا نضيف الكود داخل وظيفة foundArticles() التي تتوافق مع ما وصفناه أعلاه.

 function foundArticles(str) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if ( this.readyState == 4 ) { document.getElementById("txtHint").innerHTML = this.responseText; } } }

ملحوظة: يجب أن نشير هنا إلى أن عرض HTML مثل هذا ، دون الهروب منه ، يعد ممارسة سيئة من الناحية الأمنية ، ونحن نفعل ذلك فقط من أجل هذا البرنامج التعليمي من أجل الحفاظ على الكود بسيطًا قدر الإمكان. لمجرد أن تكون آمنًا ، لا تستخدم أيًا من الأكواد الواردة في هذه المقالة للاستخدام في العالم الحقيقي!

بعد ذلك ، يتعين علينا إرسال الطلب إلى الخادم واستخدام البيانات التي يتم إرجاعها.

الخطوة 5: البيانات

في هذا المثال سيتم تخزين البيانات في ملف PHP. نقوم بإنشاء ملف data.php تحت نفس المجلد ونقوم بتضمين الكود التالي:

 <?php // We fill in the posts array with the data to look up to $posts = array( "C Language course", "C++ course", "About Bootstrap", "Learn to write HTML", "All about SS", "CSS3 course", "JAVA course", "JavaScript tutorials", "Learn PHP", "MySQL examples", "Learn Python", "AngularJS", "Photoshop Tutorials", "C#", "ASP.NET", "SAP", "ORACLE", "Wordpress CMS for beginners", "Build your own Android app", "All about SEO", "Illustrator", "Flash", "Action Script" ); // We get the requested value from the URL and store it in a variable $req = $_REQUEST["req"]; $autocomplete = ""; // Iterate $posts if $req is not empty if ($req !== "") { $req = strtolower($req); foreach($posts as $name) { $lowname = strtolower($name); if ( strpos( $lowname , $req ) !== false ) { $autocomplete = $name; } } } // Output echo $autocomplete === "" ? "no suggestion" : $autocomplete;

لا ترتبك بشأن $req = $_REQUEST["req"]; خط. هذه هي الطريقة التي يسترد بها البرنامج النصي الاستعلام داخل ملف custom.js الذي سننظر فيه قريبًا.

الخطوة 6: طرق الطلب

سنستخدم طريقة open () لكائن XMLHttpRequest لتهيئة الطلب ، وطريقة الإرسال () لتبادل البيانات مع الخادم.

المعلمات التي نستخدمها لطريقة open () هي:

  • طريقة. بمعنى طريقة طلب HTTP ("GET" ، "POST" ، "PUT" ، "DELETE" إلخ).
  • عنوان URL لإرسال الطلب إليه.
 function foundArticles(str) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if ( this.readyState == 4 ) { document.getElementById("txtHint").innerHTML = this.responseText; } } xmlhttp.open("GET", "data.php?req=" + str, true); xmlhttp.send(); }

كما ترى ، فإن الطريقة open () تهيئ طلب GET إلى “data.php؟ req =” + str URL.

سيتم بعد ذلك استخدام عنوان URL بواسطة $ req = $ _REQUEST [“req”]؛ متغير داخل ملف data.php لاسترداد القيمة.

لنلقِ نظرة على نموذج الطلب:

في هذه المرحلة ، يجب أن يعمل النموذج بشكل صحيح. إذا قمت بالدخول ، فلنفترض أن كلمة "مسار" يجب أن تكون النتيجة:

"دورة لغة C" ،
"دورة C ++" ،
"دورة CSS3" ،
"دورة جافا".

استنتاج

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