48- آموزش جاوااسکریپت | کار با JSON در AJAX و XMLHttpRequest

در این بخش، کار با AJAX و XMLHttpRequest را ادامه می‌دهیم؛ با این تفاوت که به‌جای فایل متنی ساده، از داده‌های JSON استفاده خواهیم کرد.

JSON مخفف JavaScript Object Notation است و یکی از رایج‌ترین فرمت‌ها برای تبادل داده بین کلاینت و سرور محسوب می‌شود. بیشتر APIها داده‌ها را در همین قالب برمی‌گردانند، بنابراین یادگیری کار با JSON اهمیت زیادی دارد.

ساختار صفحه

در این مثال، صفحه شامل دو دکمه است:

• دکمه اول برای دریافت یک مشتری
• دکمه دوم برای دریافت چند مشتری

همچنین دو بخش جداگانه برای نمایش خروجی در نظر گرفته شده است.

<div class="container">
  <button id="button1">Get Customer</button>
  <button id="button2">Get Customers</button>

  <br><br>

  <div id="customer"></div>
  <div id="customers"></div>
</div>

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

ایجاد فایل JSON برای یک مشتری

ابتدا یک فایل به نام customer.json می‌سازیم. این فایل فقط شامل اطلاعات یک مشتری است.

{
  "id": 1,
  "name": "John Doe",
  "company": "123 Designs",
  "phone": "555-555-5555"
}

نکته مهم درباره ساختار JSON

ساختار JSON بسیار شبیه آبجکت‌های جاوااسکریپت است، اما یک تفاوت مهم دارد:
در JSON کلیدها و مقادیر رشته‌ای باید حتماً داخل دابل کوتیشن قرار بگیرند.

نمونه نادرست:

{
  id: 1,
  name: 'John Doe'
}

نمونه درست:

{
  "id": 1,
  "name": "John Doe"
}

اگر فایل JSON از نظر نگارشی درست نباشد، هنگام parse کردن با خطا مواجه می‌شوید.

دریافت یک مشتری با XMLHttpRequest

اکنون در فایل app.js برای دکمه اول یک رویداد کلیک تعریف می‌کنیم تا اطلاعات مشتری از فایل customer.json خوانده شود.

document.getElementById('button1').addEventListener('click', loadCustomer);

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

  xhr.open('GET', 'customer.json', true);

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

  xhr.send();
}

در این مثال:

• با XMLHttpRequest یک درخواست جدید می‌سازیم.
• با open مشخص می‌کنیم که درخواست از نوع GET است.
• مسیر فایل customer.json را تعیین می‌کنیم.
• در onload پاسخ را دریافت می‌کنیم.
• در انتها با send درخواست را ارسال می‌کنیم.

تبدیل JSON به آبجکت جاوااسکریپت

مقدار responseText به‌صورت رشته برمی‌گردد. برای اینکه بتوانیم به ویژگی‌هایی مثل name یا company دسترسی داشته باشیم، باید آن را با JSON.parse() به آبجکت جاوااسکریپت تبدیل کنیم.

document.getElementById('button1').addEventListener('click', loadCustomer);

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

  xhr.open('GET', 'customer.json', true);

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

  xhr.send();
}

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

بعد از تبدیل داده، می‌توانیم آن را در صفحه نمایش دهیم.

document.getElementById('button1').addEventListener('click', loadCustomer);

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

  xhr.open('GET', 'customer.json', true);

  xhr.onload = function () {
    if (this.status === 200) {
      const customer = JSON.parse(this.responseText);

      const output = `
        <ul>
          <li>ID: ${customer.id}</li>
          <li>Name: ${customer.name}</li>
          <li>Company: ${customer.company}</li>
          <li>Phone: ${customer.phone}</li>
        </ul>
      `;

      document.getElementById('customer').innerHTML = output;
    }
  };

  xhr.send();
}

در اینجا:

• داده‌ی JSON به آبجکت تبدیل می‌شود.
• با استفاده از template literal خروجی HTML ساخته می‌شود.
• خروجی در عنصر customer قرار می‌گیرد.

ایجاد فایل JSON برای چند مشتری

حالا یک فایل دیگر به نام customers.json می‌سازیم که شامل آرایه‌ای از چند مشتری است.

[
  {
    "id": 1,
    "name": "John Doe",
    "company": "123 Designs",
    "phone": "555-555-5555"
  },
  {
    "id": 2,
    "name": "Steve Smith",
    "company": "Hello Productions",
    "phone": "555-555-5556"
  },
  {
    "id": 3,
    "name": "Tara Williams",
    "company": "Traversy Media",
    "phone": "555-555-5557"
  }
]

در اینجا به‌جای یک آبجکت، با یک آرایه از آبجکت‌ها سروکار داریم.

دریافت چند مشتری

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

document.getElementById('button2').addEventListener('click', loadCustomers);

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

  xhr.open('GET', 'customers.json', true);

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

  xhr.send();
}

تبدیل آرایه JSON و پیمایش داده‌ها

