٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش AJAX – X XMLHttpRequest

سنگ بنای اصلی AJAX شی X XMLHttpRequest است. یک شی X XMLHttpRequest ایجاد کنید یک عملکرد برگشت تماس تعریف کنید شی X XMLHttpRequest را باز کنید درخواست را به یک سرور ارسال کنید شی X XMLHttpRequest همه مرورگرهای مدرن از…

محمد یوسفی

29 جولای 2021

سنگ بنای اصلی AJAX شی X XMLHttpRequest است.

  1. یک شی X XMLHttpRequest ایجاد کنید
  2. یک عملکرد برگشت تماس تعریف کنید
  3. شی X XMLHttpRequest را باز کنید
  4. درخواست را به یک سرور ارسال کنید

شی 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 که بارگیری می کنید باید در سرور خود باشد.


XMLHttpRequest روش های شی


XMLHttpRequest خصوصیات شی


ویژگی بارگذاری

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

این تابع در onloadویژگی XMLHttpRequestشی تعریف شده است:

مثال

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

چندین عملکرد برگشت تماس

اگر بیش از یک وظیفه AJAX در یک وب سایت دارید ، باید یک تابع برای اجرای XMLHttpRequestشی and و یک عملکرد بازگشتی برای هر کار 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.

این onreadystatechangeتابع هر بار که آماده آماده تغییر می کند فراخوانی می شود.

وقتی readyState4 است و وضعیت 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) شروع می شود ، یک بار برای هر تغییر در حالت آماده.

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها