مقدمة أجاكس
AJAX هو حلم مطور ، لأنه يمكنك:
- قراءة البيانات من خادم الويب - بعد تحميل الصفحة
- تحديث صفحة الويب دون إعادة تحميل الصفحة
- إرسال البيانات إلى خادم الويب - في الخلفية
مثال أجاكس
Let AJAX change this text
شرح مثال أجاكس
صفحة HTML
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>Let AJAX change this text</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
</body>
</html>
تحتوي صفحة HTML على قسم <div> و <button>.
يُستخدم قسم <div> لعرض المعلومات من الخادم.
يستدعي الزر <button> وظيفة (إذا تم النقر عليها).
تطلب الوظيفة بيانات من خادم ويب وتعرضها:
تحميل الوظيفة Doc ()
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
ما هو اياكس؟
AJAX = A متزامن J avaScript A nd X ML.
أجاكس ليست لغة برمجة.
تستخدم AJAX مزيجًا من:
- كائن مستعرض مضمن
XMLHttpRequest(لطلب البيانات من خادم الويب) - JavaScript و HTML DOM (لعرض البيانات أو استخدامها)
AJAX هو اسم مضلل. قد تستخدم تطبيقات AJAX XML لنقل البيانات ، ولكن من الشائع أيضًا نقل البيانات كنص عادي أو نص JSON.
يسمح AJAX بتحديث صفحات الويب بشكل غير متزامن عن طريق تبادل البيانات مع خادم ويب خلف الكواليس. هذا يعني أنه من الممكن تحديث أجزاء من صفحة الويب دون إعادة تحميل الصفحة بأكملها.
كيف يعمل AJAX
- 1. حدث حدث في صفحة ويب (يتم تحميل الصفحة ، يتم النقر فوق الزر)
- 2. يتم إنشاء كائن XMLHttpRequest بواسطة JavaScript
- 3. يرسل كائن XMLHttpRequest طلبًا إلى خادم ويب
- 4. يعالج الخادم الطلب
- 5. يرسل الخادم ردًا إلى صفحة الويب
- 6. تتم قراءة الاستجابة بواسطة JavaScript
- 7. يتم تنفيذ الإجراء المناسب (مثل تحديث الصفحة) بواسطة JavaScript
المتصفحات الحديثة (Fetch API)
يمكن للمتصفحات الحديثة استخدام Fetch API بدلاً من كائن XMLHttpRequest.
تسمح واجهة Fetch API لمتصفح الويب بإجراء طلبات HTTP لخوادم الويب.
إذا كنت تستخدم كائن XMLHttpRequest ، فيمكن لـ Fetch فعل الشيء نفسه بطريقة أبسط.