مقدمه‌ای بر AJAX

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

  • به‌روزرسانی صفحه بدون بارگذاری دوباره
  • داده‌ها پس از بارگذاری صفحه از سرور درخواست می‌شود
  • داده‌ها پس از بارگذاری صفحه از سرور دریافت می‌شود
  • داده‌ها در پس‌زمینه به سرور ارسال می‌شود

مثال AJAX

روی دکمه زیر کلیک کنید تا Ajax این متن را تغییر دهد:

آموزش شخصی

توضیح مثال AJAX

صفحه HTML

<!DOCTYPE html>
<html>
<body>
<div id="demo">
  <h2>AJAX این متن را تغییر دهد</h2>
  <button type="button" onclick="loadDoc()">تغییر متن</button>
</div>
</body>
</html>

این صفحه HTML یک <div> و یک <button> شامل دارد.

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

<button> فراخوانی تابع (وقتی که فشار داده شود).

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

Function loadDoc()
function loadDoc() {
  var 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", true);
  xhttp.send();
}

چه چیزی AJAX است؟

AJAX = Asynchronous JvaScript And XML.

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

AJAX فقط ترکیبی از:

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

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

Ajax به‌روزرسانی‌های وب‌سایت را به‌صورت غیرمستقیم از طریق تبادل داده‌ها با سرور وب پشتیبانی می‌کند. این به این معنی است که می‌توان بخش‌های خاصی از وب‌سایت را به‌روزرسانی کرد بدون اینکه کل صفحه را مجدداً بارگذاری کرد.

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

AJAX
  1. رویدادی در صفحه وب رخ می‌دهد (بارگذاری صفحه، کلیک بر روی دکمه)
  2. موضوع XMLHttpRequest توسط JavaScript ایجاد می‌شود
  3. موضوع XMLHttpRequest به سرور وب ارسال درخواست می‌کند
  4. سرور درخواست را پردازش می‌کند
  5. سرور پاسخ را به صفحه ارسال می‌کند
  6. خواندن پاسخ توسط JavaScript
  7. اجرای عمل درست توسط JavaScript (مثلاً به‌روزرسانی صفحه)