ما هو اياكس؟
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() {
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 = 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
برنامج AJAX التعليمي الكامل
لقد كان هذا وصفًا موجزًا لـ AJAX.
للحصول على برنامج تعليمي AJAX كامل ، انتقل إلى W3Schools AJAX التعليمي .
لمزيد من أمثلة AJAX ، انتقل إلى أمثلة W3Schools AJAX .