استفاده از AJAX در PHP و jQuery — راهنمای مقدماتی

۷۲۶ بازدید

آخرین به‌روزرسانی: ۰۸ مهر ۱۴۰۲

زمان مطالعه: ۶ دقیقه

استفاده از AJAX در PHP و jQuery — راهنمای مقدماتی

در این نوشته به مبانی AJAX و شیوه استفاده از آن در PHP می‌پردازیم. تکنیک AJAX جهت بهبود رابط کاربری و بهینه‌سازی کلی تجربه کاربر نهایی عرضه شده است. همچنین به کارگیری Ajax در ASP.NET MVC نیز رواج دارد که در نوشته آموزش Ajax در MVC به آن پرداخته شده است.

فهرست مطالب این نوشته

AJAX چیست؟

شیوه بهره‌گیری از AJAX با استفاده از جاوا اسکریپت صرف

شیوه بهره‌گیری از AJAX با استفاده از کتابخانه jQuery

یک مثال واقعی از AJAX در PHP

سخن پایانی

AJAX چیست؟

اختصاری برای عبارت «جاوا اسکریپت و XML ناهمگام» (Asynchronous JavaScript and XML) است و امکان واکشی ناهمگام محتوا از سرور بک‌اند بدون نیاز به رفرش کردن صفحه را فراهم می‌سازد. از این رو می‌توانیم محتوای یک صفحه وب را بدون نیاز به بارگذاری مجدد آن به‌روزرسانی کنیم.

فیلم آموزش کاربردی ایجکس AJAX در جی کوئری jQuery در فرادرس

کلیک کنید

در ادامه به بررسی یک مثال می‌پردازیم تا شیوه استفاده از AJAX را در توسعه اپلیکیشن‌های روزمره خود متوجه شویم. فرض کنید می‌خواهیم یک صفحه بسازیم که اطلاعات پروفایل یک کاربر را نمایش دهد و دارای بخش‌های مختلفی مانند اطلاعات شخصی، اطلاعات اجتماعی، اعلان‌ها، پیام‌ها و موارد دیگر است.

رویکرد معمول می‌تواند این باشد که صفحه‌های وب مختلفی برای هر بخش بسازیم. بدین ترتیب برای مثال کاربران باید روی لینک اطلاعات اجتماعی کلیک کنند تا مرورگر بارگذاری مجدد شود و یک صفحه حاوی اطلاعات اجتماعی را نشان دهد. این کار باعث می‌شود که ناوبری بین بخش‌های مختلف صفحه کُندتر شود، چون کاربر باید هر بار منتظر بارگذاری مجدد صفحه از سوی مرورگر و رندر شدن آن بماند.

در سوی دیگر می‌توان از AJAX استفاده کرد و رابطی ساخت که همه اطلاعات را بدون نیاز به رفرش کردن صفحه بارگذاری می‌کند. در این حالت، می‌توان برگه‌های مختلفی برای نمایش بخش‌های مختلف اطلاعات کاربری طراحی کرد و با کلیک روی این برگه‌ها، محتوای مورد نیاز از سرور بک‌اند واکشی شده و صفحه بدون نیاز به رفرش کردن مجدد مرورگر به‌روزرسانی می‌شود. این امر به بهبود تجربه کلی کاربر نهایی کمک می‌کند.

یک فراخوانی کلی AJAX می‌تواند چیزی مانند زیر باشد:

گردش کار معمول AJAX به طور خلاصه به صورت زیر است:

ابتدا کاربر یک صفحه وب را به طور معمول با یک درخواست همگام باز می‌کند.
سپس کاربر روی عنصر DOM که به طور معمول یک دکمه یا لینک است کلیک می‌کند و بدین ترتیب یک درخواست ناهمگام به سرور بک‌اند ارسال می‌کند. کاربر نهایی متوجه نمی‌شود که با این کار یک درخواست ناهمگام ارسال کرده است، چون مرورگر رفرش نمی‌شود. با این وجود، شما می‌توانید این فراخوانی‌های AJAX را با استفاده از ابزاری مانند Firebug مشاهده کنید.
سرور در پاسخ به درخواست AJAX کاربر می‌تواند یک داده رشته‌ای XML ،JSON یا HTML بازگشت دهد.
این داده پاسخ با استفاده از جاوا اسکریپت تفسیر می‌شود.
در نهایت داده‌های تفسیر شده در DOM صفحه وب به‌روزرسانی می‌شوند.

بنابراین همچنان که ملاحظه کردید، صفحه وب ما با داده‌های همزمان که از سرور ارسال می‌شوند و بدون نیاز به بارگذاری مجدد مرورگر به‌روزرسانی می‌شود.

در بخش بعدی شیوه پیاده‌سازی AJAX با استفاده از جاوا اسکریپت صرف را بررسی می‌کنیم.

شیوه بهره‌گیری از AJAX با استفاده از جاوا اسکریپت صرف

