چگونه از AJAX برای بارگذاری فایل استفاده می کنید ؟

هر برنامه نویسی باید در مورد نحوه ایجاد درخواست غیرهمزمان توسط AJAX به سمت یک سرور، اطلاعات کافی داشته باشد. اجازه دهید با این سوال که AJAX چیست شروع کنیم و سپس با یک مثال کوتاه با نحوه عملکرد آن آشنا شویم. AJAX خلاصه شده Asynchronous JavaScript and XML هست و این بدان معناست که شما می توانید بدون اینکه معطل پاسخ از طرف سرور برای درخواست ارسالی اتان گردید به کارتان ادامه دهید تا سرور درخواست شما را تکمیل کرده و پاسخ مناسب را به شما ارسال کند. اطلاعات موجود در پاسخ سرور توسط مرورگر دریافت شده و شما می توانید بر روی آن اطلاعات عملیات مورد نیازتان را انجام دهید.

برای ساخت درخواست ما از یک سازنده به نام XMLHttpRequest استفاده خواهیم کرد و سپس از چندین تابع دیگر برای مدیریت درخواست ارسالی کمک خواهیم گرفت. نام تابعی که با XML شروع می شود ممکن است ما را کمی گمراه کند. استفاده از XML این روزهای خیلی مد نیست و قرار نیست که از آن استفاده کنیم. ما می توانیم با استفاده از آبجکت جاوا اسکریپت محتوای متن درخواست را بررسی و فراخوانی کنیم و نیازی به XML نداشته باشیم.

اکنون مهمترین متدی که باید درباره آن بدانیم متد Open هست که به ما اجازه می دهد که درخواستمان به سمت سرور را آماده کنیم. و در نهایت با استفاده از متد Send درخواستمان را به سمت سرور ارسال کنیم. حال اگر درخواستمان ارسال شده است می توانیم یک رویداد ویژه بنام readystatechange را تحت نظر بگیریم تا به محض اینکه دیتای درخواستی را سرور ارسال کرد متوجه شویم. سرور دیتای ارسالی را درون یک آبجکت به ما ارسال خواهد کرد که در دل خود چندین مشخصه دارد که می توانیم برای بررسی و صحت سنجی درخواست از آن بهره ببریم. بعد اینکه درخواست مورد نظر تایید شد ما اطلاعات دریافتی را به خورد یک آبجکت جاوا اسکریپتی می دهیم.

پس اجازه دهید که جلوتر بروم و نگاهی به نحوه انجام آن داشته باشیم. اینجا برنامه ساده کوچکی است. این یک پروژه بوت استرپ ساده است با چندتا نوشته درون آن. و در سمت راست درون فولدرهای ساخته شده، فولدر پروژه وجود دارد به همراه فایل index.htm و یک فولدر javascript که درون آن فایل data.json را که چیزی شبیه به این است را داریم .

این همان چیزی است که می خواهیم ایمپورت کنیم . لزومی ندارد که حتما فایل json باشد ولی چون با json کارمان موقع خوراندن اطلاعات به آبجکت جاوا اسکریپت خیلی راحت تر می شود از آن استفاده می کنیم. فایل های دیگری که مشاهده می کنید فایل های مورد نیاز پروژه است . ولی ما اینجا با فایل data.json کار خواهیم کرد.

اگر با ES6 کار کنید کد های جاوا اسکریپت درون فولدر process قرار دارد و اینجا فایل script.js وجود دارد که فعلا کاملا خالی است و ما درون آن کدهایمان را خواهیم نوشت. با سازنده شروع می کنیم XMLHttpRequest. یک متغیر بنام request که یک نمونه از XMLHttpRequest را به آن وصل می کنیم.

var request = new XMLHttpRequest();

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

request.open();

request.send();

برای اینکه ما یک درخواست را باز کنیم نیاز داریم که دوتا چیز را مشخص کنیم.

اول اینکه چطور می خواهیم اطلاعات را ارسال کنیم و ما اینجا از متد GET استفاده خواهیم کرد .این بدان معناست که ما از سرور درخواست گرفتن چیزی را خواهیم کرد و در مرحله دوم فایل مورد نظر را تعیین خواهیم کرد. که اینجا ما قصد داریم از فایل data.json استفاده کنیم که درون فولدر JS قرار دارد. پس آرگومان اول متدی که استفاده می شود را ارسال می کند و آرگومان دوم محل فایل مورد نظر ما را. حال متد open ما به شکل زیر تکمیل شد.

request.open(‘GET’, ‘js/data.json’);

بخاطر داشته باشیم که ما بخاطر ساختار پروژه فایل درون فولدر JS را استفاده می کنیم. حال اجازه دهید ببینیم اگر دیتایی را از طرف سرور دریافت می کنیم چه اتفاقی رخ می دهد؟ زمانیکه شما درخواستی را ایجاد می کنید. سرور تلاش خودش را انجام می دهد تا به شما اطلاعاتی را در پاسخ ارسال کند. و ما با استفاده از رویداد گوش به زنگ خواهیم ماند. این کار را می توانیم با استفاده از یک فانکشن callback انجام دهیم. درون این فانکشن باید چند مورد را بررسی کنیم.

request.onreadystetchange = function() {

}

