Ajax/jQuery.getJSON مثال ساده – SitePoint

در این مقاله ، ما اهمیت JSON و دلیل استفاده از آن را در برنامه های کاربردی خود بررسی می کنیم. خواهیم دید که jQuery ما را با یک نرم افزار بسیار زیبا پوشانده است عملکرد راحتی.

JSON چیست؟

JSON مخفف است جآواسخزنده Oسوگند زدن Nتعویض این فرمت مستقل از زبان و مبتنی بر متن است که معمولاً برای انتقال داده در برنامه های وب استفاده می شود. در این مقاله ، ما بارگذاری داده های JSON را با استفاده از درخواست HTTP GET (ما همچنین می توانیم از افعال دیگر ، مانند POST) استفاده کنیم.

چرا JSON را به جای XML انتخاب می کنیم؟ مزیت اصلی استفاده از JSON کارایی است. JSON کم حرف و درهم و برهم است ، در نتیجه تعداد بایت کمتر و یک فرایند تجزیه سریعتر انجام می شود. این به ما امکان می دهد پیام های ارسال شده بیشتر به عنوان JSON را نسبت به XML پردازش کنیم. علاوه بر این ، JSON دارای یک نمایش شی بسیار کارآمد و طبیعی است که منجر به فرمت هایی مانند BSON، جایی که اشیاء شبیه JSON در قالب باینری ذخیره می شوند.

حال ، بیایید ببینیم که چگونه jQuery می تواند به ما کمک کند داده های کد شده JSON را از یک منبع از راه دور بارگذاری کنیم. برای بی صبری در بین شما ، نسخه نمایشی در انتهای مقاله وجود دارد.

نحو JSON jQuery

$.getJSON() در صورتی که نیازی به پیکربندی اضافی ندارید ، این متد برای کمک مستقیم به JSON بسیار مفید است. در اصل ، به موارد کلی تر خلاصه می شود $ .ajax () کمکی ، با استفاده از گزینه های مناسب به طور ضمنی. روش امضا عبارت است از:

$.getJSON(url, data, success);

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

بنابراین سه پارامتر مربوط به موارد زیر است:

• url پارامتر ، یک رشته حاوی URL است که درخواست به آن ارسال می شود
• اختیاری data پارامتر ، که یا شی است یا رشته ای است که با درخواست به سرور ارسال می شود
• اختیاری success(data, textStatus, jqXHR) پارامتر ، که یک تابع پاسخ به تماس است که تنها در صورت موفقیت درخواست اجرا می شود

در ساده ترین سناریو ، ما فقط به شیء برگشتی اهمیت می دهیم. در این مورد ، یک پتانسیل success تماس تلفنی به این شکل خواهد بود:

function success(data) {
  
}

همانطور که گفته شد ، همان درخواست را می توان با کلمات بیشتر فعال کرد $.ajax() صدا زدن. در اینجا ما از موارد زیر استفاده خواهیم کرد:

$.ajax({
  dataType: 'json',
  url: url,
  data: data,
  success: success
});

اجازه دهید این را در عمل با استفاده از یک نسخه ی نمایشی کوچک ببینیم.

یک برنامه نمونه

ما یک سرور محلی راه اندازی می کنیم که یک فایل JSON استاتیک را ارائه می دهد. شیء ارائه شده توسط این فایل توسط کد جاوا اسکریپت ما واکشی و پردازش می شود. برای اهداف نمایشی ، از Node.js برای ارائه سرور استفاده می کنیم (اگرچه هر سروری این کار را انجام دهد). این بدان معناست که ما به سه چیز زیر نیاز داریم:

• نصب و راه اندازی Node.js
• مدیر بسته گره (npm)
• نصب جهانی از بسته سرور زنده

دو نکته اول وابسته به پلتفرم هستند. برای نصب Node ، لطفاً به پروژه بروید صفحه بارگیری و فایلهای باینری مربوط به سیستم خود را بگیرید. از طرف دیگر ، ممکن است بخواهید از مدیر نسخه ای استفاده کنید که در “نصب چندین نسخه Node.js با استفاده از nvm” توضیح داده شده است.

