AJAX XMLHttp
في هذا الدرس سوف نتعرف علي ال object الذي يسمي "XMLHttpRequest " وهو يستخدم في تبادل البيانات مع الخادم في الخلفية ويعتبر ايضا هو اساس تقنية ال AJAX
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
الشروحات chevron_left AJAX XMLHttp chevron_left JavaScript
AJAX XMLHttp
</> AJAX XMLHttp
- يعتبر "XMLHttpRequest " هو حجر الاساس الذي بني عليه تقنية AJAX ويتلخص سير عمل هذا ال object كالأتي
- قم بأنشاء عنصر "XMLHhttpRequest "
- قم بأنشاء دالة لتستخدم ك callback
- يتم فتح عنصر "XMLHhttpRequest "
- يتم ارسال طلب الي الخادم
</> XMLHttpRequest Object
جميع المتصفحات الحديثة تدعم استخدام العنصر "XMLHttpRequest"
- يمكننا استخدام العنصر "XMLHttpRequest " في ارسال واستقبال البيانات من والي الخادم server في الخلفية وهذا يعني أمكانية تحديث أجزاء معينة في صفحة الويب دون الحاجة الي اعادة تحميل الصفحة كاملة
</> Create an XMLHttpRequest Object
تحتوي جميع المتصفحات الحديثة مثل (Chrome و Firefox و IE و Edge و Safari و Opera) على ال "object " التالي XMLHttpRequest مضمن بداخلها "built in "
- نقوم بأنشاء متغير ثم تخزين قيمة ال object بداخله علي النحو التالي
variable = new XMLHttpRequest();
</> Define a Callback Function
- تعرفنا من قبل علي ال "callback" وعرفنا انها عبارة عن دالة يتم تمريرها ك parameter بداخل دالة اخري
- نقوم بأستخدام ال callback في هذه الحالة حتي يتم تنفيذ دالة معينة عندما يكون الرد الخاص بالخادمResponse جاهز
xhttp.onload = function() {
/* What do do when the response is ready *ظ
}
</> Send a Request
لإرسال طلب request إلى الخادم server ، يمكنك استخدام الدالتين open () و send () لل "object" التالي XMLHttpRequest
xhttp.open("GET", "ajax.txt");
xhttp.send();
Example
/* Create an XMLHttpRequest object */
const xhttp = new XMLHttpRequest();
/* Define a callback function */
xhttp.onload = function() {
/* Here you can use the Data */
}
/* Send a request */
xhttp.open("GET", "/files/ajax.txt");
xhttp.send();
</> Access Across Domains
لأسباب خاصة بحماية البيانات لا تسمح المتصفحات الحديثة بالوصول الي الملفات عبر نطاقات "domains" مختلفة
. هذا يعني أن كلاً من صفحة الويب وملف XML الذي تحاول تحميله ، يجب أن يكونا موجودين على نفس الخادم.
اذا كنت تريد استخدام المثال السابق في إحدى صفحات الويب الخاصة بك ، فيجب أن تكون ملفات XML التي تقوم بتحميلها موجودة على الخادم الخاص بك.
</> XMLHttpRequest Object Methods
| Methods | Description |
| new XMLHttpRequest() | تستخدم في انشاء عنصر "XMLHttpRequest " جديد |
| abort() | تستخدم في الغاء الطلب Request الذي تم ارساله الي الخادم في الوقت الحالي |
| getAllResponseHeaders() | تستخدم في ارجاع جميع معلومات ال header |
| getResponseHeader() | تستخدم في ارجاع معلومات header معين |
| open(method, url, async, user, psw) | تستخدم في تحديد معلومات عملية الطلب (method : تستخدم في تحديد دالة الارسال سواء post , Get ) , (url: تستخدم في تحديد موقع الملف ) , ( async: تأخذ احدي القيمتين true , false وتقوم بتحديد مااذا كانت "asynchronous " او "synchronous" ) , (user : تستخدم في تحديد اسم المستخدم وهي اختيارية ) |
| send() | ةانتا |
| send(string) | cell |
| setRequestHeader() | cell |
</> XMLHttpRequest Object Properties
</> The onload Property
يمكنك استخدام دالة ك callback مع ال object التالي "XMLHttpRequest" ليتم تنفيذها عندما يتم الرد علي الطلب الذي قمت بأرساله الي الخادم
يتم تعريف الدالة بداخل الخاصية property التالي "onload" بداخل ال" object "XMLHttpRequest
Example
xhttp.onload = function() {
document.getElementById("demo").innerHTML =
this.responseText;
}
xhttp.open("GET", "/files/ajax.txt");
xhttp.send();
}
</> Multiple Callback Functions
إذا كان لديك أكثر من مهمة AJAX في موقع ويب ، فيجب عليك إنشاء وظيفة واحدة لتنفيذ كائن XMLHttpRequest ، ووظيفة رد اتصال واحدة لكل مهمة AJAX.
يجب أن يحتوي استدعاء الدالة على عنوان URL وعلي الدالة التي سوف يتم استدعائها عندما يكون الرد response من الخادم جاهز
Example
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {cFunction(this);}
xhttp.open("GET", url);
xhttp.send();
}
function myFunction1(xhttp) {
/* action goes here */
}
function myFunction2(xhttp) {
/* action goes here */
}
</> The onreadystatechange Property
- تحتوي الخاصية "readyState " علي الحالة الخاصة بال object التالي "XMLHttpRequest"
- تستخدم الخاصية "onreadystatechange" في تنفيذ الدالة التي تم تمريرها ك callback عندما يحدث تغير في ال "readyState"
- الخاصية "statues" والخاصية "statusText " يستخدمان في تحديد حالة "XMLHttpRequest "
| cell 1 | cell |
| cell 1 | cell |
| cell 1 | cell |
| cell 1 | cell |
| cell 1 | cell |
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "/files/ajax.txt");
xhttp.send();
}
يتم تشغيل حدث onreadystatechange أربع مرات (1-4) ، مرة واحدة لكل تغيير فيreadyState
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