ابتدا باید اشاره کنیم کتابخانه‌هایی وجود دارند که امکان ایجاد فراخوانی‌های AJAX را تسهیل می‌کنند؛ اما همواره در زمان یادگیری بهتر است با مقدمات و پشت صحنه اجرای کارها آشنا شویم.

به قطعه کد جاوا اسکریپت خالص زیر که فراخوانی AJAX را اجرا کرده و پاسخ‌ها را به صورت ناهمگام از سرور واکشی می‌کند توجه کنید:

1<script>
2var objXMLHttpRequest = new XMLHttpRequest();
3objXMLHttpRequest.onreadystatechange = function() {
4  if(objXMLHttpRequest.readyState === 4) {
5    if(objXMLHttpRequest.status === 200) {
6          alert(objXMLHttpRequest.responseText);
7    } else {
8          alert('Error Code: ' +  objXMLHttpRequest.status);
9          alert('Error Message: ' + objXMLHttpRequest.statusText);
10    }
11  }
12}
13objXMLHttpRequest.open('GET', 'request_ajax_data.php');
14objXMLHttpRequest.send();
15</script>

در ادامه به توضیح کامل قطعه کد فوق می‌پردازیم تا با آن چه در پشت صحنه رخ می‌دهد آشنا شویم.

ابتدا ما یک شیء XMLHttpRequest را مقداردهی می‌کنیم که مسئول ایجاد فراخوانی‌های AJAX است.
شیء XMLHttpRequest یک مشخصه readyState دارد و مقدار این مشخصه در طی چرخه عمر درخواست تغییر می‌یابد. این شیء می‌تواند یکی از چهار مقدار زیر را داشته باشد: OPENED ،HEADERS_RECEIVED ،LOADING و DONE.
ما می‌توانیم با استفاده از مشخصه onreadystatechange یک «تابع شنونده» (listener function) برای تغییر وضعیت این شیء تعریف کنیم. و این دقیقاً همان کاری است که در مثال فوق انجام داده‌ایم. یعنی از یک تابع استفاده کرده‌ایم که هر بار که حالت مشخصه عوض می‌شود فراخوانی خواهد شد.
در این تابع بررسی می‌کنیم که آیا مقدار readyState برابر با 4 است یا نه، یعنی آیا درخواست ما کامل شده و پاسخ از سرور دریافت شده است. سپس بررسی می‌کنیم که آیا کد حالت برابر با 200 است یا نه، یعنی آیا درخواست ما موفق بوده است. در نهایت پاسخی را که در مشخصه responseText شیء XMLHttpRequest ذخیره شده واکشی می‌کنیم.
پس از ایجاد شنونده، درخواستی را به وسیله فراخوانی متد open شیء XMLHttpRequest مقداردهی می‌کنیم. مشخصه readyState پس از این فراخوانی به میزان 1 تعیین خواهد شد.
در نهایت متد send شیء XMLHttpRequest فراخوانی می‌شود که عملاً درخواست را به سرور ارسال می‌کند. مشخصه readyState در این زمان برابر با 2 تعیین می‌شود.
زمانی که سرور پاسخ دهد، در نهایت مقدار readyState را برابر با 4 تعیین می‌کنیم و می‌بینید که کادر هشداری، پیام دریافتی از سرور را نمایش می‌دهد.

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

در بخش بعدی شیوه استفاده از کتابخانه jQuery برای اجرای فراخوانی‌های AJAX را خواهید دید.

شیوه بهره‌گیری از AJAX با استفاده از کتابخانه jQuery

در بخش قبلی به بررسی شیوه اجرای فراخوانی‌های AJAX با استفاده از جاوا اسکریپت خالص پرداختیم. در این بخش به بررسی شیوه استفاده از کتابخانه جی کوئری برای این کار می‌پردازیم. ما فرض می‌کنیم که شما با مبانی مقدماتی این کتابخانه آشنایی دارید.

فیلم آموزش کاربردی ایجکس AJAX در جی کوئری jQuery در فرادرس

کلیک کنید

کتابخانه جی کوئری متدهای مختلفی برای اجرای فراخوانی‌های AJAX دارد. ما در این راهنما روی متد استاندارد ajax که غالباً استفاده می‌شود متمرکز می‌شویم.

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

1<script>
2$.ajax(
3  'request_ajax_data.php',
4  {
5      success: function(data) {
6        alert('AJAX call was successful!');
7        alert('Data from the server' + data);
8      },
9      error: function() {
10        alert('There was some error performing the AJAX call!');
11      }
12   }
13);
14</script>

همان طور که احتمالاً می‌دانید علامت $ برای اشاره به شیء جی کوئری استفاده می‌شود. پارامتر نخست متد ajax لینک URL-ی است که در پس‌زمینه برای واکشی محتوا از سمت سرور استفاده می‌شود. پارامتر دوم در قالب JSON است و امکان تعیین مقادیری برای گزینه‌های مختلف پشتیبانی شده از سوی متد ajax را فراهم می‌کند.