npm همراه با Node ارائه می شود ، بنابراین نیازی به نصب هیچ چیزی نیست. با این حال ، اگر برای راه اندازی و راه اندازی به کمک نیاز دارید ، از آموزش ما “A Beginner’s Guide to npm – the Node Package Manager” دیدن کنید.

نکته سوم را می توان با اجرای موارد زیر از ترمینال خود بدست آورد:

npm install -g live-server

اگر متوجه شدید که به یک مورد نیاز دارید sudo پیشوند (-nix systems) یا یک فرمان سریع برای انجام این نصب سراسری ، باید محل بسته های سراسری را تغییر دهید.

هنگامی که این الزامات برآورده شد ، می توانیم سه فایل زیر را در یک پوشه جدید ایجاد کنیم:

• main.js، که فایل جاوا اسکریپت برای درخواست داده ها است
• example.json، که نمونه فایل JSON است
• index.html، که صفحه HTML برای فراخوانی جاوا اسکریپت و نمایش داده ها است

از خط فرمان می توانیم به سادگی فراخوانی کنیم live-server در پوشه جدید این نسخه ی نمایشی ما را در یک برگه مرورگر جدید باز می کند ، در ساعت اجرا می شود http: // localhost: 8080.

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

کد زیر منطق کامل سمت کلاینت است. منتظر است DOMContentLoaded بارگیری رویداد به آتش ، قبل از گرفتن مرجع به دو عنصر DOM – $showData، جایی که پاسخ تجزیه شده را نمایش می دهیم ، و $raw، که در آن پاسخ کامل را نمایش می دهیم.

سپس یک کنترل کننده رویداد را به click رویداد عنصر با شناسه get-data. وقتی روی این عنصر کلیک می کنیم ، سعی می کنیم JSON را با استفاده از سرور بارگذاری کنیم $.getJSON()، قبل از پردازش پاسخ و نمایش آن روی صفحه:

$(document).ready(() => {
  const $showData = $('#show-data');
  const $raw = $('pre');

  $('#get-data').on('click', (e) => {
    e.preventDefault();

    $showData.text('Loading the JSON file.');

    $.getJSON('example.json', (data) => {
      const markup = data.items
        .map(item => `<li>${item.key}: ${item.value}</li>`)
        .join('');

      const list = $('<ul />').html(markup);

      $showData.html(list);

      $raw.text(JSON.stringify(data, undefined, 2));
    });
  });
});

علاوه بر تبدیل بخش هایی از شی به لیست نامرتب ، شیء کامل نیز وجود دارد سخت شده و روی صفحه نمایش داده می شود. لیست نامرتب به a اضافه می شود <div> عنصر با شناسه show-data، رشته JSON a <pre> برچسب ، به طوری که به خوبی قالب بندی شده است. البته ، برای مثال ما داده ها ثابت هستند ، اما به طور کلی هر نوع پاسخی ممکن است.

توجه داشته باشید که مقداری متن نیز برای خروجی تنظیم کرده ایم <div>. اگر برای بازیابی JSON (به عنوان مثال ، در ابزارهای توسعه مرورگر خود) تاخیری (مصنوعی) وارد کنیم ، می بینیم که قبل از هر نتیجه ای از $.getJSON درخواست نمایش داده می شود دلیل آن ساده است: به طور پیش فرض ، $.getJSON غیر مسدود است-یعنی async. بنابراین ، تماس مجدد بعداً (در زمان نامعلوم) اجرا می شود.

تقطیر منبع برای به دست آوردن اطلاعات مهم ، بلوک زیر را به دست می آورد:

$('#get-data').on('click', () => {
  $.getJSON('example.json', (data) => {
    console.log(data);
  });
});

در اینجا ما فقط پیوند را وصل می کنیم تا شروع شود $.getJSON helper قبل از چاپ شی بازگشتی در کنسول اشکال زدایی.

نمونه JSON

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