ابتدا از اینکه درخواست مورد قبول بوده یا نه بایستی مطمعن شویم. این کار را با استفاده از پیغام status انجام خواهیم داد. این پیغام یا عددی که از طرف سرور باز خواهد گشت به ما درباره وضعیت درخواست ما به ما اطلاعاتی خواهد داد. مثلا اگر شما فایلی را از سرور درخواست کنید که وجود نداشته باشد با پیغام مشهور : این صفحه پیدا نشد و یا کد 404 روبرو خواهید شد. در همین راستا کد ۲۰۰ به معنی موفقیت درخواست ما خواهد بود و این همان پیغامی است که ما همواره دوست داریم به عنوان جواب از طرف سرور بشنویم.

request.onreadystetchange = function() {

if ( request.status === 200) { }

}

حال نیاز داریم که یک مورد دیگر را بررسی کنیم. و آن آماده بودن یا نبودن دیتای درخواستی ما از طرف سرور است. آیا دیتا آماده است ؟ جواب این سوال را با استفاده از readyState خواهیم فهمید. و اگر جواب ۴ را دریافت کنیم یعنی دیتای ما آماده است. در AJAX یک درخواست در چهار مرحله تکمیل می شود و متناسب با آن کدهای یک ، دو، سه و چهار بازخورد داده خواهد شد. عدد ۴ یعنی دیتای درخواستی ما آماده است و می توانیم روی آن عملیات خودمان را انجام دهیم.

request.onreadystetchange = function() {

if ( request.status === 200 && request.readyState === 4) { }

}

خب حالا نوبت این است که دیتای دریافتی را داخل یک متغیر ذخیره کنیم. دیتای دریافتی درون فیلدی بنام responseText به ما از سمت سرور برگشت می خورد . ابتدا یک متغیر به اسم data بالا می سازیم. و اگر شرط برقرار شد دیتای مورد نظر را توسط متد JSON. parse به درون یک آبجکت جاو ا اسکریپت ریخته خواهد شد. کار متد json.parse گرفتن نوشته ها و تحویل آن به شکل یک آبجکت جاوا اسکریپت است. پس حال ما میتوانیم بگوییم که از درون ً ًRequest به فیلد responseText برس و مقدار آنرا درون متغیر data ذخیره کن.

request.onreadystetchange = function() {

if ( request.status === 200 && request.readyState === 4) {

data = JSON.parse(request.responseText);

}

}

اجازه بدهید ابتدا خروجی ها را درون کنسول مشاهده کنیم. پس با استفاده از console.log مقدار data و از طرفی محتوای request را هم درون کنسول مشاهده کنیم.

request.onreadystetchange = function() {

if ( request.status === 200 && request.readyState === 4) {

data = JSON.parse(request.responseText);

console.log(data);

console.log(request);

}

}

خب اکنون اجازه دهید این فایل را ذخیره کنیم و ببینیم وقتی صفحه را بارگذاری مجدد می کنیم همه چیز درست پیش می رود ؟

var data;

var request = new XMLHttpRequest();

request.open(‘GET’, ‘js/data.json’);

request.onreadystetchange = function() {

if ( request.status === 200 && request.readyState === 4) {

data = JSON.parse(request.responseText);

console.log(data);

console.log(request); }

}

request.send();

اگر همه چیز خوب پیش بره می تونیم با inspect کردن المان روی صفحه و مشاهده درون کنسول از نتیجه مطمعن شوید. درون کنسول دو تا ردیف وجود دارد یکی object و دیگری XMLHttpRequest که می توان محتویات درون آن را با جزییات بیشتر مشاهده کنیم. بر روی مثلث کوچک کنار Object کلیک کنید. این همان دیتای واقعی است که ما می خواهیم دریافت کنیم. این دیتا از دیتای درون فایل data.json برگرفته شده است.دقت کنید هیچ ترتیب خاصی در آن دیده نمی شود. هرچند ابتدا لیست calendar ها دیده می شود ولی در واقع ابتدا لیست artist ها خوانده می شوند.

پس ما به یک سری از آبجکت ها که درون خودشون اطلاعات artist ها را دارند دسترسی داریم. خیلی عالی شد. اینجا هم اطلاعات دیگری درباره calendar داریم. پس مطمعن شدیم که اطلاعات را بخوبی توانستیم از سرور بخوانیم. چیز دیگری که ما می تونیم بهش سرکی بزنیم xmlHttpRequest هستش. اگر برروی خود درخواست کلیک کنیم ما به کد status که قبلا دریافت کرده بودیم ببینیم و یا readystate که مقدار ۴ را به خود گرفته است.

کمی پایین تر می توان responseText را نیز ببینیم که دیتای درون آن را توسط متد JSON.parse تبدیل به آبجکت کرده بودیم. AJAX می تونه کمی دشوار بنظر برسد ولی در واقعیت بسیار ساده است تا زمانیکه نحوه استفاده از درخواست را بدانیم و کدهای که نیاز داریم تا چک کنیم را در نظر داشته باشیم و نحوه خوراندن نوشته های درون سرور و ذخیره کردن آنها را درون یک متغیر بخاطر بسپاریم. اطلاعات بیشتر را می توانید از لینک های زیر بیابید.

این متن ترجمه یک درس از لینک زیر است https://www.lynda.com/Web-Development-tutorials/Have-you-used-AJAX-load-external-file/580663/669101-4.html

با تشکر از زمانی که برای مطالعه صرف کردید.