مقدمه 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 انجام شود (مثلاً به‌روزرسانی صفحه)