{
  "items": [
    {
      "key": "First",
      "value": 100
    },
    {
      "key": "Second",
      "value": false
    },
    {
      "key": "Last",
      "value": "Mixed"
    }
  ],
  "obj": {
    "number": 1.2345e-6,
    "enabled": true
  },
  "message": "Strings have to be in double-quotes."
}

در نمونه جاوا اسکریپت ، ما فقط آرایه مربوط به items کلید برخلاف جاوا اسکریپت معمولی ، JSON از ما می خواهد که کلیدها را در نقل قول های دوگانه قرار دهیم. علاوه بر این ، ما نمی توانیم از کاما برای تعیین اشیاء یا آرایه ها استفاده کنیم. با این حال ، مانند آرایه های معمولی جاوا اسکریپت ، ما هستند مجاز به قرار دادن اشیاء از انواع مختلف است.

صفحه وب نمونه

ما قبلاً اسکریپت و نمونه فایل JSON را بررسی کرده ایم. تنها چیزی که باقی می ماند صفحه وب است که قسمت هایی را که توسط فایل جاوا اسکریپت برای فعال کردن و نمایش فایل JSON استفاده می شود ، ارائه می دهد:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Request JSON Test</title>
  </head>
  <body>
    <a href="#" id="get-data">Get JSON data</a>
    <div id="show-data"></div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>

اینجا حرف زیادی برای گفتن نیست ما از نسخه کوچک jQuery از صفحه وب رسمی استفاده می کنیم. سپس اسکریپت خود را که مسئول تزریق منطق است ، قرار می دهیم.

توجه: همانطور که ما فایل های جاوا اسکریپت خود را در محل مناسب (درست قبل از بسته شدن) قرار می دهیم </body> tag) ، دیگر نیازی به استفاده از a نیست $(document).ready() فراخوانی ، زیرا در این مرحله ، سند با تعریف آماده می شود.

نسخه ی نمایشی

و این همان چیزی است که ما به پایان می رسانیم.

روش عمومی تر

همانطور که قبلاً ذکر شد ، $.ajax Method معامله واقعی برای هرگونه درخواست وب (نه تنها مربوط به JSON) است. این روش به ما اجازه می دهد تا صراحتاً همه گزینه هایی را که به آن اهمیت می دهیم تنظیم کنیم. ما می توانیم تنظیم کنیم async به true اگر می خواهیم این صدا همزمان اجرا شود – یعنی به طور بالقوه همزمان با سایر کدها اجرا شود. تنظیم آن روی false از اجرای کد دیگر در حین بارگیری جلوگیری می کند:

$.ajax({
  type: 'GET',
  url: filename,
  data: data,
  async: false,
  beforeSend: (xhr) => {
    if (xhr && xhr.overrideMimeType) {
      xhr.overrideMimeType('application/json;charset=utf-8');
    }
  },
  dataType: 'json',
  success: (data) => {
    
  }
});

overrideMimeType Method (که نوع MIME بازگشتی توسط سرور را نادیده می گیرد) فقط برای اهداف نمایشی فراخوانی می شود. به طور کلی ، jQuery به اندازه کافی هوشمند است تا بتواند نوع MIME را با توجه به نوع داده مورد استفاده تنظیم کند.

قبل از اینکه به معرفی مفهوم اعتبار سنجی JSON بپردازیم ، اجازه دهید نگاهی کوتاه به یک مثال واقعی تر داشته باشیم. معمولاً ما یک فایل JSON ثابت درخواست نمی کنیم ، بلکه JSON را بارگیری می کنیم ، که به صورت پویا تولید می شود (به عنوان مثال ، در نتیجه فراخوانی API). نسل JSON به برخی پارامترها بستگی دارد که باید از قبل ارائه شوند:

const url = 'https://api.github.com/v1/...';
const data = {
  q: 'search',
  text: 'my text'
};

$.getJSON(url, data, (data, status) => {
  if (status === 200) {
    
  }
});

در اینجا ما وضعیت را بررسی می کنیم تا اطمینان حاصل شود که نتیجه در واقع شیء برگشتی از a است موفقیت آمیز درخواست و نه شیء حاوی پیام خطا. کد دقیق وضعیت وابسته به API است ، اما برای اکثر درخواست های GET ، کد وضعیت 200 معمولی است.

