AJAX - كائن XMLHttpRequest
حجر الأساس في AJAX هو كائن XMLHttpRequest.
- قم بإنشاء كائن XMLHttpRequest
- تحديد وظيفة رد الاتصال
- افتح كائن XMLHttpRequest
- إرسال طلب إلى الخادم
كائن XMLHttpRequest
تدعم جميع المتصفحات الحديثة XMLHttpRequestالكائن.
يمكن XMLHttpRequestاستخدام الكائن لتبادل البيانات مع خادم الويب وراء الكواليس. هذا يعني أنه من الممكن تحديث أجزاء من صفحة الويب دون إعادة تحميل الصفحة بأكملها.
قم بإنشاء كائن XMLHttpRequest
تحتوي جميع المتصفحات الحديثة (Chrome و Firefox و IE و Edge و Safari و Opera) على كائن مدمج XMLHttpRequest.
بناء الجملة لإنشاء XMLHttpRequestكائن:
variable = new XMLHttpRequest();
تحديد وظيفة رد الاتصال
وظيفة رد الاتصال هي وظيفة يتم تمريرها كمعامل إلى وظيفة أخرى.
في هذه الحالة ، يجب أن تحتوي وظيفة رد الاتصال على الكود المطلوب تنفيذه عندما تكون الاستجابة جاهزة.
xhttp.onload = function() {
// What to do when the response is ready
}
ارسل طلب
لإرسال طلب إلى خادم ، يمكنك استخدام الأسلوبين open () و send ()
XMLHttpRequestللكائن:
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
مثال
// 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", "ajax_info.txt");
xhttp.send();
الوصول عبر المجالات
لأسباب أمنية ، لا تسمح المتصفحات الحديثة بالوصول عبر المجالات.
هذا يعني أن كلاً من صفحة الويب وملف XML الذي تحاول تحميله ، يجب أن يكونا موجودين على نفس الخادم.
الأمثلة الموجودة في W3Schools على جميع ملفات XML المفتوحة الموجودة في مجال W3Schools.
إذا كنت تريد استخدام المثال أعلاه في إحدى صفحات الويب الخاصة بك ، فيجب أن تكون ملفات XML التي تقوم بتحميلها موجودة على الخادم الخاص بك.
أساليب كائن XMLHttpRequest
| Method | Description |
|---|---|
| new XMLHttpRequest() | Creates a new XMLHttpRequest object |
| abort() | Cancels the current request |
| getAllResponseHeaders() | Returns header information |
| getResponseHeader() | Returns specific header information |
| open(method, url, async, user, psw) | Specifies the request method: the request type GET or POST url: the file location async: true (asynchronous) or false (synchronous) user: optional user name psw: optional password |
| send() | Sends the request to the server Used for GET requests |
| send(string) | Sends the request to the server. Used for POST requests |
| setRequestHeader() | Adds a label/value pair to the header to be sent |
خصائص كائن XMLHttpRequest
| Property | Description |
|---|---|
| onload | Defines a function to be called when the request is recieved (loaded) |
| onreadystatechange | Defines a function to be called when the readyState property changes |
| readyState | Holds the status of the XMLHttpRequest. 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready |
| responseText | Returns the response data as a string |
| responseXML | Returns the response data as XML data |
| status | Returns the status-number of a request 200: "OK" 403: "Forbidden" 404: "Not Found" For a complete list go to the Http Messages Reference |
| statusText | Returns the status-text (e.g. "OK" or "Not Found") |
خاصية onload
باستخدام XMLHttpRequestالكائن ، يمكنك تحديد وظيفة رد نداء ليتم تنفيذها عندما يتلقى الطلب إجابة.
يتم تحديد الوظيفة في onloadخاصية XMLHttpRequestالكائن:
مثال
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
وظائف رد الاتصال المتعددة
إذا كان لديك أكثر من مهمة AJAX في موقع ويب ، فيجب عليك إنشاء وظيفة واحدة لتنفيذ XMLHttpRequestالكائن ، ووظيفة رد اتصال واحدة لكل مهمة AJAX.
يجب أن يحتوي استدعاء الوظيفة على عنوان URL والوظيفة التي يجب الاتصال بها عندما تكون الاستجابة جاهزة.
مثال
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
}
خاصية onreadystatechange
تحتفظ readyStateالخاصية بحالة XMLHttpRequest.
تحدد الخاصية وظيفة onreadystatechangeرد نداء ليتم تنفيذها عندما تتغير حالة الاستعداد.
تحتفظ statusالخاصية statusTextوالخصائص بحالة كائن XMLHttpRequest.
| Property | Description |
|---|---|
| onreadystatechange | Defines a function to be called when the readyState property changes |
| readyState | Holds the status of the XMLHttpRequest. 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready |
| status | 200: "OK" 403: "Forbidden" 404: "Page not found" For a complete list go to the Http Messages Reference |
| statusText | Returns the status-text (e.g. "OK" or "Not Found") |
يتم onreadystatechangeاستدعاء الوظيفة في كل مرة تتغير حالة الاستعداد.
عندما readyStateيكون 4 والحالة 200 ، يكون الرد جاهزًا:
مثال
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", "ajax_info.txt");
xhttp.send();
}
يتم onreadystatechangeتشغيل الحدث أربع مرات (1-4) ، مرة واحدة لكل تغيير في حالة الاستعداد.