دليل أساسي لـ AJAX

AJAX XMLHttpRequest

مقدمة إلى AJAX

يسمح AJAX بتحديث محتوى الصفحة "بشكل متسلسل" من خلال تبادل البيانات مع خادم الويب المحتوى

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

باستخدام AJAX، يمكنك:

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

مثال AJAX

أظهرت الكود التالي مثالاً أساسياً لـ AJAX:

AJAX سيتغير هذا النص

تشغيل الكود

توضيح مثال AJAX

المثال أعلاه يشمل الأجزاء التالية:

رمز HTML:

　　<!DOCTYPE html>
　　<html>
　　
　　<div id="output">
　　<h2>AJAX سيتغير هذا النص</h2>
　　<button onclick="fetchDoc()" type="button">إرسال الطلب</button>
　　</div>
　　
　　</html>

رمز HTML يحتوي على<div>جزء<h2>و<button>)

جزء<DIV>من المعلومات المستلمة من الخادم.

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

تقوم هذه الوظيفة بطلب البيانات من خادم الويب وتعديلها (بدون إعادة تحميل الصفحة):

وظيفة fetchDoc()：

　　function fetchDoc() {
　　var httpRequest = new XMLHttpRequest();
　　httpRequest.onreadystatechange = function() {
　　　إذا (this.readyState === 4 && this.status === 200) {
　　　　document.getElementById("output").innerHTML = this.responseText;
　　　}
　　};
　　httpRequest.open("GET", "ajax_intro.txt", true);
　　httpRequest.send();
　　}

ما هو AJAX؟

AJAX هو اختصار لـ “Asynchronous Javascript And XML” (JavaScript غير المتزامن وXML).

AJAX ليس لغة برمجة، بل هو تقنية تستخدم للاستفادة من الخدمات على خادم الويب من خلال صفحة الويب.

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

يمكن لـ AJAX التواصل مع الخادم، تبادل البيانات وتحديث الصفحة دون تحديث الصفحة.

يمكن لـ AJAX إرسال واستقبال أنواع مختلفة من المعلومات، بما في ذلك JSON،XML،HTML وملفات النصوص.

بشكل بسيط، يتم استخدام عنصر XMLHttpRequest للتواصل مع الخادم.

تتيح لك الوظائف الرئيسية لـ AJAX تنفيذ العمليات التالية:

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

كيف يعمل AJAX؟

لتنفيذ اتصالات AJAX، يستخدم JavaScript عنصر XMLHttpRequest لإرسال طلب HTTP إلى الخادم ويتلقي البيانات كاستجابة.

دعم جميع المتصفحات الحديثة (Chrome،Firefox،IE7 +،Safari،Opera) لعدة XMLHttpRequest.

يوضح الشكل التالي كيف تعمل اتصالات AJAX:

خطوات عملية AJAX

حدثت في صفحة الويب أحد الأحداث (مثل تحميل الصفحة أو النقر على الزر)
يتم إنشاء عنصر XMLHttpRequest بواسطة JavaScript
سيقوم عنصر XMLHttpRequest بإرسال الطلب إلى خادم الويب
سيقوم الخادم بمعالجة الطلب
سيقوم الخادم بإرسال الاستجابة إلى صفحة الويب
الاستجابة يتم قراءتها بواسطة JavaScript
HTML DOM يتم تحديثه بواسطة JavaScript

ماذا ستتعلم

في الفصل التالي من هذا الدليل، ستتعلم:
كيفية إنشاء عنصر XMLHttpRequest
كيفية إرسال البيانات إلى خادم الويب (في الخلفية)
كيفية قراءة البيانات من خادم الويب (في الخلفية)
كيفية تحديث صفحة الويب دون إعادة تحميل الصفحة

AJAX XMLHttpRequest