داده ها در قالب یک شی ارائه می شوند ، که وظیفه ایجاد رشته پرس و جو (یا انتقال بدن درخواست) را تا jQuery می گذارد. این بهترین و مطمئن ترین گزینه است.

اعتبارسنجی JSON

ما نباید اعتبار داده های JSON خود را فراموش کنیم! یک وجود دارد ابزار آنلاین JSON Validator به نام JSONLint که می تواند برای اعتبارسنجی فایل های JSON استفاده شود. بر خلاف جاوا اسکریپت ، JSON بسیار سختگیر است و تحمل ندارد – به عنوان مثال ، برای ویرگولهای ذکر شده فوق یا روشهای متعدد نوشتن کلید (با /، بدون نقل قول).

بنابراین ، اجازه دهید برخی از رایج ترین اشتباهات هنگام برخورد با JSON را مورد بحث قرار دهیم.

خطاهای رایج $ .getJSON

• شکست های بی صدا در راه است $.getJSON تماس می گیرد این ممکن است رخ دهد ، برای مثال ، jsoncallback=json1234 استفاده شده است ، در حالی که تابع json1234() وجود ندارد در چنین مواردی ، $.getJSON بی صدا خطا خواهد کرد بنابراین ما همیشه باید استفاده کنیم jsoncallback=? اجازه دهید jQuery به طور خودکار تماس اولیه را مدیریت کند.

• در بهترین حالت ، JSON واقعی (به جای JSONP) استفاده می شود (یا با سرور خود صحبت کنیم یا از طریق CORS) این مجموعه ای از خطاهای بالقوه ای را که با استفاده از JSONP معرفی شده اند حذف می کند. س Theال اساسی این است: آیا سرور / API از JSONP پشتیبانی می کند؟ آیا محدودیتی در استفاده از JSONP وجود دارد؟ در اینجا می توانید در مورد کار با JSONP اطلاعات بیشتری کسب کنید.

• Uncaught syntax error: Unexpected token (در Chrome) یا invalid label (در فایرفاکس). آخرین مورد را می توان با انتقال داده های JSON به تماس جاوا اسکریپت ثابت کرد. با این حال ، به طور کلی ، این یک شاخص قوی است که نشان می دهد JSON ناقص است. استفاده را در نظر بگیرید JSONLint، همانطور که در بالا توصیه شد.

س questionال بزرگ این است: چگونه می توان تشخیص داد که آیا خطا در واقع در JSON منتقل شده است؟

نحوه رفع خطاهای JSON

قبل از شروع اشکال زدایی مربوط به JSON ، سه نکته ضروری وجود دارد:

• ما باید مطمئن شویم که JSON بازگردانده شده توسط سرور دارای فرمت صحیح است و از نوع MIME صحیح استفاده می شود.
• می توانیم سعی کنیم استفاده کنیم $. دریافت کنید بجای $.getJSON، همانطور که ممکن است سرور ما JSON نامعتبر را بازگرداند. همچنین اگر JSON.parse() در متن برگشتی شکست می خورد ، ما بلافاصله می دانیم که JSON مقصر است.
• با ورود به کنسول می توانیم داده هایی را که برمی گردند بررسی کنیم. این باید ورودی تحقیقات بیشتر باشد.

سپس اشکال زدایی باید با ابزار JSONLint که قبلاً ذکر شد شروع شود.

نتیجه

JSON یک فرمت استاندارد واقعی برای تبادل داده های متنی است. جی کوئری $.getJSON() این متد به ما کمک کوچکی می دهد تا تقریباً با هر سناریویی که شامل درخواست داده های فرمت JSON می شود مقابله کنیم. در این مقاله ، ما برخی از روش ها و احتمالاتی را که با این دستیار مفید همراه است بررسی کرده ایم.

در صورت نیاز به پیاده سازی JSON واکشی در کد خود (با استفاده از $.getJSON() یا هر چیز دیگری) ، بیایید و در انجمن های SitePoint از ما دیدن کنید.