اسکریپت برای نمایش لیست کشورها و شهرها بصورت AJAX، هم با دیتابیس داخلی SQLite و هم با MySQL


در دنیای توسعه وب، یکی از نیازهای متداول و پرکاربرد، نمایش لیستی از کشورها و شهرها است. این قابلیت، در برنامه‌های مختلف، از جمله سیستم‌های ثبت‌نام، فروشگاه‌های آنلاین، و اپلیکیشن‌های مسافرتی، اهمیت زیادی دارد. البته، این لیست باید به صورت داینامیک، سریع و قابل بروزرسانی باشد. راه حل مناسب و کارآمد برای این منظور، استفاده از AJAX است که به کاربران امکان می‌دهد بدون نیاز به بارگذاری مجدد صفحه، داده‌های مورد نیاز را دریافت و نمایش دهند. حال، اگر بخواهیم این لیست را همراه با دیتابیس‌های مختلف، یعنی SQLite و MySQL، پیاده‌سازی کنیم، چه مراحلی را باید طی کنیم و چه نکاتی را باید در نظر بگیریم؟ بیایید این موضوع را به طور کامل و جامع بررسی کنیم.
۱. اهمیت و مزایای استفاده از AJAX در نمایش لیست‌ها
AJAX، مخفف Asynchronous JavaScript And XML، به توسعه‌دهندگان اجازه می‌دهد تا درخواست‌های سمت سرور را به صورت ناهمزمان، بدون نیاز به بارگذاری کامل صفحه، ارسال و نتیجه را دریافت کنند. بنابراین، این قابلیت، تجربه کاربری را بسیار بهبود می‌بخشد، چون کاربران می‌توانند لیست‌های بزرگ و پیچیده را سریع‌تر و روان‌تر مشاهده کنند. همچنین، این روش، کاهش مصرف منابع سرور و پهنای باند شبکه را به همراه دارد، زیرا تنها داده‌های لازم منتقل می‌شوند، نه کل صفحه.
در پروژه‌های نمایش لیست کشورها و شهرها، AJAX به صورت مستقیم امکان بارگذاری بخش به بخش داده‌ها، جستجو، فیلتر کردن، و حتی دسته‌بندی‌های مختلف را فراهم می‌کند. فرض کنید، کاربر در حال انتخاب کشور است، و به صورت خودکار، شهرهای مرتبط با آن کشور نمایش داده می‌شوند؛ این عملیات‌ها بدون نیاز به رفرش صفحه، بسیار سریع و موثر انجام می‌پذیرند.
۲. ساختار دیتابیس و طراحی جداول
قبل از شروع به پیاده‌سازی کد، باید ساختار دیتابیس‌ها را مشخص کنیم. در اینجا، دو نوع دیتابیس داریم: SQLite و MySQL. هر دو، جداول مجزا، اما مشابه دارند:
- جدول کشورها (countries):

- id (کلید اصلی، عددی، خود افزایشی)

- name (نام کشور، رشته)

- code (کد کشور، مانند "US"، "FR" و غیره)
- جدول شهرها (cities):

- id (کلید اصلی، عددی، خود افزایشی)

- name (نام شهر، رشته)

- country_id (کلید خارجی، مرتبط با جدول countries)
در طراحی این جداول، باید اطمینان حاصل کنیم که ارتباط بین شهرها و کشورها، به درستی برقرار شده است، تا بتوان به راحتی، داده‌های مربوط به هر کشور را استخراج کرد.
۳. پیاده‌سازی سمت سرور
در سمت سرور، باید اسکریپتی بنویسیم که درخواست‌های AJAX را دریافت و پاسخ مناسب بدهد. این اسکریپت، بسته به نوع درخواست، لیست کشورها یا شهرها را برمی‌گرداند.
برای نمونه، در زبان PHP، می‌توان یک فایل به نام `get_locations.php` ساخت که بر اساس پارامترهای دریافت شده، داده‌ها را از دیتابیس واکشی کند. فرض کنید، اگر پارامتر `type=country` باشد، لیست کشورها را برمی‌گرداند. اگر `type=city` باشد، لیست شهرهای مربوط به کشور مشخص‌شده در پارامتر `country_id` را برمی‌گرداند.
کد نمونه ساده:
php  

<?php

// اتصال به دیتابیس (SQLite یا MySQL)

$db = new PDO($dsn, $username, $password);
$type = $_GET['type'];
if ($type == 'country') {

$stmt = $db->query("SELECT id, name FROM countries");

$countries = $stmt->fetchAll(PDO::FETCH_ASSOC);

echo json_encode($countries);

} elseif ($type == 'city' && isset($_GET['country_id'])) {

$country_id = intval($_GET['country_id']);

$stmt = $db->prepare("SELECT id, name FROM cities WHERE country_id = ?");

$stmt->execute([$country_id]);

$cities = $stmt->fetchAll(PDO::FETCH_ASSOC);

echo json_encode($cities);

}

?>


در این کد، توجه داشته باشید که برای هر نوع درخواست، داده‌های مناسب واکشی می‌شوند و در قالب JSON برمی‌گردند، که در سمت کلاینت قابل تفسیر است.
۴. پیاده‌سازی سمت کلاینت با AJAX و JavaScript
در قسمت کلاینت، باید اسکریپتی بنویسیم که درخواست‌های AJAX را به سمت سرور بفرستد و نتایج را دریافت کند. مثلا، زمانی که کاربر کشور را انتخاب می‌کند، شهرهای مربوطه به صورت خودکار بارگذاری شوند.
یک نمونه کد ساده:
html  

<select id="co... ← ادامه مطلب در magicfile.ir