ما هي تقنية أجاكس - AJAX

ما هي تقنية أجاكس - AJAX، تعريفها، وكيفية إستخدام تقنية الـ أجاكس AJAX بإستخدام لغة البرمجة JavaScript، ومثال على تقنية أجاكس - AJAX، بإستخدام لغة البرمجة JavaScript و PHP

ما هو أجاكس - AJAX؟

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

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

عادة ما تستخدم تقنية الأجاكس مع واجهة برمجة التطبيقات، والمعروفة بـ API.

كيفية إستخدام تقنية الـ أجاكس Ajax

عند إستخدام تقنية الأجاكس فإن تطبيق الويب يقوم بعمل إتصال مع الخادم، والهدف الأساسي من هذا الإتصال إما إرسال أو إستقبال البيانات من وإلى الخادم، ولكي يتم إنشاء هذا الإتصال يتم إستخدام لغة البرمجة جافاسكريبت وتحديدا يتم إستخدام الكائن (Object) المسمى XMLHttpRequest وهو الـ Object الرئيسي والذي يتم من خلاله الإتصال وإرسال وإستقبال البيانات من وإلى خادم الويب، ولذلك يجب إنشاء نسخة أو مرجع لهذا الكائن (Instance) ويتم ذلك كالتالي

JavaScript

var xhr = new XMLHttpRequest();

وبذلك نكون قد أنشأنا وسيلة التعامل مع الـ Ajax، ولكي نبدأ الإتصال بالخادم نستخدم الدالة open وهي دالة من دوال الكائن XMLHttpRequest ويتم ذلك كالتالي

xhr.open("POST", "https://abuelfateh.com/api.php", true);

من الكود السابق سوف تلاحظ أننا إستخدمنا الدالة open وقمنا بإستخدام ثلاثة معطيات أو خصائص أو arguments، وهم POST وهي طريقة إرسال البيانات إلى الخادم ويمكن أن نستخدم GET أو PUT وهم وسائل مختلفة لإرسال البيانات إلى الخادم، والـ argument الثاني هو عنوان التطبيق الذي سوف يستقبل البيانات، وفي هذه الحالة هو api.php، أما الـ parameter الثالث فقد إستخدمنا القيمة true وهي القيمة المسئولة عن تحديد التزامن للإتصال، والقيمة true هي القيمة الإفتراضية والتي تحدد أن الإتصال غير متزامن، وإذا إستخدمنا القيمة false فإنها تحدد أن الإتصال متزامن، وسوف نتعرف على الفرق بينهما لاحقا.

بعد فتح الإتصال مع الخادم يجب تحديد نوع البيانات التي سوف يتم إرسالها إلى الخادم، ويتم ذلك من خلال تحديد الترويسة (الـ Header) الذي يتم إرساله مع البيانات، ولكي نقوم بذلك سوف نستخدم الدالة setRequestHeader وهي أيضا أحد دوال الكائن XMLHttpRequest، ويتم ذلك كالتالي

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
xhr.setRequestHeader("Accept", "text/plain, text/html, application/xml, text/xml, application/json");

 الخطوة التالية بعد إنشاء الإتصال وتحديد نوعه (post, get, put, delete) وتحديد نوع البيانات من خلال الـ Header، يجب إنشاء الدالة التي سوف تستقبل الرد من الخادم، ويتم ذلك بإستخدام الحدث أو الـ Event المسمى onreadystatechange، وهو الحدث الذي يقوم المتصفح بإستدعائه في حالة إستقبال رد من الخادم، ويتم ذلك كالتالي

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // Handle the response
    console.log( xhr.responseText );
  }
};

