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

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

آموزش مقدمه AJAX

AJAX رویای توسعه دهنده است ، زیرا شما می توانید: داده ها را از سرور وب بخوانید – پس از بارگیری صفحه بدون بارگیری مجدد صفحه ، یک صفحه وب را به روز کنید ارسال داده ها به یک وب…

محمد یوسفی

29 جولای 2021

AJAX رویای توسعه دهنده است ، زیرا شما می توانید:

  • داده ها را از سرور وب بخوانید – پس از بارگیری صفحه
  • بدون بارگیری مجدد صفحه ، یک صفحه وب را به روز کنید
  • ارسال داده ها به یک وب سرور – در پس زمینه

مثال AJAX

Let AJAX change this text


مثال AJAX توضیح داده شده است

صفحه HTML

<!DOCTYPE html>
<html>
<body>

<div id="demo">
  <h2>Let AJAX change this text</h2>
  <button type="button" onclick="loadDoc()">Change Content</button>
</div>

</body>
</html>

صفحه HTML شامل بخش <div> و <دکمه> است.

بخش <div> برای نمایش اطلاعات از سرور استفاده می شود.

<دکمه> یک عملکرد را فراخوانی می کند (اگر روی آن کلیک شود).

عملکرد از سرور وب درخواست داده و آن را نمایش می دهد:

load loadDoc ()

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

AJAX چیست؟

AJAX = همزمان J از avascript دوم X ML.

AJAX یک زبان برنامه نویسی نیست.

AJAX فقط از ترکیبی استفاده می کند:

  • یک مرورگر داخلی XMLHttpRequest(برای درخواست داده از سرور وب)
  • JavaScript و HTML DOM (برای نمایش یا استفاده از داده ها)

AJAX نامی گمراه کننده است. برنامه های AJAX ممکن است از XML برای انتقال داده استفاده کنند ، اما انتقال داده به صورت متن ساده یا متن JSON به همان اندازه معمول است.

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


AJAX چگونه کار می کند

  • 1. یک رویداد در یک صفحه وب رخ می دهد (صفحه بارگیری می شود ، یک دکمه کلیک می شود)
  • 2. یک شی X XMLHttpRequest توسط JavaScript ایجاد شده است
  • 3. شی X XMLHttpRequest درخواستی را به یک سرور وب ارسال می کند
  • 4- سرور درخواست را پردازش می کند
  • 5- سرور پاسخ را به صفحه وب ارسال می کند
  • 6. پاسخ توسط JavaScript خوانده می شود
  • 7. اقدام مناسب (مانند به روزرسانی صفحه) توسط JavaScript انجام می شود

مرورگرهای مدرن (API واکشی)

مرورگرهای مدرن می توانند به جای XMLHttpRequest Object از Fetch API استفاده کنند.

رابط Fetch API به مرورگر وب این امکان را می دهد تا درخواست های HTTP را از سرورهای وب درخواست کند.

اگر از XMLHttpRequest Object استفاده می کنید ، Fetch می تواند همین کار را به روش ساده تری انجام دهد.

منبع

مطالب مرتبط

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