چون داده دریافتی یک آرایه است، بعد از parse کردن باید آن را پیمایش کنیم.

document.getElementById('button2').addEventListener('click', loadCustomers);

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

  xhr.open('GET', 'customers.json', true);

  xhr.onload = function () {
    if (this.status === 200) {
      const customers = JSON.parse(this.responseText);

      console.log(customers);
    }
  };

  xhr.send();
}

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

برای نمایش همه مشتری‌ها، از forEach استفاده می‌کنیم و خروجی هر مورد را به یک متغیر اضافه می‌کنیم.

document.getElementById('button2').addEventListener('click', loadCustomers);

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

  xhr.open('GET', 'customers.json', true);

  xhr.onload = function () {
    if (this.status === 200) {
      const customers = JSON.parse(this.responseText);

      let output = '';

      customers.forEach(function (customer) {
        output += `
          <ul>
            <li>ID: ${customer.id}</li>
            <li>Name: ${customer.name}</li>
            <li>Company: ${customer.company}</li>
            <li>Phone: ${customer.phone}</li>
          </ul>
        `;
      });

      document.getElementById('customers').innerHTML = output;
    }
  };

  xhr.send();
}

در این بخش:

• customers یک آرایه از آبجکت‌ها است.
• با forEach روی همه اعضا پیمایش انجام می‌دهیم.
• برای هر مشتری یک بلوک HTML تولید می‌کنیم.
• در پایان کل خروجی را داخل عنصر customers قرار می‌دهیم.

نمونه کامل کد جاوااسکریپت

در نهایت، کد کامل app.js به شکل زیر خواهد بود:

document.getElementById('button1').addEventListener('click', loadCustomer);
document.getElementById('button2').addEventListener('click', loadCustomers);

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

  xhr.open('GET', 'customer.json', true);

  xhr.onload = function () {
    if (this.status === 200) {
      const customer = JSON.parse(this.responseText);

      const output = `
        <ul>
          <li>ID: ${customer.id}</li>
          <li>Name: ${customer.name}</li>
          <li>Company: ${customer.company}</li>
          <li>Phone: ${customer.phone}</li>
        </ul>
      `;

      document.getElementById('customer').innerHTML = output;
    }
  };

  xhr.send();
}

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

  xhr.open('GET', 'customers.json', true);

  xhr.onload = function () {
    if (this.status === 200) {
      const customers = JSON.parse(this.responseText);

      let output = '';

      customers.forEach(function (customer) {
        output += `
          <ul>
            <li>ID: ${customer.id}</li>
            <li>Name: ${customer.name}</li>
            <li>Company: ${customer.company}</li>
            <li>Phone: ${customer.phone}</li>
          </ul>
        `;
      });

      document.getElementById('customers').innerHTML = output;
    }
  };

  xhr.send();
}

خطاهای رایج در کار با JSON

در این نوع تمرین‌ها یکی از رایج‌ترین خطاها، اشتباه در ساختار فایل JSON است. برای مثال:

• جا افتادن }
• استفاده نکردن از دابل کوتیشن
• قرار دادن ویرگول اضافی
• اشتباه در ساختار آرایه

نمونه ساختار نادرست:

[
  {
    "id": 1,
    "name": "John Doe"
  ,
  {
    "id": 2,
    "name": "Steve Smith"
  }
]

نمونه ساختار درست:

[
  {
    "id": 1,
    "name": "John Doe"
  },
  {
    "id": 2,
    "name": "Steve Smith"
  }
]

اگر ساختار JSON نادرست باشد، JSON.parse() خطا تولید می‌کند.

ارتباط این مثال با APIهای واقعی

اگرچه در این آموزش داده‌ها را از فایل‌های محلی دریافت کردیم، اما همین منطق در کار با APIهای واقعی هم استفاده می‌شود.
در پروژه‌های عملی نیز معمولاً:

• یک درخواست به سرور ارسال می‌شود
• پاسخ JSON دریافت می‌شود
• داده با JSON.parse() یا روش‌های جدیدتر پردازش می‌شود
• خروجی در رابط کاربری نمایش داده می‌شود

بنابراین این مثال، پایه‌ای مناسب برای درک کار با APIها در جاوااسکریپت است.

جمع‌بندی

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

• JSON فرمت استاندارد و رایج برای تبادل داده است.
• پاسخ دریافتی از XMLHttpRequest در responseText به‌صورت رشته قرار می‌گیرد.
• برای استفاده از داده‌ها باید از JSON.parse() استفاده کنیم.
• اگر پاسخ یک آبجکت تکی باشد، می‌توان مستقیماً ویژگی‌های آن را نمایش داد.
• اگر پاسخ یک آرایه باشد، باید با حلقه یا forEach روی آن پیمایش انجام دهیم.
• همین الگو در کار با APIهای خارجی نیز کاربرد دارد.

در بخش بعدی، همین مفاهیم را برای دریافت داده از یک API عمومی به کار خواهیم گرفت.