في الكود السابق سوف تلاحظ إنشاء حدث أو Event، ومن خلاله نتحقق من الخاصية readyState والخاصية status، وهما خصائص للكائن XMLHttpRequest، ودائما ما تحمل كل خاصية منهم قيمة محددة في كل مرحلة من مراحل إرسال وإستقبال البيانات بإستخدام تقنية الـ Ajax، وبما أننا في هذه الدالة أو الحدث نتحقق من إستقبال رد من الخادم، فإننا نتأكد من القيمة 4 للخاصية readyState وهي القيمة التي تحملها هذه الخاصية في حالة إكتمال عملية إرسال البيانات وإستقبالها بنجاح، ونتأكد أيضا من قيمة الخاصية status وهي القيمة التي يرسلها الخادم مع كل رد، والقيمة 200 هي التي تعبر عن نجاح عملية إرسال البيانات من الخادم إلى المستخدم، وفي داخل الأقواس المعقوفة للشرط يمكنك التعامل مع رد الخادم بإظهاره في صفحة الويب أو كما ترغب، في هذا المثال إستخدمنا الخاصية responseText وهي إحدى خصائص الكائن XMLHttpRequest وقيمتها هي رد الخادم على هيئة نص، وعادة ما يتم إستخدام هذه الخاصية للتعامل مع رد الخادم سواء كان الرد على هيئة نص أو بصيغة JSON.

وأخيرا يتبقى إرسال البيانات إلى الخادم، ويتم ذلك بإستخدام الدالة send، وهي أيضا إحدى دوال الكائن XMLHttpRequest، ويتم ذلك كالتالي

xhr.send("name=Ahmed&country=Egypt");

في الكود السابق قمنا بإرسال بيانات إلى الخادم بإستخدام تقنية (طريقة) الـ POST وهذه البيانات تحتوي على الإسم والبلد، ويمكنك إستقبالها في الخادم والتعامل معها على أنها بيانات مرسلة بواسطة نموذج HTML.

مثال على إستخدام تقنية أجاكس Ajax

فلنفترض أننا نريد أن نتحقق من إسم المستخدم إذا كان مسجل في الموقع أم لا، بإستخدام تقنية الـ Ajax

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

PHP/HTML/JavaScript

<?php
if (isset($_POST['user']) && !empty($_POST['user'])) {
  // يمكنك البحث في قاعدة البيانات عن الإسم ثم إرسال الرد
  if ($_POST['user'] === "ahmed")
    echo "The User exists is DataBase.";
  else
    echo "You can use {$_POST['user']} Username.";
  exit();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Test Ajax</title>
</head>
<body>
  <input type="text" id="username" placeholder="Username" />
  <br />
  <input type="button" value="Check" id="btn" />
  <p id="response"></p>
 
<script type="text/javascript">
function ajax() {
  var xhr = new XMLHttpRequest();
  xhr.open("POST", window.location.href, true);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
  xhr.setRequestHeader("Accept", "text/plain, text/html, application/xml, text/xml, application/json");
 
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // Handle the response
      document.getElementById("response").innerHTML = xhr.responseText;
    }
  };
 
  xhr.send("user="+document.getElementById("username").value);
}
 
document.getElementById("btn").addEventListener("click", ajax, false);
</script>
</body>
</html>

الملف السابق يحتوي على صفحة HTML بسيطه، تحتوي على عنصر لكتابة إسم المستخدم وزر لإرسال البيانات بعد الإنتهاء، وتحتوي على أكواد الـ JavaScript الخاصة بتقنية الـ Ajax لإرسال ما سوف يكتبه المستخدم في حقل إسم المستخدم، وسوف تلاحظ أننا وضعنا كل أكواد الـ Ajax في داخل دالة قمنا بتسميتها ajax، وقمنا بإستخدامها في الحدث click والذي بدوره سوف يستدعيها عند الضغط على زر الإرسال.

وسوف تلاحظ أيضا أننا إستخدمنا window.location.href أثناء إنشاء الإتصال، وهذه خاصية من خواص الكائن window والتي تحتوي على عنوان الصفحة الحالية، أي أننا نرسل البيانات إلى الخادم من خلال نفس الصفحة.

في هذا المثال سوف نفترض أننا نمتلك إسم مستخدم واحد في قاعدة البيانات وهو ahmed، ولذلك نقوم بالتحقق من الإسم الذي يقوم المستخدم بإدخاله، إذا كان مساوي للإسم ahmed فنرسل له رسالة توضح أن الإسم مستخدم، وإذا أدخل إسم آخر نرد عليه بأن هذا الإسم متاح.

وبذلك نكون قد إنتهينا من تعلم أساسيات تقنية الـ Ajax، يمكنك تطبيق هذا المثال وإذا كان لديك أي إستفسار يمكنك كتابة تعليق بإستفسارك.