در اغلب موارد باید callback-های موفقیت و شکست را نیز تعیین کنید. callback موفقیت پس از تکمیل موفقیت‌آمیز فراخوانی AJAX اجرا می‌شود. پاسخ بازگشتی از سرور همراه با callback موفقیت ارسال می‌شود. در سوی دیگر callback شکست زمانی فراخوانی می‌شود که چیزی اشتباه شده باشد و مشکلی در اجرای فراخوانی AJAX پدید آمده باشد.

بنابراین چنان که می‌بینید اجرای عملیات AJAX با استفاده از کتابخانه جی کوئری کاملاً آسان است. در واقع، این فرایند صرف نظر از این که از چه کتابخانه جاوا اسکریپت برای اجرای فراخوانی‌های AJAX استفاده می‌کنید، کمابیش مشابه خواهد بود.

در بخش بعدی یک مثال واقعی ارائه کرده‌ایم تا با شیوه استفاده از AJAX در PHP آشنا شوید.

یک مثال واقعی از AJAX در PHP

در این بخش یک مثال می‌نویسیم که محتوای JSON را از یک فایل PHP در سمت سرور با استفاده از AJAX واکشی می‌کند.

به منظور ساده‌سازی آموزشی، مثالی که می‌نویسیم به اجرای عمل login کاربر با استفاده از AJAX و JQuery می‌پردازد. برای آغاز این کار باید یک فایل به نام index.php بسازیم. همان طور که می‌بینید در قطعه کد زیر یک فرم ورود ابتدایی رندر می‌شود.

1<!doctype html>
2<html>
3<head>
4<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
5</head>
6<body>
7<form id="loginform" method="post">
8    <div>
9        Username:
10        <input type="text" name="username" id="username" />
11        Password:
12        <input type="password" name="password" id="password" />    
13        <input type="submit" name="loginBtn" id="loginBtn" value="Login" />
14    </div>
15</form>
16<script type="text/javascript">
17$(document).ready(function() {
18    $('#loginform').submit(function(e) {
19        e.preventDefault();
20        $.ajax({
21            type: "POST",
22            url: 'login.php',
23            data: $(this).serialize(),
24            success: function(response)
25            {
26                var jsonData = JSON.parse(response);
27 
28                // user is logged in successfully in the back-end
29                // let's redirect
30                if (jsonData.success == "1")
31                {
32                    location.href = 'my_profile.php';
33                }
34                else
35                {
36                    alert('Invalid Credentials!');
37                }
38           }
39       });
40     });
41});
42</script>
43</body>
44</html>

این فایل index.php یک فرم کاملاً استاندارد محسوب می‌شود که شامل فیلدهای نام کاربری و رمز عبور است. همچنین شامل قطعه کد جاوا اسکریپت جی کوئری است که در ادامه به توضیح آن پرداخته‌ایم.

ما از رویداد submit عنصر form که هنگام کلیک کردن کاربر روی دکمه submit تحریک می‌شود استفاده کرده‌ایم. در دستگیره (handler) این رویداد، یک فراخوانی AJAX را مقداردهی می‌کنیم که داده‌های فرم را با استفاده از متد POST به صورت ناهمگام به فایل login.php ارائه می‌کند. زمانی که پاسخی از سوی سرور دریافت شود، آن را با استفاده از متد prase در شیء JSON تفسیر می‌کنیم. در نهایت بر اساس این که پاسخ موفقیت یا شکست بوده است، عمل متناسب را اجرا می‌کنیم.

فایل login.php نیز به صورت زیر است:

1<?php
2if (isset($_POST['username']) && $_POST['username'] && isset($_POST['password']) && $_POST['password']) {
3    // do user authentication as per your requirements
4    // ...
5    // ...
6    // based on successful authentication
7    echo json_encode(array('success' => 1));
8} else {
9    echo json_encode(array('success' => 0));
10}

فایل login.php شامل منطق احراز هویت کاربران است و یک پاسخ JSON بر مبنای موفقیت یا شکست login بازگشت می‌دهد.

سخن پایانی

در این راهنما به بررسی مبانی AJAX پرداختیم و با شیوه استفاده از آن در PHP آشنا شدیم. در نیمه نخست مقاله به طرز کار AJAX در جاوا اسکریپت خالص و کتابخانه جی کوئری اشاره کردیم. در نیمه دوم نیز به معرفی یک مثال واقعی پرداختیم که شیوه استفاده از AJAX برای واکشی محتوای PPH از سمت سرور را نشان می‌داد.

فیلم مجموعه آموزش‌ برنامه نویسی پی اچ پی PHP – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

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

بر اساس رای ۳ نفر

آیا این مطلب برای شما مفید بود؟

اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.

ثبت نظر

منابع:

tutsplus

میثم لطفی (+)

«میثم لطفی» در رشته‌های ریاضیات کاربردی و مهندسی کامپیوتر به تحصیل پرداخته و شیفته فناوری است. وی در حال حاضر علاوه بر پیگیری علاقه‌مندی‌هایش در رشته‌های برنامه‌نویسی، کپی‌رایتینگ و محتوای چندرسانه‌ای، در زمینه نگارش مقالاتی با محوریت نرم‌افزار با مجله فرادرس همکاری دارد.