مقدمة إلى AJAX

AJAX حلم المطورين لأنك تستطيع:

  • تحديث صفحة الويب دون إعادة تحميل الصفحة
  • طلب بيانات من الخادم بعد تحميل الصفحة
  • استقبال بيانات من الخادم بعد تحميل الصفحة
  • إرسال بيانات إلى الخادم في الخلفية

مثال AJAX

انقر على الزر أدناه لجعل Ajax يغير هذا النص:

تجربة شخصية

توضيح مثال AJAX

صفحة HTML

<!DOCTYPE html>
<html>
<body>
<div id="demo">
  <h2>اجعل AJAX يغير هذا النص</h2>
  <button type="button" onclick="loadDoc()">تغيير النص</button>
</div>
</body>
</html>

صفحة HTML هذه تحتوي على <div> و <button>.

<div> تستخدم لعرض المعلومات من الخادم.

<button> استدعاء الوظيفة (عند الضغط عليها).

هذه الوظيفة تطلب بيانات من خادم الويب وتعرضها:

Function loadDoc()
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}

ما هو AJAX؟

AJAX = Asynchronous JvaScript And XML.

AJAX ليس لغة برمجة.

يُ组合 AJAX فقط من:

  • عنصر XMLHttpRequest المدمج في المتصفح (طلبات البيانات من الخادم)
  • JavaScript و HTML DOM (عرض أو استخدام البيانات)

اسم Ajax هو اسم خاطئ. قد يستخدم تطبيق Ajax XML لنقل البيانات، ولكن من الشائع أيضًا نقل البيانات كنص نظيف أو نص JSON.

يُسمح لأjax بتحديث صفحة الويب بشكل متزامن من خلال تبادل البيانات مع الخادم في الخلفية. هذا يعني أنه يمكن تحديث جزء من الصفحة دون الحاجة إلى إعادة تحميل الصفحة بأكملها.

كيف يعمل AJAX

AJAX
  1. يحدث أحداث في الصفحة (تحميل الصفحة، النقر على الزر)
  2. يُنشأ XMLHttpRequest من قبل JavaScript
  3. يُرسل XMLHttpRequest إلى الخادم
  4. يتم معالجة الطلب من قبل الخادم
  5. سيقوم服务器 بإرسال الاستجابة إلى الصفحة
  6. قراءة الاستجابة من قبل JavaScript
  7. ت�行JavaScript الأفعال الصحيحة (مثل تحديث الصفحة)