آموزش AJAX – X XMLHttpRequest

شی X XMLHttpRequest

همه مرورگرهای مدرن از این XMLHttpRequestشی پشتیبانی می کنند.

از این XMLHttpRequestشی می توان برای تبادل داده با یک وب سرور در پشت صحنه استفاده کرد. این بدان معنی است که به روزرسانی بخشهایی از یک صفحه وب ، بدون بارگیری مجدد کل صفحه ، امکان پذیر است.

یک XMLHttpRequest Object ایجاد کنید

همه مرورگرهای مدرن (Chrome ، Firefox ، IE ، Edge ، Safari ، Opera) یک XMLHttpRequestشی built داخلی دارند .

نحو برای ایجاد یک XMLHttpRequestشی:

variable = new XMLHttpRequest();

عملکرد Callback را تعریف کنید

یک تابع فراخوانی تابعی است که به عنوان پارامتر به عملکرد دیگری منتقل می شود.

در این حالت ، عملکرد پاسخگویی باید حاوی کدی باشد که در صورت آماده بودن پاسخ ، اجرا شود.

xhttp.onload = function() {
  // What do 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 که بارگیری می کنید باید در سرور خود باشد.

xhttp.onload = function() {
  document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

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
}

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();
}