مقدمة أجاكس
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_info.txt" المستخدم في المثال أعلاه ، هو ملف نصي بسيط ويبدو كالتالي:
<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a
technique for accessing web servers from a web page.</p>
<p>AJAX stands for
Asynchronous JavaScript And XML.</p>
ما هو اياكس؟
AJAX = A متزامن J avaScript A nd X ML.
أجاكس ليست لغة برمجة.
تستخدم AJAX مزيجًا من:
- كائن XMLHttpRequest مضمن في المستعرض (لطلب البيانات من خادم ويب)
- JavaScript و HTML DOM (لعرض البيانات أو استخدامها)
AJAX هو اسم مضلل. قد تستخدم تطبيقات AJAX XML لنقل البيانات ، ولكن من الشائع أيضًا نقل البيانات كنص عادي أو نص JSON.
يسمح AJAX بتحديث صفحات الويب بشكل غير متزامن عن طريق تبادل البيانات مع خادم ويب خلف الكواليس. هذا يعني أنه من الممكن تحديث أجزاء من صفحة الويب دون إعادة تحميل الصفحة بأكملها.
كيف يعمل أجاكس
- 1. حدث حدث في صفحة ويب (يتم تحميل الصفحة ، يتم النقر فوق الزر)
- 2. يتم إنشاء كائن XMLHttpRequest بواسطة JavaScript
- 3. يرسل كائن XMLHttpRequest طلبًا إلى خادم ويب
- 4. يعالج الخادم الطلب
- 5. يرسل الخادم ردًا إلى صفحة الويب
- 6. تتم قراءة الاستجابة بواسطة JavaScript
- 7. يتم تنفيذ الإجراء المناسب (مثل تحديث الصفحة) بواسطة JavaScript