49- آموزش جاوااسکریپت | دریافت داده از API خارجی با AJAX و XMLHttpRequest

در این آموزش یاد می‌گیرید چگونه با استفاده از AJAX و XMLHttpRequest از یک API خارجی داده دریافت کنید، پاسخ JSON را پردازش کنید و نتیجه را در صفحه نمایش دهید.

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

API چیست و چرا مهم است؟

API رابطی برای تبادل داده بین نرم‌افزارها است. در برنامه‌های فرانت‌اند، داده‌ها معمولاً از طریق درخواست‌های HTTP از سرور یا سرویس‌های خارجی دریافت می‌شوند.

هنگام کار با APIهای خارجی، نکات زیر را در نظر داشته باشید:

هر API مستندات و آدرس مخصوص به خود را دارد.
ساختار داده‌های ارسالی (Response) متفاوت است.
بسیاری از سرویس‌ها برای کنترل دسترسی و شناسایی کاربر، نیاز به API Key دارند.
برای ارسال API Key معمولاً از Header در درخواست‌های HTTP استفاده می‌شود.

ایده پروژه

در این مثال، یک دکمه می‌سازیم که کاربر با کلیک روی آن، یک درخواست GET به API ارسال می‌کند. سپس یک جوک تصادفی دریافت شده و در صفحه نمایش داده می‌شود.

ما از API Ninjas Chuck Norris API استفاده می‌کنیم که آدرس آن به شرح زیر است: https://api.api-ninjas.com/v1/chucknorris

این API هیچ پارامتری برای ورودی نیاز ندارد و فقط با ارسال کلید دسترسی در Header کار می‌کند.

ساختار HTML

ابتدا رابط کاربری را با یک دکمه و یک محل برای نمایش متن جوک آماده می‌کنیم.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chuck Norris Joke Generator</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
</head>
<body>
  <div class="container">
    <h2>Chuck Norris Joke Generator</h2>

    <button class="get-joke">Get Joke</button>

    <p class="joke"></p>
  </div>

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

پیاده‌سازی منطق جاوااسکریپت (app.js)

ابتدا دکمه را انتخاب کرده و یک رویداد کلیک به آن اضافه می‌کنیم. سپس تابع مربوط به دریافت داده را می‌نویسیم.

document.querySelector('.get-joke').addEventListener('click', getJoke);

function getJoke(e) {
  // جلوگیری از رفرش شدن صفحه در صورت وجود تگ فرم
  e.preventDefault();

  const xhr = new XMLHttpRequest();

  // باز کردن درخواست
  xhr.open('GET', 'https://api.api-ninjas.com/v1/chucknorris', true);

  // تنظیم هدر برای احراز هویت
  // جایگزین کنید YOUR_API_KEY با کلید واقعی خود
  xhr.setRequestHeader('X-Api-Key', 'YOUR_API_KEY');

  xhr.onload = function () {
    if (this.status === 200) {
      // تبدیل پاسخ متنی به آبجکت جاوااسکریپت
      const response = JSON.parse(this.responseText);
      
      // نمایش جوک در صفحه
      document.querySelector('.joke').textContent = response.joke;
    } else {
      document.querySelector('.joke').textContent = 'Error: Could not fetch joke';
    }
  };

  // ارسال درخواست
  xhr.send();
}

تحلیل کد

در این کد چند مرحله کلیدی انجام شد:

xhr.open: نوع درخواست را GET تعیین کردیم و آدرس API را به آن دادیم.
xhr.setRequestHeader: این بخش بسیار مهم است. از آنجا که این سرویس نیاز به احراز هویت دارد، کلید دسترسی را در هدر با نام X-Api-Key ارسال کردیم.
JSON.parse: پاسخ سرور به صورت رشته (String) دریافت می‌شود. با این متد، آن را به یک آبجکت قابل استفاده تبدیل کردیم.
response.joke: بر اساس مستندات این API، داده جوک درون فیلدی به نام joke قرار دارد.
textContent: برای نمایش ایمن متن در صفحه، از این ویژگی استفاده کردیم تا از تزریق کدهای ناخواسته جلوگیری شود.

نکته درباره API Key

در پروژه‌های واقعی، نمایش API Key به صورت مستقیم در فایل جاوااسکریپت سمت کلاینت (فرانت‌اند) امنیت بالایی ندارد، زیرا برای همه کاربران در مرورگر قابل مشاهده است. برای امنیت بیشتر در محیط‌های عملیاتی، درخواست‌ها معمولاً از طریق یک سرور میانی (بک‌اند) ارسال می‌شوند تا کلید دسترسی مخفی باقی بماند. اما برای تمرین و یادگیری مفاهیم AJAX و کار با هدرها، این روش کاملاً مناسب است.

// 0 comments

#جاوااسکریپت#دریافت داده از API#آموزش API#XMLHttpRequest#API#آموزش AJAX#AJAX#JSON#JavaScript