47- آموزش جاوااسکریپت | دریافت داده از فایل متنی با AJAX و XMLHttpRequest

در این بخش می‌خواهیم یاد بگیریم چگونه با استفاده از XMLHttpRequest، داده‌های یک فایل متنی را به‌صورت غیرهمزمان دریافت و در صفحه نمایش دهیم.

هدف این مثال ساده است:

• یک دکمه در صفحه داریم.
• با کلیک روی دکمه، محتوای یک فایل متنی خوانده می‌شود.
• نتیجه بدون رفرش صفحه در خروجی نمایش داده می‌شود.

ساختار HTML

در ابتدا یک ساختار ساده در صفحه داریم که شامل یک دکمه و یک بخش برای نمایش خروجی است.

<div class="container">
  <button id="button">Get Data</button>
  <br><br>
  <div id="output"></div>
</div>

<script src="app.js"></script>

همچنین یک فایل متنی با نام data.txt در همان پوشه پروژه قرار دارد:

Some plain text data

ایجاد رویداد کلیک

ابتدا باید برای دکمه، رویداد کلیک تعریف کنیم تا با فشردن آن، تابع دریافت داده اجرا شود.

document.getElementById('button').addEventListener('click', loadData);

function loadData() {
  // ...
}

ساخت شیء XMLHttpRequest

برای ارسال درخواست AJAX باید یک نمونه از XMLHttpRequest بسازیم.

const xhr = new XMLHttpRequest();

این شیء مانند سایر آبجکت‌های جاوااسکریپت، ویژگی‌ها و متدهای مخصوص به خود را دارد و برای برقراری ارتباط با سرور یا فایل‌های محلی استفاده می‌شود.

تنظیم درخواست با متد open

پس از ساخت شیء، باید نوع درخواست، آدرس فایل و غیرهمزمان بودن درخواست را مشخص کنیم.

xhr.open('GET', 'data.txt', true);

پارامترهای این متد به‌ترتیب عبارت‌اند از:

• GET: نوع درخواست
• data.txt: مسیر فایل
• true: اجرای غیرهمزمان درخواست

درخواست GET زمانی استفاده می‌شود که فقط بخواهیم داده‌ای را دریافت یا خواندن کنیم.

پردازش پاسخ با onload

وقتی پاسخ با موفقیت دریافت شد، تابع onload اجرا می‌شود. در این مرحله بهتر است وضعیت پاسخ را نیز بررسی کنیم.

xhr.onload = function () {
  if (this.status === 200) {
    console.log(this.responseText);
  }
};

در اینجا:

• status وضعیت پاسخ را مشخص می‌کند.
• 200 یعنی درخواست با موفقیت انجام شده است.
• responseText محتوای متنی پاسخ را برمی‌گرداند.

ارسال نهایی درخواست با send

تا زمانی که متد send اجرا نشود، درخواست واقعاً ارسال نخواهد شد.

xhr.send();

این مرحله ضروری است و بدون آن هیچ داده‌ای دریافت نمی‌شود.

نسخه کامل مثال

کد کامل دریافت داده از فایل متنی به این صورت است:

document.getElementById('button').addEventListener('click', loadData);

function loadData() {
  const xhr = new XMLHttpRequest();

  xhr.open('GET', 'data.txt', true);

  xhr.onload = function () {
    if (this.status === 200) {
      console.log(this.responseText);
    }
  };

  xhr.send();
}

نمایش داده در صفحه

تا اینجا داده را در کنسول مرورگر نمایش دادیم. اگر بخواهیم آن را داخل صفحه نشان دهیم، می‌توانیم محتوای responseText را در یک عنصر HTML قرار دهیم.

document.getElementById('button').addEventListener('click', loadData);

function loadData() {
  const xhr = new XMLHttpRequest();

  xhr.open('GET', 'data.txt', true);

  xhr.onload = function () {
    if (this.status === 200) {
      document.getElementById('output').innerHTML = `<h1>${this.responseText}</h1>`;
    }
  };

  xhr.send();
}

با این کار، پس از کلیک روی دکمه، محتوای فایل متنی داخل عنصر output نمایش داده می‌شود؛ بدون اینکه صفحه رفرش شود.

کدهای وضعیت HTTP

در هنگام کار با درخواست‌های HTTP، کدهای وضعیت اهمیت زیادی دارند. چند مورد رایج عبارت‌اند از:

• 200: درخواست موفق بوده است
• 403: دسترسی ممنوع است
• 404: فایل یا صفحه پیدا نشد

نمونه بررسی وضعیت:

if (this.status === 200) {
  console.log(this.responseText);
}

readyState چیست؟

شیء XMLHttpRequest در طول اجرای درخواست، چند مرحله را پشت سر می‌گذارد. این مراحل با ویژگی readyState مشخص می‌شوند.

مقادیر متداول آن عبارت‌اند از:

• 0: درخواست هنوز مقداردهی اولیه نشده است
• 1: ارتباط با سرور برقرار شده است
• 2: درخواست دریافت شده است
• 3: درخواست در حال پردازش است
• 4: درخواست کامل شده و پاسخ آماده است

برای مشاهده مقدار readyState می‌توان از کد زیر استفاده کرد:

console.log(xhr.readyState);

استفاده از onreadystatechange

روش قدیمی‌تر برای بررسی وضعیت درخواست، استفاده از onreadystatechange است. در این روش باید هم readyState و هم status را بررسی کنیم.

document.getElementById('button').addEventListener('click', loadData);

function loadData() {
  const xhr = new XMLHttpRequest();

  xhr.open('GET', 'data.txt', true);

  xhr.onreadystatechange = function () {
    if (this.status === 200 && this.readyState === 4) {
      console.log(this.responseText);
    }
  };

  xhr.send();
}

در این روش، تابع onreadystatechange چند بار اجرا می‌شود؛ به همین دلیل باید مطمئن شویم که readyState برابر 4 است.

تفاوت onload و onreadystatechange

امروزه معمولاً استفاده از onload ساده‌تر و خواناتر است، چون وقتی اجرا می‌شود که پاسخ آماده باشد. اما onreadystatechange برای درک بهتر مراحل اجرای درخواست همچنان مفید است.

نمونه ثبت مراحل تغییر readyState:

document.getElementById('button').addEventListener('click', loadData);

function loadData() {
  const xhr = new XMLHttpRequest();

  xhr.open('GET', 'data.txt', true);

  console.log('readyState after open:', xhr.readyState);

  xhr.onreadystatechange = function () {
    console.log('readyState:', xhr.readyState);

    if (this.status === 200 && this.readyState === 4) {
      console.log(this.responseText);
    }
  };

  xhr.send();
}

استفاده از onprogress

اگر بخواهیم هنگام بارگذاری داده، یک وضعیت موقت مثل لودر یا اسپینر نمایش دهیم، می‌توانیم از onprogress استفاده کنیم.

xhr.onprogress = function () {
  console.log('Loading...', xhr.readyState);
};

این متد معمولاً زمانی اجرا می‌شود که درخواست در مرحله پردازش قرار دارد.

مدیریت خطا با onerror

برای اینکه در صورت بروز خطا بتوانیم آن را مدیریت کنیم، بهتر است onerror را نیز تعریف کنیم.

xhr.onerror = function () {
  console.log('Request error...');
};

این کار باعث می‌شود اگر درخواست با مشکل مواجه شد، بتوانیم واکنش مناسب نشان دهیم.

نسخه کامل‌تر با مدیریت خطا و نمایش در صفحه

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

document.getElementById('button').addEventListener('click', loadData);

function loadData() {
  const xhr = new XMLHttpRequest();

  xhr.open('GET', 'data.txt', true);

  xhr.onprogress = function () {
    console.log('Loading...', xhr.readyState);
  };

  xhr.onload = function () {
    if (this.status === 200) {
      document.getElementById('output').innerHTML = `<h1>${this.responseText}</h1>`;
    }
  };

  xhr.onerror = function () {
    console.log('Request error...');
  };

  xhr.send();
}

جمع‌بندی

در این آموزش با روند دریافت داده از یک فایل متنی با استفاده از AJAX و XMLHttpRequest آشنا شدیم. مهم‌ترین نکات این بخش عبارت‌اند از:

• با XMLHttpRequest می‌توان داده‌ها را به‌صورت غیرهمزمان دریافت کرد.
• متد open برای تنظیم نوع درخواست و مسیر فایل استفاده می‌شود.
• متد send درخواست را نهایی و ارسال می‌کند.
• با onload می‌توان پاسخ موفق را پردازش کرد.
• با onerror می‌توان خطاها را مدیریت کرد.
• با onprogress می‌توان وضعیت بارگذاری را بررسی کرد.
• داده دریافتی را می‌توان هم در کنسول و هم در عناصر صفحه نمایش داد.

در بخش بعدی، به‌جای فایل متنی، با داده‌های JSON کار خواهیم کرد؛ چون در پروژه‌های واقعی معمولاً بیشتر با این فرمت سروکار داریم.