جاوا اسکریپت Async: کار با شیء JSON در AJAX

کار با شیء JSON N در AJAX - قسمت اول

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

فایل index.html
فایل app.js

محتوای فایل HTML ما به شکل زیر است:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css" />
  <title>Ajax Sandbox</title>
</head>
<body>
  <div class="container">
    <button id="button1">Get Customer</button>
    <button id="button2">Get Customers</button>
    <br><br>
    <h1>Customer</h1>  
    <div id="customer"></div>
    <h1>Customers</h1>  
    <div id="customers"></div>
  </div>

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

همانطور که مشاهده می کنید در این صفحه دو دکمه دارید که id های button1 و button2 را دارند. همچنین دو div جداگانه داریم (یکی customer و دیگری customers) که بعدا آن ها را با محتوای خاصی پر می کنیم. فایل app.js نیز فعلا خالی است تا بعدا کدهای جاوا اسکریپت را درون آن بنویسیم. برای شروع کار نیاز به دو فایل دیگر است بنابراین دو فایل با نام های زیر را نیز در پوشه ی خود ایجاد کنید:

فایل json
فایل json

قرار است در این دو فایل چند شیء JSON داشته باشیم و با استفاده از درخواست های AJAX آن ها را درون صفحه ی HTML خود بیاوریم. همانطور که می دانید JSON بسیار شبیه به اشیاء جاوا اسکریپتی است و در واقع مخفف JavaScript Object Notation است اما تفاوت کوچکی نیز با شیء عادی جاوا اسکریپتی دارد.

JSON مخفف JavaScript Object Notation و به معنی «نشانه گذاری شیء جاوا اسکریپت» است که برای ذخیره سازی یا تبادل اطلاعات به کار می رود. زمانی که می خواهیم اطلاعاتی را بین یک سرور و یک مرورگر انتقال بدهیم، آن داده ها فقط می توانند متن باشند (به غیر از مواردی خاص). JSON نیز متن است و ما می توانیم هر شیء جاوا اسکریپتی را به JSON تبدیل کرده و به سرور ارسال کنیم. برعکس این پروسه نیز ممکن است؛ ما می توانیم هر JSON ای را به یک شیء جاوا اسکریپت تبدیل کنیم. بنابراین واضح است که نحوه ی نگارش JSON بر اساس قوانین شیء جاوا اسکریپت است و در حقیقت فقط یک رشته متن است که می تواند در هر زبان برنامه نویسی خوانده شود (چه در اندروید و چه روی سرور و...). این فرمت ابتدا توسط آقای Douglas Crockford معرفی شد. از ویژگی های JSON می توان به موارد زیر اشاره کرد:

داده ها در جفت های name/value ذخیره می شوند.
داده ها با ویرگول انگلیسی از هم جدا شده اند.
اشیاء درون Curly braces (کروشه) قرار می گیرند (علامت های {}).
آرایه ها درون براکت ها قرار می گیرند (علامت های []).

به مثال زیر توجه کنید:

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

متوجه شدید؟ این شیء JSON غیر معتبر است بلکه حالت معتبر آن زمانی است که Key ها و Value ها همگی در double quotation باشند (علامت ") به جز مواردی که value ما مقداری عددی است. بنابراین شکل صحیح شیء بالا بدین صورت است:

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

برای اعتبارسنجی اشیاء JSON خود می توانید به وب سایت هایی مثل jsonlint.com مراجعه کنید.

من محتوای فایل customer.json را نیز در اختیار شما قرار می دهم تا آن ها را درون فایل های خودتان کپی کنید. محتوای فایل customer.json یک شیء ساده ی JSON به صورت زیر است:

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

برای شروع کار وارد فایل app.js شوید تا برای دکمه ی HTML خود یک Event-listener تعریف کنیم:

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

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

// Load Single Customer
function loadCustomer(e) {

}

در قدم اول باید شیء XHR را تعریف کنیم:

// Load Single Customer
function loadCustomer(e) {
    const xhr = new XMLHttpRequest();

}

حالا دقیقا مثل دفعه ی قبل از متد Open استفاده می کنیم تا نوع درخواست خود را مشخص کرده و منبع خودمان را نیز آدرس دهی کنیم:

// Load Single Customer
function loadCustomer(e) {
    const xhr = new XMLHttpRequest();

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

}

در اینجا مشخص کرده ایم که دستور از نوع GET است (یعنی دریافت اطلاعات، مثلا از یک فایل) سپس منبع خود را مشخص کرده ایم (همان فایل customer.json) و در نهایت می خواهم این درخواست به صورت async یا نامتقارن اجرا شود بنابراین به پارامتر سوم true داده ام. در مرحله ی بعد دستور onload را پیاده سازی می کنیم تا هنگام دریافت پاسخ کار مشخصی را با آن انجام دهیم. در ابتدا باید مطمئن شویم که کد status روی 200 باشد تا بدانیم درخواست به شکل سالم ارسال شده است:

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

من برای تست کردن کدها، پاسخ دریافت شده را log کرده ام که نتیجه اش را مشاهده می کنید:

همان شیء JSON خود را پس گرفته ایم بنابراین کدها به شکل صحیح کار می کند. حالا که از صحت کدها مطمئن شده ایم، دستور console.log را کامنت می کنیم. من می خواهم با کلیک روی دکمه ی button1 اطلاعات مشتری (customer) در صفحه ی HTML خودم و در div اول نمایش داده شود نه اینکه console.log شود بنابراین در قدم اول باید آن را به شکل یک شیء جاوا اسکریپتی parse کنیم (آن را به یک شیء جاوا اسکریپتی تبدیل کنیم):

// Load Single Customer
function loadCustomer(e) {
    const xhr = new XMLHttpRequest();

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

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

        }
    }

}

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

سوال: ما می دانیم که برای دسترسی به خصوصیات یک شیء می توانیم به صورت object.key عمل کنیم بنابراین چرا در اینجا چنین کاری نکرده و ابتدا شیء JSON را درون JSON.parse قرار داده ایم؟

در قسمت بعد به این سوال پاسخ خواهیم داد.

دیدگاه‌های شما (2 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

محمدرضا

21 دی 1401

سلام xhr.open('post','customer.json',true); xhr.send(); send نیاز ندارد ؟

ابراهیم

17 بهمن 1398

ممنونم واسه این درسگفتار عالی شما چقدر به من کمک کرد تا اینجای کار در فهم این موضوع لعنتی که مدتی واقعا گیج شده بودم و هیچ مطلب درست درمون هم پیدا نمیکردم که درکش کنم اصلا چیه داستان